本系列文章旨在由淺入深、由理論到實踐地介紹 VR 設計。無論你在做哪個領域的設計，都能通過這個系列了解 VR 設計的特點。本文是第一集，深入分析 VR 界面的文字設計。
文章來源：優設 作者：愛奇藝XRD
本系列文章旨在由淺入深、由理論到實踐系統地介紹了本團隊在近幾年的設計工作中的一些經驗總結和重點思考。本系列面向廣大設計師，不論你目前在做什么領域/哪個端的設計，都可以了解到 VR 端和其他端的異同。希望給正在看文章的你帶來收獲。
團隊介紹：愛奇藝 XRD——愛奇藝 VR/AR/XR 設計團隊，目前主要負責愛奇藝 VR app 的設計工作（包括各個 VR 設備端和手機端）。
傳統的數字終端（手機、電腦、pad 等），用戶界面存在于二維的物理屏幕里，也就是在一個平面里。而屏幕和界面通常都是長方形的。
在 VR 中，有空間感的不僅僅是虛擬場景，用戶界面也是布局在三維空間里的?！钙聊贿吔纭沟母拍畋淮蚱屏?，設計師的畫板不再是各類手機不同尺寸的屏幕，而是一個「無限的」空間。界面本身也可以是三維的、打破傳統的，不再必須是一個個的長方形。
真正的 z 軸
這不同于在 2D 屏幕終端上，元素只擁有（x、y）坐標點的屬性，而并沒有一個 z 軸的概念。Z 軸，也就是深度概念，是通過設計師利用陰影、動效等視覺效果，「模擬」出來的前后關系。
在 VR 中看到的內容物（包括 UI 界面、場景、模型、視頻資源等）有真實概念的前后關系，每個物件擺在一個具體的（x、y、z）坐標點上。物件擁有絕對位置，物件和物件之間有相對位置，物件和 camera（指用戶觀測點）之間有一個具體的距離。
角度和曲面
除了 z 軸坐標，因為 VR 界面存在在空間里，所以還擁有一個屬性就是角度，這包含了在（x、y、z）三個軸上旋轉的角度。每一個物件也可以不再是一個平面，而是曲面的、三維的。
角度和位置共同決定了，當用戶看向某個物件時，這個物件的樣子。
「有多大？」
一個物件在 VR 中「有多大」很難簡單描述清楚。在傳統端只需標注某個 UI 元素的「大小」「間距」，描述單位是像素。而在設計 VR 時。需要從多個維度定義一個元素：「大小」「（x、y、z）位置」「（x、y、z）角度」。同時，「有多大」還跟用戶觀測點的位置息息相關。
在介紹下文理論之前，讓我們先認識兩個常見的 VR 術語：
FOV：Field of View，視場角
視場角的大小決定了光學儀器的視野范圍。在 VR 中，視場角是 VR 硬件設備的一個屬性，設備 FOV 是一個固定值。
在我們團隊日常工作用語中，通常也用來指代用戶的視角范圍、界面元素的角度范圍（如，「某面板水平 FOV 是 60°」）
DOF：Degree of Freedom，自由度
物體在空間內具有 6 個自由度，即沿 x、y、z 三個直角坐標軸方向的移動自由度和繞這三個坐標軸的轉動自由度 。
雖然說 VR 是一個 360° 全景三維空間，但對于目前大多數 VR 的使用場景來說，可供設計師創作的區域其實已被大大縮小了。
目前國內市面常見的可移動的 VR 設備（非主機類），如小米 VR 一體機、Pico 小怪獸系列、奇遇 VR、新上市的華為 VR Glass，標配均為 VR 頭顯配合3DOF手柄的硬件模式。對應此類 VR 硬件模式，常見的用戶使用場景為：「坐在椅子上+偶爾頭轉+身體不動」，好比「坐在沙發上看電視」。即使用戶使用一個 6DOF 的 VR 硬件，支持空間定位可以在房間里走動，但對于愛奇藝 VR 這類觀影類 app 來說，「坐在沙發上看電視」仍是主要的使用場景。
因此， 主要的操作界面還是需要放在「頭部固定情況下的可見范圍內 」。這樣用戶無需費勁轉頭，就可以看到主要內容、操作主要界面。
那么，什么是「頭部固定情況下的可見范圍 」呢？我們需要先學習一些人機工程學，來了解一些人眼 在不同情況下的可視范圍。
（此圖的中心點 為用戶觀測點。）可以看出，
頭部固定的情況下，雙眼能看到的最大范圍約為 124°。但還要考慮到一個限制，目前 VR 硬件設備的 FOV 并未達到這個值，通常在 90°~100°。而其中，能看清晰的范圍只有眼前中心處的 60°。這相差的范圍可以理解為「余光」，在人眼中成像是不清晰的，但仍在視野范圍里?！@個范圍極大程度上決定了每一個 UI 面板（包括其中的圖片、文字等）適合占據的空間，也決定了 VR 中視頻播放窗的最小和最大值。
頭部轉動但身體不動的情況下，脖子舒適轉動能看到的范圍約有 154°，脖子轉動到能看到的范圍約有 204°。一些次要內容可以放在這個區域，用戶需要轉動頭部才能看到，但也不用太費力。
偏后方的區域范圍，必須移動身體才能看到，因此只能放一些「沒看見也沒關系」的內容。比如環境、彩蛋等。
在放松狀態下，頭部與眼睛的夾角約為 105°。也就是說，當頭部豎直向前時，眼睛會自然看向水平線下 15° 的位置。頭部固定僅眼球轉動時的最佳視野是（上）25° 和（下）30°。應將操作界面和主要觀看內容放在此范圍內。
垂直方向最大視野范圍是（上）50° 和（下）70°。這個范圍也是超過了 VR 硬件設備的 FOV。
另外，點頭比抬頭舒適?，F實世界中，我們通常都是低頭狀態比抬頭多，比如玩手機、看書或看筆記本電腦時。所以在 VR 中，比起偏上方區域，應考慮更多利用起偏下方的區域。
（見本章圖1）
0.5m 之內的物件，雙眼很難對焦，因此不要出現任何物體。（這個值對于全景 3D 視頻的拍攝 意義較大，應該盡量規避離鏡頭過近的物體出現）
有立體感的范圍在 0.5m~10m，這里應該放置主要內容，尤其是可操作的內容。
10m~20m 之間，人眼仍能感覺出立體感，但有限。此范圍仍適合放置可以體現沉浸感的 3D 場景/模型。
超過 20m 的距離，人眼很難看出立體感了，物體和物體的前后關系不再明顯。因此適合放置「僅僅作為背景」存在的內容，也就是環境。（值得注意的是，因為反正也感知不出立體感，所以此范圍的環境可以處理為全景球（即一個球面），來代替 3D 模型，這大大降低了功效。）
在現實世界中，每個信息媒介都有一個預設好的觀測距離。例如，握在手中的手機，距人眼大約 20cm。放在桌面上的電腦主機顯示屏，距人眼大約60cm?？蛷d墻上的電視，距人眼大約 5m。在馬路另一頭的廣告牌，距人眼可達幾十米。
內容在預設好的觀測距離上，對應預設好的大小。例如，手機上的正文文字只有幾毫米大，而廣告牌上的文字需要好幾米大。
而在我們（觀測者）看來，這些文字都閱讀舒適。甚至其實看起來是「一樣大」的。
這是因為它們擁有同樣的視角——被視對象兩端點到眼球中心的兩條視線間的夾角。具體舉例來說，在 1m 處看一個 10cm 的物體，和 在 2m 處看一個20cm 的物體，在 3m 處看一個 30cm 的物體，這 3 個物體「看起來是一樣大的」，他們具有相同的視角。但我們仍然清楚地知曉誰近誰遠，是因為眼睛對焦在不同的距離上，也就是視距不一樣。
在 VR 中，不能再像移動端那樣用「像素」來度量一個物件的大小，而是通過「視角」。而視角是由物件的「大小」、「位置」、「旋轉角度」共同決定的。在「用戶觀測點不動」的使用場景下，「位置」實際上就是與觀測點的「視距」。
界面的「旋轉角度」應遵守一個原則——一個便于觀看和操作的界面，應該盡量垂直于視線、面向用戶觀測點。也就是說，當你確定好一個界面的「位置」后，就自然會有一個對其來說的「最佳旋轉角度」。
在 VR 中，一個物件的視角由其「大小」和「視距」兩個變量影響。當確定了「最佳視角」、「最小可閱讀視角」時，這就決定了「需要在不同距離上放置的信息內容，各自應該放多大」。
有了理論基礎后，接下來就是不斷實踐。
首先需要讀者了解的是，我們團隊設計的對象是愛奇藝 VR app——是在 VR 設備上的愛奇藝，是愛奇藝的第四個端。不僅包含愛奇藝全網 2D 內容，還擁有海量 VR 全景視頻、3D 大片。選片和觀影相關功能齊全。在體驗上主要打造有沉浸感的 VR 影院觀影，并突出 VR 特色內容。
本文章針對于 VR 一體機內的愛奇藝 VR app 設計展開討論，但我們同時也支持手機端 app，若感興趣可以在各大應用商店搜索下載。
我們學習的大量二手資料，給開展實際工作創造了基礎。然而最終設計效果其實是在反復驗證、試錯后決定的。
當根據理論資料開始做實踐，卻發現實際效果差強人意時，我們的建議是——注重實踐。原因之一是，目前 VR 界從技術到產品設計仍舊處在實驗性階段，遠未達到移動端設計規范的成熟性，國內外的相關理論經驗總結，都還沒有絕對定論的程度。Oculus 的設計指南中，都是建議「實驗，實驗，再實驗」。之二是，能搜集到的二手資料，不完全是建立在「人帶著 VR 設備手握手柄」這種使用場景上，所以導致實際結果「不是那么回事」。
基于「坐著不動+頭部轉動」的使用場景，和「自然視角偏下」、「低頭比抬頭舒適」的理論。
我們采取「從正視角出發，向左、右、下延伸」的布局思路。正視角放置當前界面的核心內容，左右兩側放置輔助信息內容；在必要時，可加入下部模塊。此類模塊化布局適用于所有界面，只是具體的面板尺寸、旋轉角度可以有所不同。根據每個界面需要承載的內容，因地制宜地合理規劃。
圖為我們使用的幾種常見 UI 布局。
基于人眼水平和垂直方向的視野范圍的理論，同時參考主要適配的硬件設備屬性（目前 VR 設備的 FOV 都小于人眼的視野范圍），即：
——我們決定了愛奇藝 VR 中主要界面的 FOV。
選片主界面 FOV （左-中-右 布局）
△ 「實際截圖」愛奇藝 VR 選片主界面
水平方向上：
垂直方向上：
影廳播控頁面 FOV（左-下-右布局）
在愛奇藝 VR 中，觀看非全景的 2D/3D 視頻，用戶會置身于一個電影院影廳場景中。視頻畫面會出現在影廳屏幕上。
影廳播控頁面（操控臺頁） 指播放視頻時（包括影廳場景影片和全景影片）的操作界面。
△ 「實際截圖」愛奇藝 VR 影廳播控頁面
影廳播控頁面采用「左-下-右」布局。包括 3 個功能區塊：相關推薦（左）、操控臺播控（下）、詳情 & 選集（右）。該頁面在視頻屏幕（或全景視頻）的前方，靠單擊觸摸板來呼出和關閉。
這 3 個面板的邊界均在正視角「頭部固定時可見 FOV」之內，也就是保證了，當用戶注視影片本身并呼出該面板時，能看到所有面板。而用戶僅需輕微轉動頭部，就可看到完整的面板。
視頻播放窗的最大/最小值
視頻播放窗 即「影廳屏幕」，被我們設定了屏幕大小可調的功能，以此來適應不同用戶的觀影習慣。屏幕大小可在指定范圍內平滑調整。
屏幕最小值（50°）：完整的屏幕范圍都在「頭部固定情況下清晰 FOV」。
屏幕最大值（76°）：屏幕范圍在「頭部固定情況下可見 FOV」，即「充滿視野」。此狀態的觀感類似 IMAX 影廳。
垂直方向上：距水平線偏上而不是偏下。這里其實和理論值發生了沖突。理論資料中，人眼最舒適的對焦點在「水平線向下 15°」。在老版本中，我們曾經將主 UI 和視頻屏幕都按理論值擺在了偏下方，但實際效果并未令人感到舒適，反倒明顯感知到「內容都偏下了」。這就是上文所說，「當理論導致實踐差強人意」時，我們選擇了不斷實驗，以實際效果為準。另外，本場景下方有影廳座椅等實際模型，并且還有操控臺播控的 UI。綜上，影廳屏幕被放在了水平偏上的位置。
根據前文理論提到的，z 軸距離的合適范圍（0.5m~20m）比起水平和垂直 FOV 來說，數值范圍要大得多，也就是說可試驗的范圍很大。因此在界面距離這一點上，我們進行了大量反復的實踐——最終決定了當前版本中各級頁面的深度層級和具體數值，如下圖：
跟隨式提示：
阻斷式提示：
輔助操作界面：
減少眼球調焦，縮小距離差
值得注意的是，在我們的老版本中，不同層級的界面曾經被擺放的距離差距很大。如，toast 在 1.75m，主 UI 在 3m，而視頻屏幕在 12m。之所以改動至上圖數值，主要是為了達到「在看向不同層級界面時，盡量減少眼球調焦的程度」的目的。
眼球在看向不同距離上的內容時，需要對焦到不同的平面，距離差距越大，眼球需要調整得越大。如果頻率高的話，容易導致（一部分）人的眼球疲勞。
Z軸上的獲焦效果
VR 獨有的「z 軸」，不僅允許了界面可以被放在不同距離上，還支持了利用 z 軸上的位移和旋轉 來表達獲焦效果?？丶猾@焦時，只需要在 z 軸上輕微的位移或輕微的角度旋轉，便可體現出與眾不同的有趣效果。
文章來源：優設 作者：愛奇藝XRD
缺省頁指頁面的信息內容為空或信息響應異常的狀態；設計缺省狀態的作用不僅是引導用戶在異常邊界狀態的操作提示，同時也是安撫用戶體驗情緒的重要場景；更重要的是為邊界場景營造出良好用戶體驗。通過分析缺省狀態產生的原理，從而更為準確地把握交互缺省頁的設計原則。
談到缺省頁面可能是設計師最容易忽略輸出的范圍，可能直到對接的開發同學提出來，「這個頁面，如果沒有數據的時候，該怎么顯示??？」。為了更好地把控設計缺省頁交互狀態，首先要了解缺省頁出現的原理。App 頁面內容（包括圖片、文字、數據字段等等）都是請求服務器數據，順利返回后，正常顯示到客戶端頁面。在了解清楚基礎實現邏輯后，就可以開始梳理、整理缺省狀態的設計思路。
△ 圖1 缺省狀態的場景梳理圖
缺省狀態包括：系統層、信息層、空白層。
系統層：指當用戶請求服務器時，返回提示請求提交失敗，并檢測到失敗原因時呈現的頁面；例如：加載失敗、服務器異常、無網絡等；頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細分描述，也可節約成本使用網絡異常的統一文案。
信息層：請求服務器數據成功，但返回的數據異常的頁面；例如：內容已刪除、內容已下架、內容不存在；文案內容以提示數據類型的缺失為主。顯示形式除了常有的全屏缺省圖，還會出現在數據列表下單一內容缺失的缺省模塊化的情況，例如：單一作品在書架上顯示已下架。
空白層：請求服務器數據成功，但顯示無數據；內容頁在無數據時需要缺省狀態進行表達；例如：頁面空數據、搜索無結果等?？瞻醉撁鎸儆谡＞W絡顯示場景，所以一般會在缺省頁附帶有相似屬性模塊的用戶引導，爭取用戶重復消費的目標，滿足用戶的操作的訴求。
最后根據每個不同的缺省狀態，梳理產品相對應的場景。逐一根據場景特點來設計頁面內容。那缺省頁的設計有哪些表現形式呢？
沒有用心設計的缺省頁無法給用戶帶來良好用戶體驗，并可能給用戶帶來困擾，如下圖：某小眾直播平臺的拉新邀請頁面，無邀請記錄狀態下沒有任何有效反饋信息，用戶不能明確得知到底是網絡問題還是賬號同步出錯，亦或者是沒有一次邀請。正確的缺省頁設計內容理應明確表達出符合用戶心理預期的視覺場景表達（圖形）；和使用易理解和語法恰當地表達當前的異常狀態（標題）甚至于引導用戶解決問題的文案描述。
△ 圖5 缺省頁的錯誤示范
1. 視覺圖案+文案
此類缺省設計形式一般應用于表達系統性無響應或初始空白態的缺省場景。視覺圖案一般使用 app 吉祥物或主色調延展出的 icon 或插畫來表示缺省狀態；文字：通常為「標題」或「標題+描述」結構；標題通常是表達出現缺省的原因；描述文案則說明結束缺省狀態的解決辦法，如「請檢查網絡是否順暢」 等等。
2. 視覺圖案+文案+引導
此類缺省設計形式一般運用于需要用戶引導操作來達到業務目標的缺省場景。在視覺圖案+文案的基礎上加入引導模塊，主要作用于避免用戶在數據邊界的狀態下，會因為無法達到操作目的而提高的跳出率。引導模塊的內容包括：相似屬性內容，相似行為目標按鈕或解決缺省狀態操作按鈕，加入引導，用戶進行某項行為或者感知某些信息，對于功能的教學和使用頻率的提升有著重要作用。引導模塊的形式也是日新月異，逐漸變成新用戶業務引導的作用，不僅限于頁面平鋪，也可以做成固定氣泡微動效，例如：抖音的發布缺省頁。
缺省頁除了常規的提示型設計方法，還有許多其他的設計技巧，幫助用戶在遇到困難，更好地安撫用戶的情緒。這些設計技巧有些是替代原來的缺省內容，讓用戶有更多的消費空間與深度。有些是拓展缺省狀態的補充內容，讓用戶不容易跳出頁面，增加用戶的消費時長。具體如下：
1. 使用推薦內容
缺省狀態中的空白層非常影響邊界情況的用戶體驗，提出一種假設，是否可以刻意推薦相同屬性的內容呢？這樣的界面既不會顯得蒼白無力又可以留住用戶的注意力。相似性的內容也可以解決用戶目標的迫切性。所以說，這種方法非常適合內容型產品中使用。例如：新用戶在打開電商產品的購物車時候，理應是空白無消費行為的操作記錄。那么平臺方通過用戶畫像與熱門排行算法推薦了一個商品流。這樣可以解決用戶無目標性挑選的訴求，增加消費時長。至于產品如果確定用戶畫像的推薦算法，可以通過獲取第三方登錄的個人基本數據之后，才給我推薦了數據庫內相對應標簽的熱門商品，這樣推薦的精準度也會高些。
2. 使用緩存
是否使用緩存內容代替缺省狀態？根據產品特性來判斷，工具類、金融類等同類型產品不適合使用緩存；因為用戶交互操作的數據必須保持實時性與真實性。而內容型、電商類等類型產品適合使用緩存來代替缺省狀態；理由：用戶消費內容的轉化路徑是先消費后轉化的行為特點，不存在系統操作門檻，且緩存內容可以代替產品的缺省狀態，安撫用戶操作失敗所帶來跳出率過高的風險。
3. 情感化表達
當缺省頁給到用戶時，通常省時省力的做法就是老老實實告訴用戶當前的狀態，最多配上一個具有通識性的灰色 icon。但是，秉持著以用戶體驗為己任的時代，我們其實可以把缺省內容表達得更加生動形象一些。在這里會加入一些情感化的表達，而不是僅僅只是做到準確的目標而已，比如加上活潑的插圖故事，或者把文案寫得更加擬人化、戲劇化一些。這些配圖在讓用戶明白當前的狀態的同時，往往也能引發用戶會心一笑，從而彌補空白頁面帶來的失落感甚至可以帶給用戶一些正面的情感。如下圖：
4. 提供新任務
通常缺省頁的引導模塊都著眼于解決當前任務。如果碰到沒有解決方案的情況（例如：404，服務器崩潰等）可以提供給用戶具有情感共情的新任務，讓他們暫時忘記無法達到目標的挫敗感，又有體諒的情懷。幫助建立正向積極的品牌價值觀。例如：訪問騰訊網時訪問失敗的時候，網頁除了顯示 404 狀態之外，還會顯示騰訊「寶貝回家」的公益尋人計劃。將缺省頁與公益內容相結合，不僅改善到用戶缺省狀態。也貫徹騰訊價值觀「用戶為本，科技向善」的輸出。一個好的缺省頁也可以承擔社會責任，讓公益傳播到每個角落。
△ 圖10 騰訊網404公益任務缺省頁
結語：作為設計師有時會聽到需求方表述「這種極少出現的情況，我們可以暫且不管它?！沟羌毠澮娬嬲?，所有優秀的體驗設計都必須照顧到方方面面的缺省情況。讓每個用戶的流量價值發揮到最大，產生相互信任的良好的品牌關系。這樣的平臺生態是良性的，這樣的產品會更有流量轉化的商業化價值。
文章來源：優設 作者：騰訊動漫TCD
編者按：這篇文章來自 Taras Bakusevych 的文章《How to simplify your design》
如今的數字產品，在不斷迭代過程中，會加入更多功能，添加更多的技術支持，更新進階的特性。而另一方面，企業對于構建簡單實用的產品，也同樣非常著迷。這當中當中毫無疑問是存在微妙的對抗和沖突的——如何讓更好更多的信息，以更加輕量易用的方式呈現出來？這就涉及到產品的簡化改版的技巧了。
讓產品變簡單，其實一件困難的事情。
我們可以將「簡單」定義為「更加易于理解或完成」，或者是「不困難」。值得一提的是，簡單與否，它是主觀的，對于一個人而言簡單，對于另一個人而言不一定簡單。通常，我們是通過下面的三個步驟來判斷一件事情是簡單還是困難：
在《簡單法則》當中，John Maeda 提供了10條法則，這些法則能夠幫你平衡商業、技術、設計所帶來的復雜性——更通俗的來說，就是如何合理簡化但是又能收獲更多。
The Laws of Simplicity, John Maeda
Meada，作為麻省理工多媒體實驗室的教授，他也是舉世聞名的平面設計師。在書中，他非常慎重地探討了「改進」這一概念，在他看來，它通常并不總意味著「更多」。無論是對于復雜度，還是簡化，都只是相對概念。結合合理的培訓，培養制造火箭的科學家也不是難事，但是總會有一些關鍵的因素，會讓簡單的事情變復雜，在設計中我們應該盡量去規避它們：
那么，我們在具體的產品改版中，要如何合理地簡化呢？下面，是我結合這些原則來總結的21條建議：
有太多的產品試圖讓你更用戶做更多的事情，每個企業都試圖成為行業中的瑞士軍刀。但是，如果你希望產更加簡單，那么你需要有一個核心價值，并且確定產品真正針對的是誰，并非每個產品都應該成為 Facebook。你的產品的核心價值是什么？
想要簡化產品，最簡單的方法，是經過深思熟慮之后再進行簡化和刪除。如果組件或者模塊的功能、價值存疑，那么請刪除。次要信息、不常用的控件、分散注意力的樣式，都在這個范疇內。就這么簡單。一旦采用這一的方式，你會立刻馬上看到結果。當然，刪除的時候，請務必深思熟慮。
「簡單并非完全沒有混亂，因為雜亂必然會伴隨簡化而存在。簡單本質上是對產品的定位和目的有更精準的描述。而沒有雜亂僅僅意味著這是一件不雜亂的產品，但是這并非簡單?！?
——喬納森·艾維
我們日常設計的絕大多數產品，都涉及到需要用戶理解大量數據。當用戶對于趨勢和變化感興趣的時候，請盡量使用可視化的方式來呈現信息，而不是一堆數字。嘗試從數據中提取有效的內容，可視化地呈現在用戶眼前，這才是有意義的簡化。
用戶長期遭受復雜決策機制的折磨，幫助用戶看清各種信息，更好的決策是簡化的方向之一。席克定律曾經對此作出過非常經典的解釋：用戶做選擇所需要花費的時間和精力往往會隨著選項數量的增加而增加。因此，如果你希望用戶決策變得簡單，那么你需要簡化選擇，消除不必要的選項，來幫助用戶進行選擇。
當前心理學理論和調研肯定了一件事，就是足夠多的選擇可能會給人帶來積極的情緒，相應的衍生出一個流行的觀點，就是選擇越多越好，但是人類天性中的管理能力是不足以支撐過多選擇的。
果醬實驗是消費心理學當中最著名的實驗之一：為消費者提供更少的選擇，對于銷售更加有利。這一點是至關重要的——更少的選擇，能夠帶來更多的銷量。
在這個實驗當中，選擇較少所帶來的轉化率幾乎是更多選擇的轉化率的10倍。這是一個選擇過載帶來不良后果的一個重要范例——過多選擇抑制了用戶選擇購買的想法。
如果多個選擇總是無法避免，那么不妨給用戶提供建議，或者告訴用戶多數用戶的選擇。向用戶清楚地傳達選項之間的差別，這在定價策略上會帶來更多積極的效果。
當你了解用戶流程的時候，就應該有針對性將用戶注意力引導到的對的目標上去，找到關鍵區域，讓用戶在界面中優先注意到它們。
你應該經常會聽到類似「可讀性很差」這樣的表述。有很多設計的確存在這樣的問題。在設計當中，有太多的因素會影響信息的傳達——字體的選取，大小變化、間距、大小寫和配色，都會影響到層次結構，影響到用戶汲取信息的方式。使用正確的配色和版式，讓內容的層次結構更加清晰，最好還能反映出品牌特征，這樣就更能增強吸引力和用戶對它的印象了。
下面兩張圖當中，要你數清楚有多少個圓點，哪一張圖會讓你這個過程更快？
如同你所看到的，無序的點狀方陣和有序的是截然不同的，后者的認知負擔更低，識別速度更快。面對無序的信息和內容，我們需要逐個計數，但是面對有序的信息，則截然不同。
有組織的元素不僅有著更高的識別度，也更容易被記住。在數字產品當中，記住常見控件的位置和功能無疑是重要的。同樣是上面這張圖，如果不是計數，而是記住每個點的位置，你能不能做到？毫無疑問，缺少組織結構，這是一件艱難的事情。
在簡化復雜頁面結構的時候，對組件和內容進行分組通常是最為有效的方法之一。通過層級劃分，用戶每次需要處理的信息量都會更小，而不是在無關的組件中來回穿梭尋找。借助邊框和卡片將相關度更高的內容整合到一起，這是非常便捷的方法。此外，關于關于分組，格式塔原理中的分組原則是非常值得借鑒的：接近性、相似性、連續性、閉合性和連通性。
幾乎任何產品當中都會涉及到不同類別的表單，這是獲取用戶信息的一種方式。有的時候，即使刪除掉一些不必要的字段，表單依然會很長。因此，我們可以將巨大的表單或者任務拆分開來，這樣一來，整個執行過程會變得簡單不少。
設計表單的時候，盡量使用單列而非多列，這樣更加順暢、易于填寫。用戶無需思考接下來要填寫什么，而是按照一條線繼續操作下去即可。
不確定性讓人感到焦慮，盡可能地在設計當中規避這種不確定性。這就是為什么要讓用戶在任何時候都清晰地知道他在流程中所處的位置，以及接下來會發生什么。總結之前所提供的信息也是個好主意，能夠減輕用戶的負擔，避免反復檢查之前的內容。
人腦對于涉及計算的部分通常會比較費力，對于這些不太占用計算力的內容可以交由系統來進行計算，和計算相比，人的大腦在處理具象化的信息的時候更加擅長。嘗試利用系統，而不是將壓力轉嫁給用戶。
漸進式的展開是用戶體驗設計當中的一種范式，這種方法能夠讓界面更容易被理解。當涉及到多屏、大量信息和操作的時候，這種逐步展現的機制，可以避免讓用戶感到不知所措，也可以隱藏一些無關的信息，直到最后用戶可以清晰明白內在的關聯性為止。逐漸展現的方法，遵循著「從抽象到具體」這樣的一種概念，而 iOS 系統當中，所采用的導航方式，無疑就是這種思路的典范。一屏一個步驟，逐漸展現，最后給用戶一個確切的結果。
用戶將絕大多數的精力都耗費在各種各樣的其他數字產品上，這意味著用戶對于其他的網站和APP的交互模式、使用方法都有著清晰的了解，對于特定的模式有具體的預期。因此，無論你是設計網站，某個 APP ，甚至是冰箱上的控制系統，都可以遵循既有的設計和交互模式。這并不是意味著停止創新，而是在很多事情上，你無需重新造輪子。
在設計任何產品的時候，都應該讓用戶盡快感知到產品的價值。因此，除非是滿足功能性的需求，在用戶初次打開應用的時候，都盡量把其他的干擾去掉，因為這都是讓用戶了解產品價值的障礙。第一印象很重要，如果不滿意，很多用戶會立即離開。
如果你第一次嘗試，即使是最簡單的操作，可能也是有挑戰性的，有時候新手使用 APP 的時候需要引導，但是最好的方法是盡量讓體驗和功能一目了然，搭配上下文環境的說明引導，而不是提供復雜繁瑣的學習材料。
簡約易用的產品大多能夠合理地結合人體工程學的設計。絕大多數人可能會想到諸如汽車座椅、控制面板和手柄這樣的案例，但實際其實遠遠不止。人體工程學適用于幾乎所有涉及人的產品設計。
1954 年，心理學家 Paul Fitts 仔細了解了人的運動系統，并且提出了費茨定律——移動到目標所需要的時間取決于和目標之間的距離，并且和目標大小成反比。這個定律反饋到具體的界面設計上，就是盡可能讓常用元素更大，并放置到更容易被觸及的地方。
刪除不必要的交互組件、視圖或者是步驟，是簡化過程中必不可少的部分呢。用戶應該可以以最快的速度進行操作，比如在表單中直接操作，而不是在彈出框中進行編輯，這個被稱為「流程狀態」，「流程狀態」不應當被彈出框打破。此外，對于很多需要填寫的部分，最好提供參數推薦建議功能，就像搜索的實時推薦，讓用戶可以更為準確地輸入。
智能默認值——或者說智能占位符是一個非常有用的策略。一方面可以幫助用戶更快更精準的填寫表單，另一方面，也給用戶提供了相對準確的范例。只不過，默認參數的確定，需要設計師和開發團隊對用戶的使用場景等信息進行研究，通過測試和調研，確定用戶使用狀況，以此來確定默認參數應該是多少。如果需要明確地參數或者選項，那么可以將默認值設置為 90% 用戶可能會選的選項，并輔以說明。
出錯信息會給用戶帶來很大的壓力，為了避免用戶陷入這樣的狀況，防止用戶無法完成任務，請使用數據輸入檢查的功能，對于格式輸入錯誤的表單和內容，對用戶予以警報和提醒，避免錯誤發生。對于極為重要的操作，在用戶提交之前，讓用戶二次確認信息，做好檢查。對于某些強制性、破壞性乃至于不可恢復的操作，確保用戶知道這一操作帶來的影響。
數字產品的可訪問性是老話題了，要讓產品和設計對于所有人——包括有視覺障礙的用戶，都可以輕松地使用。最常見的，就是不要使用色彩來作為傳達信息的唯一途徑，確保文本和背景之間有足夠的對比度，支持鍵盤導航操作等等?？稍L問性問題并不限于特定的群體，堅持不斷的改善和提升，有助于每一個用戶的體驗。
簡化并創造易于理解的產品并不容易，但是這是一條幾乎任何產品都要走的必經之路，簡化的方法和技巧有很多，雖然零碎，但是它們最終會帶著產品走向一條更好的道路。
文章來源：優設 作者：Taras Bakusevych
今天，90％ 的媒體互動都是基于屏幕的，通過手機，平板，筆記本電腦，電視和智能手表來與外界產生聯系。多屏設計已成為商業設計中不可或缺的一部分，響應式設計正迅速成為常態。作為 UI 設計師，我們希望為我們的產品在不同尺寸下都能為用戶提供良好的用戶體驗，柵格系統可以幫助我們做到這一點。
即使是我們只針對一個尺寸進行設計，我們也經常面臨設計布局方面的問題。合理運用柵格系統可以幫助我們控制布局結構并實現一致和有組織的設計。柵格系統就像無形的膠水一樣凝聚一個設計，即使元素看上去是彼此分離，但通過網格將它們連接在一起，實現良好的層次結構，位置關系和一致性。
設計師和開發者之間的協作過程中，柵格系統在前端開發中是被應用的很廣泛一套體系，許多優秀的設計都使用了柵格系統，使用柵格系統可以加速開發并保證視覺還原。柵格系統雖然是傳統設計方法中的一部分，但它仍舊能幫助我們去設計這個多終端的世界?？吹竭@里，你可能非常想知道柵格系統在頁面中是如何運作的，那么今天我們一起來學習并且實踐我們的格柵系統。
「The grid system is an aid, not a guarantee. It permits a number of possible uses and each designer can look for a solution appropriate to his personal style. But one must learn how to use the grid; it is an art that requires practice.」
「柵格系統可以幫助我們設計，但卻不能保證我們的設計。它有多種可能的用途，并且每個設計師都可以尋找適合其個人風格的解決方案。但是必須學習如何使用網格。這是一門需要實踐的藝術?！?
——Josef Müller-Brockmann《平面設計中的網格系統》作者
柵格系統可以讓你依靠秩序與邏輯去完成設計。
早在 20 世紀初，德國、荷蘭、瑞士等國的平面設計師們發現通過維持視覺秩序，從而使版面能更加清晰有效地傳遞信息，二戰后這種理念在瑞士得到了良好的發展，直到 20 世紀 40 年代后期，第一次出現了使用網格進行輔助設計的印刷作品。由瑞士設計師大師 Josef Müller-Brockmann（約瑟夫·米勒-布羅克曼）所著的《平面設計中的網格系統》一書，自 1961 年出版以來暢銷至今，對設計界有著深遠的影響。史稱 Swiss Typography Movement （瑞士新浪潮平面設計運動），后來成為全球風靡的 International Typographic Style （國際主義設計風格)）。
△ 約瑟夫·米勒一布羅克曼 (Josef Muller-brockmann, 1914-1996)
瑞士的一位平面設計師和教師。1958 年任《新平面設計》（New Graphic Design）主編 1966 年被任命為 IBM 的歐洲設計顧問。布羅克曼因他的極簡主義設計與簡潔的排版、圖形和色彩而聞名，他的設計對 21 世紀的眾多平面設計師都產生了重大影響。
1. 減少決策成本提高設計理解力
柵格系統在頁面排版布局、尺寸設定方面給了設計者直觀的參考，它讓頁面設計變得有規律，從而減少了設計決策成本；UI 設計也是需要理性的、客觀的、具有數學邏輯美感的。熟練運用網格系統能夠讓你的設計更有秩序和節奏感，頁面信息的展現更加清晰，提高閱讀效率，從而提供給用戶舒適的使用體驗。加快認知速度。這意味著用戶在使用產品完成特定的任務時，例如發送消息，預訂酒店房間或乘車。用戶能夠連貫地理解并找到下一條信息或下一步要采取的步驟。
2. 響應化
因為人們使用不同類型的設備與產品進行互動，從智能手表的小屏幕到超寬屏電視，交互是流暢的，并且沒有固定的尺寸。使用產品時，人們通常會在多個設備之間切換，以完成該產品的單個任務。所以響應式設計不應該是一種品，而是一種必需品。這意味著設計師不能再為單個設備的屏幕構建。多設備環境迫使設計人員根據動態網格系統進行思考，而不是固定寬度。使用網格可以跨不同屏幕尺寸的多個設備創建連貫的體驗。
3. 加速團隊協作設計
當多位設計師共同設計產品時，一個統一標準就變得尤為重要。如果沒有一個統一的框架去約束的話，我們的產品的頁面和組件的標準可能各式各樣，這樣的話整個產品的頁面都會比較混亂。因此，網格系統有助于將界面設計工作分開，因為多位設計師可以在統一的布局下進行不同部分工作，并且無縫集成并保持連貫。
4. 加速開發并保證視覺還原
大多數設計項目的實施，涉及到設計者和開發者之間的協作。柵格化提高了頁面布局的一致性和復用性；避免了設計師與開發者在細節上的反復溝通確認，從而提升了整個設計開發流程的效率、并能幫助開發者實現較為理想的設計還原。
1. 列和槽（Columns and Gutters）
列（Columns） 和槽（Gutters）。列（Column）是內容的容器，水槽（Gutter）用來調節相鄰兩個列的間距，把控頁面留白；列和列間距加上頁面邊距（Margin）加起來屏幕的水平寬度。列和列間距的內容區域（Content width）由 N個列和（N-1）個水槽組成。通常情況下，web 端采用 12 列，平板采用 8 列，手機采用 4 列。當然，你可以根據項目特點來設計你的網格系統，列和水槽的寬度我們可以利用 8 點網格系統來定義，下面會講到。列的數量越多，頁面就會被分割得越「碎」，在頁面設計時就會越難把控，適用于業務信息量大、信息分組較多、單個盒子內信息體積較小的頁面設計，列間距寬度數值對頁面的影響，與外邊距大體類似，即間距越大頁面越輕松簡單，反之亦然。用戶已經習慣通過鼠標滾輪或滾動條（scrollbar）來縱向瀏覽頁面內容，因此豎直方向可以無限延伸，所以柵格系統在豎直方向的柵格可以不體現出來，我們在執行設計時只要在水平方向保持規律的變化就可以了。
2. 頁面邊距（Side Margins）
頁面邊距就是內容區域（Content field）以外的空間，比較推薦的設計就是頁面邊距可以隨著屏幕尺寸的增大而增大。頁面邊距在移動設備上通常是 12Px到 40Px 之間，在平板設備和桌面設備頁面邊距變化就相當多了。在響應式設計中，你選擇了一個頁面邊距之后，縮小頁面寬度時頁面還是會有你設置的最小頁面邊距，直到到達下一個響應點（breakpoint）。當你增大頁面寬度時，頁面就有更多的頁面邊距，直到頁面寬度到達下一個響應點（breakpoint）。
3. 模塊（Field Elements）
模塊就是你的設計區塊，可以是一段文字，一張圖片，或是其他更加豐富的元素。背景元素并不能算作是設計模塊，所以并不需要遵循柵格系統。模塊的定義是很靈活的，它可以是個小的單位或是元素，也可以是一個元素豐富的區塊。
以 12 柵格系統為例，一個 12 柵格系統可以根據業務需要被 2 等分、3 等分、4 等分、6 等分、12 等分，還可以被 1:1:1、1：2：1、1：3：2、2：3：3、1:2、1:3、1:5、3:5 等不對稱分割，具體采用哪種比例的組合需要我們根據自己業務需求來定。
4. 8 點網格（8pt spatial system）
柵格系統大的層面可以幫助設計者更好的進行版式設計與內容布局，而小的方面可以輔助設計師規范頁面內各種元素的對齊與間距的設定。從用戶體驗角度來講，這兩者同等重要，從執行層面來講，我們一般先做版式設計與布局，然后再填充內容、調整細節。
由于列跟水槽的寬度是以網格作為基本單位來增加或者減小，所以柵格化的重要一步就是需要先定義好柵格的原子單位「網格」的大小。目前最普適易用的就是 8 點網格。我們也可以利用 8 點網格法來制定產品中的間距，建立 8 點為一個單位的網格，使用 8 的倍數來定義模塊的間距與元素的尺寸。8 點網格有如下幾點優勢：
如果設計上沒有立即可識別的間距系統時，這種設計可能會讓用戶感覺廉價、不一致，而且通常不值得信任。如果設計上遵循一個 8pt 網格系統時，節奏變得可預測和視覺上的愉悅。對于用戶來說，這種體驗是經過修飾和可預測的，這增加了用戶對品牌的信任和喜愛。
無論有多少個設計師在協同合作，現在都有一個一致的間距規范，決策成本將大大降低。設計師可以輕松地從另一個設計師停止的地方開始設計，或者輕松地并行構建。我們定義下規范可以及時和開發同學溝通，因此可以為工程師節省時間。
5. 基線網格（Baseline Grid）
基線網格由密集的水平行組成，這些行提供文本的對齊和間距準則，類似于您在直紋紙上書寫的方式。在下面的示例中，每 8px 行在紅色和白色之間交替。
△ 基線網格
提示：將所有行高設置為基本單位（8x 或 4px）的增量非常重要，這樣您的文本才能與基線網格完美對齊。
△ 字體行高
1. 什么是響應式？
設計師需要通過設計讓內容在不同的平臺上體驗最大化，確保讓用戶在任何一個屏幕上看到內容的時候，會覺得這些內容就是為這個平臺而設計的，而不是單純的縮放而來。這種無縫的體驗，才是跨屏幕設計的真正難點所在。想要制定一套針對不同設備和屏幕的設計方案，你需要一整套的策略。用戶體驗同時包含了性能、交互、效率等多方面內容，也就是說，對于一個線上的響應式頁面，我們不僅要關注視覺上看到的，也要關注我們操作、使用時的感受，這些綜合因素最終影響著用戶使用時的效率與體驗。
2. 響應式設計的核心步驟
確保核心的用戶體驗
雖然用戶體驗是無處不在的，但是對于特定產品，最核心的體驗是存在的。產品通常是用來解決用戶所面臨的特定問題的，它的這一特質讓產品變得有意義。關鍵的內容和關鍵的功能的組合，通常構成了產品的核心用戶體驗。如果你并沒有想明白這個問題，不妨問問自己：用戶需要完成哪些最常見/最重要的任務？找到問題的答案之后，你的產品就應當從各個方面、各個渠道，完整而全面地支撐這些功能，幫助用戶完成這些任務。舉個例子，Uber 的核心用戶體驗是隨時隨地叫車，無論設備的屏幕大小如何，你進行的設計全部都應該圍繞著這個需求和功能來進行。叫車是 Uber 的核心功能，即使使用 Apple Watch 這種極小的屏幕尺寸都應該順利地完成這個任務。
敲定你的產品所覆蓋的設備類型
現在的移動端設備屏幕尺寸各不相同，單獨為某一個設備設計內容無疑是不現實的。根據你的產品覆蓋人群、受眾分類、使用場景，綜合考慮你的內容會優先呈現在哪些設備和平臺上，然后有意識地篩選出常見的設備類型：手機，平板，桌面端，智能電視，智能手表……
不同的設備組合通常是基于不同的場景、需求和服務來構成的，用戶會針對不同的屏幕進行不同模式的交互，甚至處理的內容也會有差異。比如說，在手機上，用戶更加傾向于使用輕量級的任務，并且進行一定量的溝通和交流。在平板上，用戶行為更多集中在內容消費上，并且目前平板的使用量被認為在逐步降低。桌面端依然是用戶完成較為專業、復雜任務的首選平臺，足以應付復雜多樣的內容。了解各種設備類型和使用場景是用來構建用戶體驗的關鍵。
針對不同內容來匹配用戶體驗
并非所有的內容都符合不同設備的使用場景，比如智能手表就不適合展示大量的文本內容。你的產品所覆蓋的設備組當中，每種設備的使用場景不同，應該匹配的用戶體驗也不一樣。移動端用戶和桌面端用戶的需求就是不同的，場景差異也很大。以 Evernote 為例，它可以在多種不同類型的設備之間同步和切換，其桌面端版本就針對用戶的內容需求進行了優化：Evernote 的桌面端應用程序針對閱讀性的內容和多媒體進行了優化，而移動端的 Evernote 則強化了拍攝記錄、圖片和音頻記錄的功能：其次，不同的設備屏幕具備不同的輸入方式，設計師如果忽略輸入方式上的獨特性，也常常會出現許多問題，這里就不擴展開來了。
優先為最小的屏幕做設計
一直以來，設計師都習慣從最大的屏幕著手設計，最后考慮最小的屏幕上的顯示效果，這意味著絕大多數的設計都是從桌面端開始設計的，通常桌面端的內容和功能更全面。當桌面端的整體設計完成之后，再推進到其他設備端的設計。然而，在進行桌面端設計的時候，我們常常會遭遇「廚房水槽」困境：由于產品通常會牽涉到多個利益相關方，許多多余的功能會被加入進來。而實踐經驗表明，移動端優先的設計往往能夠更好的專注于核心功能，更適合作為產品設計的起點。當你優先設計最小屏幕所需要的界面的時候，這種局面會強制你從最關鍵最重要的地方開始設計。這也是之前設計圈和產品開發領域一直所強調的「移動端優先」的策略的由來。在此之后，再進行平板、桌面和電視端的設計，就是一個自然地做加法的過程了。在絕大多數的案例當中，最小屏幕通常是手機屏幕。
測試你的設計
產品的測試環境并不一定都得是在現實世界中尋找，但是在盡可能讓真實的用戶來做可用性測試，并且在產品發布之前解決所有的用戶體驗上的問題。
3. 為何要利用柵格系統來進行響應式設計?
響應式可以響應的前提有兩點：1、頁面布局具有規律性、2、元素寬高可用百分比代替固定數值，而這兩點正是柵格系統本身就具有的典型特點，所以利用柵格系統進行響應式的設計是順理成章的，也比較快捷，所以響應式與柵格化天生一對好搭檔。
第1步：確定列的數量
第一階段先不要限制自己的列數。首先，創建一個低保真或高保真的原型。設計一些基本元素和用戶流程。在此之后，就開始設計最優的列數和大小。如果在項目開始設計之后不得不改變我們的柵格系統，不要有負擔，我們需要有一些試錯的空間。
我們在設計頁面時，用到最多的布局方式就是等分布局，即頁面內容區域被 N 等分，每一份的寬度則根據屏幕寬度自適應調整。那么就從這個角度出發，思考一下頁面的網格應該設置為多少列，才能的滿足各種等分布局的需要。與 web 類似，移動端最方便的網格之一是 12 列網格。這個網格將允許我們在一行中同時放置偶數和奇數個元素。
對于移動端來說，12 列網格的缺點是一個列的寬度太小，你可能很少創建一個列寬度的元素。如果你選擇 2、4 或 8 列網格，請記住在一行中放置奇數個元素可能會出現的問題。
Pro-Tip：
界面設計通常包含數百個不同的頁面，因此，一個網格可能不適合所有的頁面。如果需要，創建額外的柵格系統，但不要忘記設計的一致性。網格系統的一致性：相同的布局邊距、列之間相等或成比例的水槽，以及更改列本身的寬度時其他模塊也需要保持相同的比例。
第2步：定義水槽和邊距
首先，讓我們先翻閱目標屏幕的設計 Guideline，以找出通常頁面邊距（Side Margins）。目前，Android 和 iOs 的最小推薦布局邊距為 16pt。web 端則依照屏幕尺寸不同而不同。這意味著，如果你希望遵循系統指南，則頁面邊距不應小于 16pt。（但可以更大的）
在選擇 12 列網格時，列之間的水槽不應該太大，因為由于列的寬度小和它們之間的大寬度的水槽，列將在視覺上產生分裂的感覺。同時我建議你選擇與8pt 間距系統成比例的水槽大小。所以布局的水平和垂直節奏會相互重疊。水槽與頁面邊距成比例。那么網格更加一致，也將允許我們輕松地在其中放置特殊元素，如輪播（carousel）。
第3步：定義 8pt間距系統
了幫助不同設計能力的設計者們在界面布局上的一致性和韻律感，統一設計到開發的布局語言，減少還原損耗。在大量的實踐中，我們提取了一組可以用于 UI 布局空間決策的數組，他們都保持了 8 倍數的原則、具備動態的韻律感。經過驗證，可以在一定程度上幫助我們更快更好地實現布局空間上的設計決策。定義網格系統方法很多，如運用 8 點網格系統、斐波那契數列、某最小原子單位的增量、從底層系統參數化定義間距等，我們以最小原子單位的增量為例去定義網格系統。最小單元格的數值選擇需要從兩方面考慮：
在適用性方面，4、6、8、10 這四個數值都是基本可以滿足的，在靈活性方面，4px 表現最佳，但是頁面就會被分割的非常細碎，在設計時比較難于把控。因此我們需要根據 APP 的實際情況選擇合適的數值，4px 或 6px 單元格比較適合頁面內容信息較多，布局排版比較復雜的產品。而 8px 單元格對一般的設計場景都可以很好的滿足，比較適合大多數的 項目，因此是比較推薦使用的。
那么假設我們以 8 為基準的去延展系統間距，得到如下間距系統：
1、2、8、16、24、32、40、48、56、64、72、80、88、96、192 等，這里都是 8 的倍數或能被 8 整除
但是目前間距數量太多，過于細碎也會導致間距比較亂，所以我們繼續優化梳理（以 6 為基準，前面個數是后面個數的 2 倍遞增），得到以下間距系統：
1、2、8、16、24、32、48、64、80、96
第4步：sketch布局設置
利用 sketch 的布局設置功能，即可快速搭建出網格系統的參考布局，在平時做設計的過程中，可以經常使用 Ctrl+L 快捷鍵切換布局的顯示，提高設計效率。
我們來解釋一下這些設置分別是什么：
在傳統的柵格化系統設計中，列的寬度和水槽的寬度是保持不變的，只是列的「數量」發生變化。為什么要這么處理呢？這是為了讓設計更簡單。如果一組三張卡片分別放在桌面的四列上，那么在平板電腦上，會顯示兩張卡片，并把第三張卡片進行折行顯示在第二行上。不需要做任何的調整，因為已經知道它位于第四列上了。在手機上，答案也很簡單，只需要一張卡片，其他的就會自動堆到下面的行中。但是目前我有更多的響應策略，例如當視窗（Viewport）發生變化時，內容區域的元素如何去響應，具體到我們當前的柵格系統，就是 Columns、Gutters、Margins 以及由 Columns 跟 Gutter 組成的盒子（BOX）四者的值（主要是寬度）如何變化，以及在這種變化之下我們頁面的布局如何調整。
1. 固定柵格或是斷點系統（Fixed boxes or breakpoint system）
固定網格，列寬和水槽寬不會改變，只是改變列的數目，當窗口縮放時，排版布局不會發生任何改變，只有當達到一個臨界值（開發那邊設置好的固定的值），界面才會發生改變。在此之前界面排版都是不變的，就像一部分被切掉了。
如果開發那邊寫了一個固定柵格，當你從桌面縮小到平板電腦，就像是在桌面的瀏覽器寬度時，你不會看到任何變化，設計就像是被剪掉了一樣。但當達到平板屏幕尺寸臨界點時，設計布局馬上就會改變，平板電腦上的顯示效果就會好起來。如果繼續減小這個值，同樣的事情也會發生，在到達另一個臨界值之前，設計看起來都是不變的。下面是常見的斷點系統（Breakpoint System）
如圖，響應式是以視窗的最小寬度作為基本依據來制定每種寬度下 Columns、Gutters、與 Margins 的響應策略，也就是說 Viewport Min-width 是做出響應的觸發條件，視窗每達到一個最小寬度，就會觸發該寬度下預設的頁面布局方式，而每種布局都是在該寬度下的最佳布局，也是因此，響應式才會在各種復雜分辨率條件下都能給用戶比較好的體驗。
每個視窗寬度的最小值是觸發響應的關鍵值，因此我們給這些用于觸發的關鍵值起了個名字叫「Breakpoint」，每個 Breakpoint 觸發一種響應策略。
2. 流動柵格（Fluid Grid）
流動柵格系統是編輯內容，儀表板，圖像，視頻，數據可視化等理想的響應策略。當窗口縮小時，內容將動態地發生變化，文本會進行換行，元素也會變窄。然而，這些元素在內容寬度縮小到下一個臨界值之前，布局是不會變化的。在各種情況下，對用戶來說，擴展內容的大小比擴展可見內容的數量更有用。
所以我想說的是，斷點 BreakPoint 只是一個更改布局的參考點。這就是為什么列寬和水槽的數量不會改變的原因，因為我們想讓設計師在考慮布局時能夠更容易地創建一致性。內容寬度會隨著窗口的縮放而發生改變，例如圖片會縮小，文本會換行。水槽的寬度不一定是固定的，可以隨著頁面寬度變化。
在每個斷點處，列計數是固定的，列寬度是最小網格 8PT 的倍數。行高是列大小的倍數，遵循推薦的縱橫比。邊距和填充是小單位的固定倍數。在斷點之間，實際列寬是網格區域的百分比，而不是一個小的單位倍數。內容尺度流暢。
首先從所以屏幕大小中選擇一個基本尺寸，然后按照推薦的縱橫比以基本大小的倍數構建每個響應式尺寸。當每個塊使用相同基礎大小的倍數時，就會出現網格。遵循此方法可確保柵格系統一致性，甚至跨產品的一致性。
3. 混合柵格（Hybrid Boxes）
在實際項目中，使用流動網格和固定網格的組合也是常見的做法。網站通常是流動網格，因為它要去適應各種不同終端的大小。后臺系統設計、工具型的界面設計就比較經常使用網格和流動網格組合的形式。例如的后臺管理系統（dashboard）側邊欄是固定網格，右側內容是流動網格?；旌蠔鸥裨诿總€維度上有不同的縮放規則，所以它們不使用統一的縮放比。當用戶需要調整瀏覽器的大小以使內容在一個維度上伸縮而在另一個維度上不伸縮時，便使用混合網格。
1. 靈活面板（Flexible panels）
靈活的面板允許折疊和擴展狀態。面板的展開狀態為固定寬度，用戶無法調節。當用戶將鼠標懸停在折疊的面板上時，面板就會展開。當靈活的面板擴展時，它們要么壓縮內容和網格，要么將內容推到瀏覽器邊緣之外。
2. 固定面板（Fixed panels）
固定面板保持靜態寬度，不能折疊，也存在于響應網格之外。
3. 懸浮面板（Floating panels）
此面板樣式漂浮在主要內容區域之上，不影響響應網格。浮動面板將任何 UI 元素隱藏在其下方，用戶必須將其移除。內聯菜單、下拉菜單和工具提示也是浮動的。
寫這篇文章的目的是想提供一些關于如何在響應式設計中使用柵格系統，我知道對于我自己來說，我花了很多時間理解網格是如何工作的。我在 YouYube 上看了很多視頻，也閱讀了大量的文章，但每個人都在關注它為什么重要，卻不去注重到底怎么在自己的項目中使用這些原則。
你要做的最好的事情就是從現在開始注意那些優秀設計是如何對齊元素的，你將會開始閱讀這些設計系統。為了幫助理解，這里有一些設計系統概述了它們的網格使用：
在完全理解了網格的工作原理之后，你將成為了一名更好的設計師，因為你知道了你的設計將如何在臨界值之間進行轉換。你也可以落地你的設計，使它們能夠達到像素級完美。這樣的規范帶來了更一致，更簡潔的設計，當用戶從一個界面到另一個界面流轉時，這真的提升了產品的檔次。我建議在你的設計中去應用這些網格，并和開發同學一起，以實踐的方式將它們落地，這將會是一個非常不錯的進步。
文章來源：優設 作者：IvanZheng
有時候做國風的設計作品，如果選擇黑體和宋體可能太過端正，但選擇書法字體的話，可能因為飛白或過度連筆導致字體不容易識別，那選什么字體呢？我建議大家選擇楷體，注意不是選系統自帶的楷體，而是今天推薦的演示悠然小楷，字體手稿由一位美麗女生書寫，其字體有著悠然自得、閑情逸致的氣質。
「演示悠然小楷」是由 keynote 研究所 x 秋葉 PPT 聯合發布的一款免費商用字體，推薦設計師們收藏或下載。下載地址見文末。
1. 青春/知識
△ By@偉崇
2. 文學/歷史
△ By@偉崇
3. 游戲/小說
△ By@小敏
4. 中式地產
△ By@偉崇
5. 商務風
△ By@偉崇
8. 主視覺設計
△ By@畫生
△ By@畫生
9. 海報物料
△ By@畫生
△ By@畫生
△ By@畫生
10. 電商廣告
△ By@畫生
△ By@畫生
△ By@畫生
11.文字排版
△ By@畫生
△ By@畫生
12. 品牌形象設計延展
△ By@畫生
△ By@畫生
△ By@畫生
1. 思源宋體
△ By@澄音
2. 方正宋刻本秀楷
清刻本悅宋用得多了，不如試試這款有些相似但又有不同的「方正宋刻本秀楷」，較之前者字形更為周正，筆畫更為果決，娟秀之中蘊藏力量。
△ By@畫生
3. Garamond
Garamond 是一款古樸傳統的襯線字體，在西文體系中歷史悠久，恰因沒有特殊的個性而被廣泛使用，是老式襯線體中最具代表性的字體，與同樣以端正工整為名的楷書作搭，最能相互映襯。
△ By@畫生
4. 阿里巴巴普惠體
基礎黑體的字體沒有復雜的修飾，進一步弱化次要信息，強烈對比下讓主角得以更好的突顯，也讓畫面層次感更加豐富，而基礎型的黑體，必然首推阿里巴巴普惠體。
△ By@畫生
下載地址：https://pan.baidu.com/s/1ohOK2RSEA9vsfHAbfvpZmw 提取碼：ypae
通過一些案例進行比較與實驗，探索如何將 UI 深色模式設計得更好。
iOS 作為 UI/UE 設計的風向標，一直是行業的引領者，不管你愿不愿意承不承認，他的每一次更新變化總能帶動 UI 設計行業的一些大大小小的變革，并且產生更多的追隨者，比如當年的 iOS7 開始的扁平化設計風格，對后續設計風格的影響直到現在已經 7 年了。
在最近半年，iOS 在 UI 設計風格上最大的變革莫過于 DarkMode（深色模式），在 DarkMode 之前，我們熟悉的 UI 界面往往都是淺白色界面為主，而從 iOS13 開始正式使用了 DarkMode，界面突然可以變深色了，蘋果官方說這樣設計可以讓眼睛更舒服地長時間閱讀，為革命保護視力，而且更加省電增長續航，具體結果我們不得而知，需要科學家們去驗證了，但是對于我們設計師來說帶來的挑戰就是要「黑白無?！沽?。
其實 DarkMode 從測試版算起已經差不多推出了有半年的時間了，一些知名的 APP 產品早已經有了自己的兼容方案，同時 iOS 原生界面也給了我們很多最佳實踐案例，按道理大家對于 DarkMode 的設計方式方法應該已經掌握了差不多了，但直到這幾天微信正式推出了自己的 DarkMode 兼容方案，才發現對 DarkMode 的探索還需要設計師們多多努力。謹以此文表達一下自己的觀點，不妥之處敬請海涵。
列表視圖（TableView）是 iOS 中最常見的界面組件，一般常見于設置與欄目列表頁面：
iOS 設置界面的淺色模式和深色模式看起來都非常協調。
下面我們看看微信發現頁面，這個頁面和 iOS 設置是很相似的。
如果單獨看微信發現頁面的淺色模式實際效果還是不錯的。
但是直接轉換到深色模式下就感覺突然差的很多了，甚至可以說是有點難看，這次微信真的做了一次黑天鵝？
到底是什么原因讓微信發現頁面在深色模式下視覺體驗如此之差呢？
我們不妨將兩個功能布局都相似的深色進行放在一起進行一下比較：
組成色彩分析：
在色彩這塊在這兩個頁面中微信和 iOS 基本保持一致，四層灰度設計能更好的保持頁面整體干凈整潔且層次分明，但是在 A 背景色上，微信的背景色選擇了黑色偏綠的顏色，應該是微信設計師還是想體現出產品的標志色原色。
文字的顏色也較 iOS 略微深一點，但是在整體上影響并不大。
看來在主要色彩上并沒有什么問題，那么為什么微信這個界面與 iOS 界面比起來視覺上要感覺差一些呢？
下面來看一下圖標
圖標設計分析：
圖標上的差別主要在于線寬與外框，微信采用無外框統一線寬的線形圖標，iOS 采用的是有外框剪影圖標。
我們我們把圖標進行互換會怎么樣呢？
觀察到了嗎？別看錯了！
是的，我故意把位置做了對調，左邊是 iOS，右邊是微信。替換圖標后的微信明顯加分不少，整個界面都整齊多了，而 iOS 換了圖標后明顯變得不夠整齊了，潦草很多。
那么結論是微信的無框線性圖標在深色模式下兼容有問題？是的，的確如此。但是等一下，還有一些細節你注意到嗎？換了圖標的微信界面和之前的 iOS 界面比起來明顯還是有點不夠整齊，為什么呢 ？
我們回過頭來從細節再看一下 iOS 界面。
我們按照這個思路把剛才微信替換圖標界面再排序一下！
△ 界面視覺體驗明顯整齊了很多是不是！
疑問：
為什么細線圖標和無框圖標會在深色背景表現不夠好，而在淺色背景下就沒問題呢？
是不是所有的 UI 都會存在這樣的問題呢？
我們再來看一些例子：
看來結論是一樣的，線性圖標在深色背景下的表現都是差強人意，反觀帶框圖標適應性很強，淺色和深色模式下均能良好的適配，我來分析一下原因。
當年伽利略用望遠鏡往天上看，發現木星比金星大，換成肉眼看后金星則比木星大。他認為是眼睛的某種視覺特性造成了這種現象。
德國物理學家赫爾曼把這種錯覺稱為輻照錯覺，就是說在黑暗背景下，亮度越高的物體看起來面積越大。
再來看一張圖片
哪個圓圈看起來更大，顯然是黑色背景下的白色圓形，實際上這只是一種錯覺，所有圓圈是一樣大。
光亮刺激會使得神經元產生非線性放大作用，導致刺激比實物本身看起來更大，白色圓形更亮，所以看起來更大一些。
線性圖標是用線條勾畫圖案達到隱喻效果，一般線粗是 2px~6px 像素。
設計師在設計時都是以最終視覺作為參考，而設計稿本身多是淺色背景，所以在淺色背景的映襯下圖標視覺會顯得稍大，視覺基本是平衡的，假如設計是 4px 而呈現出的效果其實是 6px 左右。
是不是覺得哪里有點不對了？按照這個邏輯黑色背景下白色線圖標不應該是視覺更大、更明顯嗎？
我們還需要考慮一個因素，那就是色彩，之前的幾個界面案例的線性圖標都是彩色的，特別是黑色背景下，不同色彩的圖標放在一起，會有明顯的忽大忽小的感覺，會讓界面感覺非常凌亂。
是不是感覺黃色最大，紅色的最??？但是其實是一樣的，這還是相同形狀的，要是圖標形狀不同感受會更明顯。
看一個實際中的例子：
由于都是單色線性圖標，在淺色和深色下表現還都不錯的，但是單色圖標略顯界面單調，并不太建議這么設計。
毫無疑問，未來的 UI 場景需要適配多背景色風格，圖標除了具備好看隱喻之外，更需要具備抗干擾性。
帶框圖標是一個不錯的解決方法，大膽預測帶框圖標會將成為未來一段時間圖標設計主流！
本文來和大家討論數值框架提取與數據分析運用是怎么相輔相成來推動游戲化項目，幫助設計團隊提升設計專業性和展示產品思維的。分為 2 大塊：如何在設計中平衡效益、如何衡量設計價值。下面會從這 2 個游戲項目：獨立小游戲《嘛哩嘛哩汪》、會員游戲《天天加速》來剖析。
要了解這件事，首先需要簡單介紹下什么是數值，在游戲公司里有個職位叫數值策劃，他是解決游戲里數值平衡和經濟平衡的。在這里，我們不用專業術語，我們的也沒游戲公司的那么難。我總結一下電商里容易理解運用的，就是這么一條公式：
下面講的時候大家可以用這個思路（文中都叫數值框架）來理解并試試能不能運用。
1. 快速理解游戲的玩法（數值框架的運用）
舉個例子，我們之前做的獨立小游戲《嘛哩嘛哩汪》，用戶可以領到一只同樣的小土狗，通過不同的社交玩法：比如戰斗，發送偷偷告白的小紙條等等，最終把自己的狗狗變成一只的萌寵換裝養成游戲。
它的主要功能模塊有采金（收金幣）、對戰、魔法屋（換裝）。
有貨幣系統（金幣、鉆石、氪金）、等級系統（階級經驗值）、任務系統、道具系統（商店、背包）、社交系統（打 call、好友、消息）等。
這樣乍一看，是不是覺得有點復雜？其實只要抓住關鍵流向節點，比如主要貨幣金幣、成長體系的經驗值，這種流入流出最頻繁的地方就是關鍵流向節點，再把游戲主要功能系統串起來，主要功能就是關鍵流向節點流向最多的地方。這樣串聯起來就非常簡潔明了，一眼就知道這個游戲怎么玩（如下圖），通過采金、pk（主要功能）得到金幣（關鍵流向節點），可以用來購買新裝備去換裝（主要功能），但需要靠做任務（社交、互動）去提升經驗值（關鍵流向節點），才能不斷解鎖新裝備，養成一只的狗仔。
當提取了最簡單的框架后，再去細分支線數值，會清晰很多，最后細化的數值從系統的組成和期望去架構數值表和體系：如何實現、從哪里獲取數據、如何方便又泛用化表格、精簡配置、去除冗余數據等；大白話就是解決比如：升階太慢，要調整；金幣太快，裝備很快買完了，玩不下去了，要調整；用戶可操作太少了，要調整；裝備售價多少金幣，多少鉆石適合？道具使用時長多久？任務成就獎勵怎么設定，要送用戶什么？等等這些問題…….
而這些在項目后續可能會困擾的問題其實在初期設計的時候就可以先規劃，照顧到。
2. 數值框架在其他項目中的運用
這樣的思路也很適合分析運營活動，快速抓住別人玩法中最吸引用戶的點，包括自己設計的時候也可以在前期就自我評估項目成本。大家可以拿淘金幣和疊貓貓用這個思路試試看，這邊是比較早期的分析，淘寶的迭代太快了。
先看看 19 年 6 月前的淘金幣，已經有在大促的時候開墾土地，我們不說視覺，先來分析下它的布局思路。
用公式代入看看，業務的訴求植入在領水滴任務中，關鍵流向節點是水滴和金幣，節點流向最多是種地（圖中種子，這里講功能），投金幣。非常清晰的框架。而且棒的是大促期間只需要復用同一套框架變成種寶貝，這對多方來說效益是高的。我們可以看到現在很多都在做這個模式，也就是把框架工具化了，換皮不換骨。19 年雙十一的全民開喵鋪幾乎把它套用到所有的阿里旗下產品，（下方圖左）底部的任務入口（領喵幣）和輔線內容（領組隊紅包）均根據產品來配置，設計的時候規劃得很清晰。（下方圖右）當養成思路之后在活動剛出體驗的時候就可以分析它的設計框架意圖，無需過度依賴網上分析也能知道它好在哪，自己設計的時候也會有好的借鑒。
那在做游戲化產品的時候，里面就有很多東西需要考量植入業務訴求后的平衡了，但游戲玩法肯定是相對簡單些的。
3. 理解業務訴求和游戲玩法關系
拿游戲化產品-會員游戲《天天加速》舉個例子。
天天加速是一款宇宙救援世界觀的游戲，以加速為核心玩法。把產品的各項目標植入到加速的道具中，用戶如需獲得道具需要完成產品目標，獲得獎勵，從而實現雙贏。
拿主線來說，如下圖展示我們植入業務訴求的時候，按那條公式思路來思考，業務層級越高（越難做，比如購買），游戲中設定層級越低（不強推），但游戲和現實中反饋都越多/強，去激勵用戶做重任務。這樣簡單羅列，就可以讓雙方同學都容易理解，并提前規劃后臺配置和配置的數值建議，給運營同學留出后續自運營配置的空間。
副線射擊游戲也是，按照這種思路，把成本均衡到，幾乎相同的玩法，不同的配置成本差別是很大的，下表是對玩法影響最小的，這些產出比都會影響業務方是否為你的功能玩法買單。
當建立了數值框架后，對后續上線的數據分析和推導下一步的迭代有很好的指導作用，因為你清楚知道數據的用戶操作行為、可以知道用戶是怎么流失的，再綜合客戶的投訴建議，用研同學的調研，可以較全面的整合處理。
這里還是拿游戲化產品-會員游戲《天天加速》舉個例子。主要從以下3個方面，通過《會員游戲-天天加速》這個項目不同版本迭代來講。（具體數據均不能透露）。
前面已經介紹過游戲是怎么玩的，這里直接講 1.0 數據結論：在上線 7 天的時候就超額完成 kpi 了，其中 pv 是 kpi 預期 2.5 倍，任務完成率是 kpi 3 倍，近 90% 的用戶都來打卡簽到。超出我們預期挺多的。
但是數據好=我們的價值么？這也是我們從開始做就很想驗證的，我們來看看方式。
建立數據體系、量化設計指標
在前期就和業務方達成共識，把他們的 kpi 指標任務活躍和用戶上行，拆解成了游戲中的具體指標。再根據指標，對應到游戲中用戶完成操作的行為流程，便可對應 kpi 的數據埋點。
最后，等埋點數據出來了，再用工具具體分析。流程可以看下圖~
每周根據數據，發現規律、解決問題
具體的分析，我給大家舉個例，這里是各個 kpi 數據的長線跟蹤，一個點的數據是說明不了問題的，重點在怎么去維持和提高。第一張圖可以看到，項目上線后，uv、pv 穩定上升，但在第 6 周開始回落，我們需要敏感地察覺，并且進行分析，作出反應。當我們快速調整上線 2.0 的時候，在第 11 周數據又開始回漲。
所以需要我們對數據敏感，有解讀能力，和對項目的深刻理解。不然數據就只是數據，結論可能是因人而異的，當然有現成后臺直接看數據結論最好，但沒有的時候也得能處理，野外求生技能還是得有的。
構建合適的數據分析框架
我把如何分析數據的全流程復制下來，每周都會把收集的數據進行梳理，按照流程把各 kpi 的數據梳理一遍，發現問題就去溝通解決推動。這樣也保證項目數據能持續穩定地增長。
其實做到這一步，我們已經是項目密不可分的一部分了，誰又能否定我們的價值呢。
那數據分析除了能驗證設計的價值，還能做什么？
我們再來詳細說說，是如何通過分析數據指標提升游戲體驗的。我們按版本迭代來看看。
首先，我們可以把數據分成兩個層面去看：用戶操作數據和產品目標達成數據，業務方更多關注的肯定是產品目標的達成數據，那我們就多分析用戶操作數據，2 邊匯集，能更好地推動項目。
我們舉些例子～
剛說了數據需要長線跟蹤，需要發現變化規律，那如圖，到了第 7 周，發現數據開始回落，但依舊超過了 kpi。我們去梳理原因，最大的原因是游戲 1.0 只上線了最簡單的核心玩法，用戶回訪多，但沒有太多可操作的內容，久而久之，回訪自然會下降，所以我馬上拉著產品討論穩住 pv 的方案，同時還滿足產品新訴求，植入發放優惠券，并且需要快速上線。這就是 2.0 版穩住 pv 的方案，事件系統，就是畫面一中，右下角的小信封。用戶每次回訪，都有事件系統可操作，系統里會根據問答隨機給到優惠券或者游戲道具。保證用戶每次回訪都有事可做，有利可圖。
的確上線后數據開始回漲，也是首次破 8，數據是暫時穩定了，但是我們也明白這個版本下用戶沒有長線留存的理由。我們必須給用戶帶來積累感和晉升感，才能讓用戶對自己的付出有感知。于是我馬上策劃和實現了長線粘性的新增玩法，讓用戶除開機械的事件操作，還有主動的互動操作。
在圖一主頁面的左下角，有了一個尋寶行動的入口，是個射擊游戲，用戶可以通過擊落隕石獲得高分開寶箱，得到更多用于飛船升級的核能源，積累越多可以換取越高階的飛船，對應更豐厚的獎品，因此長線的留存在游戲中。
前兩點，我都在不斷地去幫助產品達成目標。那我們是不是可以再去拓寬設計的邊界，提升產品的目標呢？
當我們上線 1 個多月時，得到了向好的業務數據，但是我們知道，這是基于用戶的基數大，11% 的轉化已經可以帶來這么大的訂單額，如果我們能撬動另外 90% 的用戶呢？因此我去分析了游戲用戶，發現對促銷敏感度高的用戶，不管是在全量用戶還是核心用戶中，都超過 70%，是相當明確的用戶類型。
于是有了這三者的考慮：
優化轉化目標、尋找合作可能性更高的業務方向、結合我們核心用戶的促銷敏感度高的特點，也去挖掘了一些方向?？紤]產品運營成本實現的方式去出了 2 個方案，
第一個方案：轉化入口的優化。
用戶要得到蟲洞道具，需要去購買商品。業務訴求有發券的 kpi，那在購買同時配合得到類目優惠券，這樣就能大大的提升用戶的購買訴求。
第二個方案：植入事件系統
系統事件，之前是只有送優惠券的功能，現在加入跨品類低價商品的推送+對應優惠券的功能，再次打游戲用戶對價格敏感的痛點，目標是提升兩者的轉化。
當然業務有更多深入的考量，我們既然有一些想法能共同推進項目，那就多多溝通交流。
那到這里，文章終于要結束了，通篇其實是在通過實際的項目告訴大家數據框架（開篇那條公式思路）和數據分析能怎么貫穿整個項目，怎么去平衡各方成本，相輔相成地去推動項目、驗證設計價值的。
最后一點小體會，在做這 2 類項目中，我最深刻的感受是獨立小游戲里游戲內容是絕對主角，難點在沒接觸過的游戲引擎技術的攻克和數值的實現打通（游戲資質和法務問題也很麻煩），而游戲化產品里業務訴求和游戲化的包裝是雙主角，難的是兩者的緊密結合和推動落地。第二種在策劃的時候很容易把玩游戲當成主題，但電商公司做游戲化最主要是想讓用戶多回訪，在平臺購物，帶來商業效益。因此，前期都比較閹割，需要看到它為業務帶來實際效益，才有后續的為「趣味性」買單的資源研發投入，這個「游戲」的取舍其實挺難過的。
文章來源：優設 作者：JellyDesign
網師分層對平臺的重要性不言而喻，諸如阿里這類的電商平臺都有完善的商家分級體系，明確了不同等級的權益和運營策略。
2019 年底 CCtalk 平臺的網師數量達到了一定規模，平臺的基礎能力建設也相對完善，因此網師分層的事宜被提上日程。此前我們評估網師的方式是按照流水，將網師分為普通網師、中部網師和大 V 網師 3 類，不同網師對產品功能需求及運營要求差別很大。這種粗略的劃分方式可以幫助簡單評估網師，但并沒有產品化，而且只有單一的 GMV 維度，不夠全面客觀。有些客單價較低的網師也有大量的購課學生，他們對平臺的價值也高。因而我們需要推出一套綜合網師流水、招生數量、內容質量等多個維度的方法來進行分層運營。
面對以上問題，相應的解決方案是：
既然是涉及全平臺網師的重大升級調整，當然要從全局的角度來進行價值分析。我在這個項目中探索了用于多角色價值分析的「三維價值分析法」，從整個關系鏈的角度來解析網師分層對網師和平臺的價值。
Step1.列出相關利益者
分別包括：CCtalk平臺、網師、學生。
△ 列出相關利益者
Step2.設定中心點并建立關系
分析連接這3種角色的關鍵點是什么。我們CCtalk作為一個在線教育平臺，最核心的因素是內容，因而將中心點設定為「內容」。（注意，如果此時是做某個具體功能相關的項目，那么中心點可以是這個具體的功能，例如「作業」或「直播」）設定中心點后，建立不同角色和中心點之間的雙向關系。
△ 設定中心點并建立關系
Step3.進行全局價值分析
在上一步的關系網的基礎上，用圓弧連接相鄰角色的價值走向關系，從全局的角度進行不同角色間的價值分析。
△ 進行全局價值分析
從上面的三維圖中可以看出網師分層對于平臺和網師的價值。
對網師來說，有助于：了解成長路徑，獲得更多產品運營支持，獲取更多功能權益。
對平臺來說，可以：篩選網師，激勵網師自驅動，增加收入。另外，還有一些間接的價值，包括通過督促網師生產高質量的內容來提升平臺的價值，通過督促網師積極招生來擴大用戶規模。
△ 網師分層對于平臺和網師的價值
剛接到需求時，我內心的 OS 是：大項目！概念大，范圍廣，都有點不知從哪里入手。
冷靜下來分析，網師分層本質是一套針對商戶端的激勵體系。從下往上拆解：由底層商戶活躍度來計算經驗值，根據經驗值劃分商戶等級，并賦予不同等級不同的權益，權益包括教學核心功能：直播時長，素材存儲空間，課程人數等。再向上衍生到不同權益對應的使用場景，以及權益的擴展方式。
△ 分層拆解
從設計層面，分為信息展示和場景觸達兩部分。這么一看，其實又挺簡單。
由于項目涉及的底層邏輯多，時間周期跨度大，因此拆分成 3個小版本來實現：商戶權益改造，經驗值等級底層 & 商戶等級外顯。前期的功能實現后，先預埋在版本中。等到經驗等級上線時統一發布。其中經驗值等級底層項目是純技術，不涉及設計。
所以下面將從功能權益分層和等級經驗值外顯兩部分來講解具體的設計過程。
功能權益分層是權益的使用層面，包括多場景觸達和引導購買增量包。設計時分為場景梳理→設計要點→細化直播場景→具體設計這 4 步來實施。
Step A.場景梳理
拆解權益的生命周期，可分為三個階段：充足可用，即將不足，已用盡。而功能的使用場景——直播，也分為三個階段：直播前，直播中，直播后。
Step B.設計要點
將權益生命周期和直播場景結合進行交叉分析，列出設計要點和具體的設計拆解。
△ 不同階段的設計要點及拆解
Step C.細化直播場景
發起直播的入口很多，除了「立即直播」的主場景之外，還有由預告進入直播的 3 種場景，如果在每個入口都做功能禁用判斷的話，不僅邏輯會很復雜，開發實現起來成本也比較大。
于是將直播前的流程細化，發現「直播檢測」是進入直播間的必經環節，因此將功能禁用的判斷節點縮減為 2 處：「立即直播」&「直播檢測」。
△ 細化直播場景
Step D.具體設計
有了前期的分析后，具體設計環節就相對容易了。下面以點擊「立即直播」時的功能余量判斷為例。
點擊「立即直播」按鈕，在按鈕原有的邏輯上加上新的判斷邏輯，此處要注意寫清楚他們之間的優先級關系。如果在不了解背景的情況下，很可能就直接寫點擊按鈕進行可用直播時長的判斷，那需求宣講的時候開發就會問你，和原來按鈕上的邏輯是什么關系呢，此時就會一陣緊張。
△ 立即直播時判斷剩余可用直播時長
等級經驗值屬于展示層。對網師用戶來說，最重要的是了解自己當前處于哪個等級以及相應的權益有哪些。對平臺來說，除了明確每個等級及相應的權益，重要的是要引導網師升級，以激發他們的自驅力。
由此推導出相應的設計方法：錨定目標、降低門檻和利益點吸引。
△ 設計方法
在設計方法的指導下進行落地，分為網師后臺首頁的展示，以及等級詳情頁的設計兩部分。
網師后臺首頁-個人信息模塊的展示
由于等級和權益掛鉤，涉及網師切身利益，因而在網師后臺首頁的個人信息模塊，增加當前的經驗值和相應等級的展示。同時，通過利益點吸引等方式，引導網師向下一個等級努力。
△ 個人信息模塊展示
等級詳情頁的設計
點擊等級進入詳情頁，除了 Lv0 是將所有權益無差別展示，其他等級都是優先展示新增部分，包括新獲得的普通權益和附贈的高級功能。另外，用「箭頭」和「NEW」的圖標幫助用戶區分是老權益的內容升級，還是新增的權益。
1. 前期缺乏深入調研
由于涉及網師的切身利益，因而此功能受到了網師們前所未有的關注。上線前一周，運營以郵件、通知等形式向網師預熱，3 月 5 日會上線這么一個功能。于是還沒上線就有網師來咨詢在哪里可以查看。剛上線就收到了大量的用戶反饋，網師反饋群里的消息簡直是秒速級地在刷屏。
其中，網師對每月直播時長限制的反響最為強烈，部分網師表示平臺應該鼓勵多直播，不能接受對直播時長的限制。因為直接關系到上課這個核心功能，時長不夠課都上不了，網師們的言辭非常激烈。所以我們又重新評估了平臺的直播成本，經過深入討論，全面放開了每月的直播可用時長限制。
帶來的反思是，如果前期有通過問卷、訪談等方式進行深入的用戶調研，了解他們對核心權益的態度，那么在進行權益設置時就能有更全面的考量。
2. 中高等級跨度太大，缺乏激勵效果
游戲任務的上手難度曲線一般是先平緩，再慢慢陡峭，越往上難度越大。我們的等級體系其實也是這個邏輯。初級到中級還較為容易，但再往上要非常難，要經過長時間的積累，一看就無望，難有激勵效果。
因而我們之后的優化方向是在相鄰等級中間設定一些小目標，達到可以提前贈送下一等級的新權益，以此來提高激勵效果。
文章來源：優設 作者：魚游設計
手把手教你 「如何 7 步從 0 ～ 1 設計一款產品經理一稿過，設計風格明確，用戶粘性高的軟件！」
據不完全了解，身邊大部分的 UI 同事都從 0 到 1 參與過一款或多款軟件的設計，設計過程中不知道你是否有過這樣的疑惑：
在解決這些困惑之后，我總結了一套自用的，適合從 0 ～ 1 進行軟件設計或項目改版的方法 ，并在其他項目上進行了二次驗證。
以實踐項目 —— 有道少兒詞典為例，上線一年期間，用戶次日留存峰值 36% 以上，也非常幸運，被 App Store Today 推薦 4 次，App Store 編輯推薦 8 次，被 App Store 納入 2019 本土優秀 App 盤點中，同時被預裝到蘋果線下直營店，作為樣機體驗軟件之一。所以，這個方法親測有效！
這篇文章，通過分析如何解決類似「產品經理不滿意、設計關鍵詞不對、設計風格無區別」這些問題，整理出 7 個幫你從 0 ～ 1 設計一款軟件的步驟。
文章較長，大概需要花費 15 分鐘，建議大家先看大綱，優先閱讀符合自身情況的部分。
從 0 ～ 1 進行軟件設計，免不了要多出幾個設計稿，但做了 100 稿，產品經理對頁面設計還是不滿意的話，很有可能有 2 點原因：
一拿到需求就開始做，很容易忽略需求背后的目標，從 0 到 1 做一款新軟件更是要了解業務目標和用戶目標。
在提出解決辦法前，我們需要先捋清楚以下 2 個問題：
為什么要了解目標？
公司開發軟件是為了達到某些目標或是實現某個目的的，只有了解目標才能更好地為公司創造價值。
什么是業務需求、業務目標和用戶目標？
平時產品經理跟我們說，要設計一個頁面，設計 一個流程，這就是一個業務需求，而這個需求的背后，能夠解釋清楚這個需求是為了什么，要做到什么程度，這就是業務目標（通常包括用什么手段，給用戶帶來什么價值，達到什么目的）。而軟件的目標用戶，他們在一個具體的時間、地點、環境下做了什么操作，想達到什么程度，滿足自己的什么要求，這可以理解為用戶目標。
解決辦法 ：多使用 「為什么+動詞」 的問法，向產品經理了解業務目標、用戶目標。
從 0 ～1 做軟件需要了解的業務目標和用戶目標，我們都可以從產品經理那里得到。
少兒詞典的產品經理很早就給出了業務目標和用戶目標。但，當我們需要更多細節的時候，可以使用「為什么+動詞」這樣的問法。例如：
- 「我們要做一個少兒查詞軟件，定位是一款擁有權威釋義背書，在視、聽、觸方面打造良好體驗，緊扣教材和教學大綱的適合少兒和家長使用的伴學詞典。你來做吧！」「為什么做這個？」
- 「現在兒童教育KOL越來越多，很多家長都很關心k12教育問題。市面上的很多產品都不太適合孩子使用」
- 「為什么這樣的定位可以滿足用戶需求呢？」「為什么是適合少兒和家長使用呢？」
- 「為什么……」
在少兒詞典項目中
我們既了解產品的業務目標，也知道用戶目標的情況下，方案還是被 pass 的話，可能是因為你給出的方案和產品經理想要的不是同一個東西。為什么業務目標在這里不起作用了呢？怎么才能弄清楚產品經理想要的是什么？我們可以用產品關鍵詞來回答這個問題。
為什么業務目標在這里不起作用了呢？
我們常見的業務目標的內容是很長的，用戶目標的內容也是很長的，在這種所有已知內容都很長的情況下，如果沒有準確理解內容，沒有對重點內容達成一致，就很容易產生偏差。例如我要向你描述一位美女，她的頭發很柔順，臉蛋很漂亮，身材比例很好，衣品很好等…… 90% 的可能，我們腦海中想的不是同一個美女。但是，如果我跟你說，這是一個跟芭比娃娃很像的美女的時候，我們腦海中的形象會接近很多。
怎么才能弄清楚產品經理想要的是什么？
就像設計師在進行頁面設計時，需要設計關鍵詞一樣，產品經理在描述自己的業務目標的時候，也需要能概括業務目標重點，突出賣點的產品關鍵詞，這個產品關鍵詞能幫助設計師弄清楚產品經理想要的東西。
部分產品經理為了方便大家達成共識，會早早亮出產品關鍵詞，如果當你們的產品經理沒有辦法提供產品關鍵詞的時候，我們要學會在討論中找到。
解決辦法 ：從業務目標開始跟產品經理討論項目信息，直到獲得雙方達成一致的產品關鍵詞
從業務目標和用戶目標開始跟產品經理討論項目信息，在討論的過程中，我們可以留意產品多次提到的幾個形容詞，寫下來，然后跟產品反復核對確認，最后雙方確認且保留下來的這 3～4 個形容詞，就是這個項目的產品關鍵詞。
少兒詞典的產品關鍵詞是：權威內容，寓教于樂，適合孩子使用。這些關鍵詞被我貼在屏幕的顯眼處，就怕自己哪天忘記了。
尋找設計關鍵詞，是設計師非常熟悉的步驟，但常常也在這里翻車，甚至還會出現，不管做什么軟件，反反復復就那幾個關鍵詞的情況，我們可以把原因歸結為：
為什么不了解用戶會導致關鍵詞找不對？
我們的用戶在選擇軟件、使用軟件的時候，了解到的是軟件的設計、體驗和功能。用戶下載軟件時，他們已有的認知會影響他們對軟件的幻想。就像給小男孩的衣服是天藍色，小女孩的衣服是嫩粉色一樣，如果用戶想要一件天藍色的衣服，而我們給他展示的是深藍色或是嫩粉色的衣服，這都會讓用戶產生疑惑甚至離開。因此，如果對用戶了解不準確，會導致我們輸出錯誤的設計關鍵詞。
而了解目標用戶是又一件復雜的事情。
首先，我們的目標用戶可能是一類人，如有道詞典，下載軟件用戶和使用用戶大概率是同一個人。目標用戶也有可能是兩類人或是更多，如少兒詞典，下載用戶是家長，使用用戶是家長和孩子，企業協作軟件也類似。
從接觸軟件，下載軟件，使用軟件，到判斷是否繼續使用軟件，不同的階段的目標用戶是不一樣的，目標用戶在不同階段的需求也是不一樣的。
其次，開發軟件的周期是很長的，在開發軟件的過程中，我們的用戶在不斷地接收新的知識和觀點，用戶的喜好，認知可能會發生很大的變化。
因此，為了更好地了解用戶，我們需要找到用戶跟軟件之間的交互關系，以及影響用戶喜好的因素。一共有 2 個步驟：
步驟 1. 分析不同用戶跟軟件之間的接觸點，從未來趨勢和用戶當前認知角度收集用戶資料
在這一步驟中，我們加入了 2 個概念，接觸點和未來趨勢。
什么是接觸點？
接觸點指的是用戶與產品發生交互的關鍵點，用來捋清楚我們剛剛提到 「用戶跟軟件之間的交互關系」。以少兒詞典為例，家長和軟件之間的接觸點，可以羅列為：家長聽說少兒詞典 – 到應用中心下載軟件 – 打開軟件 – 使用軟件……可見要想打造一款用戶好評度高的好產品，僅僅優化軟件的體驗是不夠的。
為什么要從未來趨勢和用戶當前認知角度去收集用戶資料？
剛剛有提到新軟件的周期是較長的，前期定好的風格、關鍵詞等，到了開發上線后卻不適用了，既浪費人力，也浪費資源，因此要考慮未來趨勢對用戶的影響。同時，用戶在選擇軟件的時候，已有的喜好/預期/經驗等用戶認知會影響用戶對軟件的判斷。就像大家想到夏天的冷飲時，腦海中會浮現冰塊、西瓜等元素，因此雪碧、西瓜等符合用戶對夏天認知的食品在天氣炎熱時會熱銷，但是受到大部分買家越來越注重卡路里這一未來趨勢的影響，低卡的西瓜冷飲也可能在未來一段時間大賣。
接觸點和未來趨勢、用戶認知之間有什么關系？
了解用戶接觸點之后，我們就可以猜測用戶在這一接觸點的需求和心理，加入未來趨勢和用戶認知，能讓我們做出來的東西更符合用戶預期。
尋找接觸點。我們了解到，少兒詞典的目標用戶群體是 1～6 年級的學生和他們的家長，即 6～12 歲孩子，和 30～44 歲家長。然后，我們粗略地將用戶的接觸點劃分為，篩選軟件 – 下載軟件 – 使用軟件 – 判斷是否再次使用軟件，孩子、家長跟接觸點之間的關系就可以展示為：
孩子是軟件查詢、練習、核心功能體驗者，家長是內容審核者、軟件篩選者、伴學時軟件使用者。
找到接觸點之后，我們還需要把影響用戶認知的內容具象化。
例如，我們想了解夏天做什么口味的飲品更好，我們可以從夏日飲品口味銷量排行榜，夏日新品類型，夏日廣告等角度來獲得更清晰的用戶認知。應用到少兒詞典中就是，家長在篩選軟件時，老師的要求，未來孩子考試的內容、日常輔導內容、大 V 推薦的內容等會影響家長對下載軟件的判斷。每個接觸點都可以使用這樣的方式，來聯想更多影響用戶認知的內容。然后我們將得到類似下面的表格：
根據表格，我收集了 近 10 頁的用戶信息
步驟 2. 提取收集到的信息，并放入四象限中，總結出2～4個視覺關鍵詞、體驗關鍵詞
雜亂無序的信息只有經過歸納之后才能被大家使用。
怎么歸納總結雜亂的信息呢？
UI 設計師都清楚，在進行界面設計時，大標題、縮進、分層等排版方式能讓我們的頁面看起來更清晰易讀。處理雜亂的信息也同理，要做的是找到信息的重點，然后把信息歸類，最后再用一句對內容進行總結，方便大家理解。應用到我們提取關鍵詞的環節中就是，挑選重要信息、放入四象限中、總結出能歸納這些信息的關鍵詞。
挑選重要信息。以家長篩選軟件為例，當我們將熱門大 V 推薦的教學方法、內容，進行整理的時候，會發現美學、樂感、編程、外文圖書、兒童心理教育、英文教學方法（自然拼讀）等內容出現的頻率很高，在一堆內容中挑選跟少兒詞典相關的內容，如美學、外文圖書、兒童心理教育等。
放入四象限中。在這一方法中，我們將四象限劃分為設計和用戶認知 2 個方向，其中設計劃分為視覺風格和體驗風格，用戶認知劃分為當前認知和未來趨勢 。以剛剛挑選的兒童美學教育為例，這是一個屬于未來家長會越來越關注的少兒視覺發展方向，所以我們放在視覺風格、未來趨勢這一象限中。其他內容也類似，不斷地提取出現頻率高、用戶熱點高的內容，并根據內容類型放入四象限中
總結出能歸納這些信息的關鍵詞。以視覺和未來趨勢象限為例，我們收集到大 V 的美學教育，未來的課本發展趨勢，小學建筑風格發展趨勢，他們都有一個特點，顏色柔和無攻擊，色彩豐富，因此，我們總結出一個視覺關鍵詞是柔和多彩。
其他內容也采用相同的方法進行總結，少兒詞典的視覺關鍵詞是柔和多彩，輕質感，親和陪伴，體驗關鍵詞是，探索多變，感官刺激和重復熟悉。
視覺關鍵詞出來了，產品的業務目標也出來了，從關鍵詞到頁面樣式的邏輯也很嚴謹，但出來的風格卻會覺得跟關鍵詞不太搭，或是跟競品差異不大，在多款 App 實踐后，我們發現可能是這樣的原因：
引用一句說爛了的名言 「一千個人眼中就有一千個哈姆雷特」。大家在對關鍵詞的理解是有差異的，以「年輕」為例子，一款針對活力的年輕人的衣服和一款針對潮流的年輕人的衣服，設計風格上可能是隔好幾條街的。因此，僅僅得到幾個視覺關鍵詞和體驗關鍵詞還不足以讓我們找準方向，我們還需要將關鍵詞組合和具體化。一共有 2 個步驟：
步驟 1. 分別組合產品關鍵詞和視覺關鍵詞，產品關鍵詞和體驗關鍵詞，找到同時滿足 2 組關鍵詞的規則
為什么將關鍵詞結合能讓關鍵詞的作用發揮出來呢？
我們的目的是要做一款滿足產品需求，符合用戶認知的軟件。
從問題 1 和問題 2 中，我們得到了符合產品需求的產品關鍵詞，和符合用戶認知的視覺關鍵詞和體驗關鍵詞，想要同時滿足產品需求和用戶認知，我們需要找到他們的重合點。如下圖所示，將產品關鍵詞和視覺關鍵詞、體驗關鍵詞分別結合，這樣的出來的規則就能最大限度地符合我們的要求，既滿足產品需求，又符合用戶認知。
具體怎么做呢？下面將分別從視覺和體驗角度舉例子。
視覺角度，以權威內容和柔和多彩結合為例：
「權威內容」 要求我們輸出的內容是符合教材，符合老師標準的，內容是準確無誤的、來源是可靠的；「柔和多彩」 要求我們在進行頁面設計的時候減少大面積顏色的使用，色彩柔和，且顏色多樣。
將兩者結合，我們得到的規則是：
根據這些內容，我們將得到下面的 4 個顏色和圓形疊加的形式。（ps：通過這樣的形式確定的是規則，如：以橙色為主結合另外 3 個顏色，圓形，使用深淺色搭配。具體顏色和疊加形式需要在具體頁面中進行調整）
體驗角度，以權威內容和探索多變為例：
體驗上，「權威內容」要求我們的操作形式是跟老師的教學相似，學習方法需要參考成熟且有效的方法；「探索多變」要求我們在交互形式上可以采用多種形式，給孩子探索未知的機會，交互形式要符合兒童操作習慣，如涂抹、翻轉、拖拉等
將兩者結合，我們得到的規則是：
其他幾個關鍵詞的結合也是使用這樣的形式，這里就不一一展開。下圖是少兒詞典的視覺關鍵詞和產品關鍵詞結合后的樣式。
步驟 2. 選擇復雜的核心頁面，把具象化的體驗規則、視覺規則融進頁面中，確定設計風格
規則梳理出來后，我們就要挑選一些重要頁面進行風格嘗試，以結構復雜的中文查詞單字結果頁為例：
分析小學一年級到六年級的考試內容，我們了解到部首、筆順筆畫、跟寫、發音等漢字的基礎信息是低年級用戶（小學三年級及以下）會使用到，他們要求信息完整且準確；像詞組、造句這些信息則是針對高年級學生，要求快速準確定位到具體的內容板塊。
分析完內容結構后，我們就需要根據內容布局，加入表格中總結的體驗規則：
最后，梳理好頁面的體驗形式之后，我們開始給頁面添加視覺規則：
對比產品原型和市面上的一些競品，我們可以發現，查詞軟件在內容布局上相差無幾。如果沒有找到符合我們產品業務目標，同時符合用戶認知的規則，我們將被淹沒在一群查詞軟件中。
步驟 3. 建立一個畫板，把用到的顏色、規則、字體、間距等內容羅列出來，并給他們限定使用范圍，方便自己查閱和團隊合作
最后一步，相信很多設計師都會在設計過程中建立一套方便好用的設計規范庫，這里就不展開來說了。
最后，再對上文的所有內容進行概括。從 0 到 1 進行軟件設計我們需要用到下面這 7 步:
完成這 7 步，將可以讓你從 0 ～ 1 設計一款產品經理一稿過，設計風格明確，用戶粘性高的軟件。
藍藍設計的小編 http://www.syprn.cn