如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

那么在設計過程中，需要怎樣規避風險，提升表單頁面的產品體驗呢？下面我們將結合實際案例，從七個方面介紹表單設計中的常見注意事項。當然，這些規則都是在表單設計中的一般準則，每條準則都有例外。

01  |  單列瀏覽

表單承載的主要功能是向用戶清楚地傳達信息，保持有秩序的單列表單形式更利于用戶瀏覽動線，它能幫助用戶識別并填寫內容，而多列的表單形式則會破壞用戶填寫規律，影響效率。

02  |  豎向排列

在表單中有多個選項以供用戶選擇時，將每個選項以豎向的排列方式位于每個選項下方時，更利于用戶閱讀瀏覽的習慣。

03  |  操作一致

表單填寫過程中我們應當避免在整流程中出現按鈕樣式、顏色的變化。需要用戶確認的操作行為的一致能有效減少用戶在行動時的困惑和猶豫，確保用戶在表單填寫過程中的流暢體驗，從而實現最終商業上的交易成就。

04  |  標題不可取代

雖然通過使用占位符代替標題的方式擴充了表單的填寫空間，減少了視覺噪音，但是這種做法并不利于用戶的短期記憶。一旦用戶觸發輸入，占位符消失，用戶可能會陷入這里該填寫什么的迷茫，必須刪除所有輸入內容后才能再次顯示標題，顯然，這是違背人性的。

05  |  輸入域符合預期

輸入域的長度與預期輸入的內容成正比，確保輸入字段長度符合用戶心理預期，并能在表單中能完整呈現。

06  |  不隱藏基礎幫助信息

作為一個購物流程中的信息確認和采集環節，需要用戶對于購買的產品有明確的認知。因此在設計過程中對于用戶填寫表單有基礎幫助的信息應該做強調或顯示設計，避免出現因為隱藏幫助信息導致的客戶投訴。

07  |  減少二次確認

基于OTA行業特性，出行表單業務對標電商購買表單業務需要填寫的信息更為冗長，層級更為復雜，為了減少用戶填寫過程中的心理負擔，降低填寫難度，我們需要對不必要的信息進行刪減或合并，為用戶信息輸入提供便利。

以注冊環節為例，在Web設計時往往會有二次確認密碼的環節，但在移動端這樣的操作會增加用戶填寫的負擔，因此大部分移動端界面上我們不建議對用戶的密碼信息進行二次確認，轉而通過使用明文顯示或者優化密碼消失交互的方法來改善這一環節的體驗。

08  |  *號的使用

沿用通用符號習慣，在表單設計中若是對業務必填的信息，我們往往采用 * 號的形式來幫助用戶區分信息優先級。但當表單中必填信息多于非必填信息時，大量 * 號的應用反而會給用戶認知增加負擔，使得無法快速識別哪些是必須填寫的，哪些是不必須填寫的。因此在表單設計中，當必填項多于非必填項時，隱藏 * 號標記，轉而通過暗提示標記非必填項的形式來幫助用戶識別。

09  |  暗提示的應用

暗提示作為輔助用戶填寫表單的主要方式，在設計上，需要盡可能地減少視覺噪音，確保文案言簡意賅，表現形式不干擾用戶。因此，對比度過深或過淺，色彩過于突出的都不適合用于暗提示的視覺表現。

在交互上，暗提示也并不是一直存在的。當光標觸發表單項時，暗提示保持顯示，指導用戶輸入。而當用戶輸入字段后，暗提示內容隱藏，讓用戶專注于已填內容。

10  |  設置默認選項

在復雜表單中，對于如證件類型、手機區號、國籍等較為通用的選項，為用戶提供默認選擇的交互可以有效簡化操作步驟，減輕用戶填寫表單的負擔，更快地幫助用戶完成表單內容的填寫。

11  |  替代輸入

對于表單填寫過程中可以固化選擇的信息，應讓用戶進行選擇操作以代替手動輸入，盡可能地讓用戶減少輸入成本。

如：出游人信息采集時，提供添加常用出游人選項可以幫助減少重復填寫的負擔；證件類型采集時提供證件類型選項可以減少用戶困惑，在已有的選項中快速選擇；郵箱采集時自動聯想顯示Email網址可以輔助用戶規范文本格式，快速完成表單填寫。

12  |  鍵盤匹配

根據表單填寫類型的不同，自動匹配鍵盤類型。如“中文輸入”呼出中文鍵盤，“姓名（英文）”輸入呼出鎖定大寫的英文鍵盤，“手機號碼”輸入呼出數字鍵盤……免去用戶切換鍵盤操作的步驟。

同時根據填寫步驟，合理的定義鍵盤右下角的功能鍵，幫助用戶實現換行/完成的操作，省去用戶收起點開鍵盤的重復動作和表單上下填寫項的切換，讓填寫表單的過程更為順暢，用戶思考不被打斷。

13  |  按鈕層級

在用戶面對多個按鈕的場景選擇時，我們應當幫助用戶預先區分出主要行動和次要行動，通過視覺語言強調主要按鈕，弱化次要按鈕，引導用戶進行選擇。

14  |  二次確認

因移動端特性，用戶在填寫場景較為不穩定如吃飯途中、行駛途中等，當用戶花費精力填寫了部分表單信息后，為了防止用戶誤操作而丟失已填信息的場景，需要在此時進行二次操作確認，確認用戶操作意圖。當然，如果用戶沒有對表單進行任何編輯，這樣的退出操作是不需要二次確認的。

15  |  多行文本

在復雜表單中，面對填寫內容過長的同類表單，用戶會在預覽時產生輸入壓力。運用字號、顏色、間距等視覺手段將相似層級的信息進行邏輯分組，幫助用戶更好地區分多行文本的信息層級，便于輸入。

16  |  號碼組合規律

對于一些常用的號碼字段，可以采用線下通用的數字組合規律幫助用戶閱讀和記憶，如電話號碼的組合規律為 3 4 4 ，銀行卡號的組合規律為 4 4 4 4 3。空格在數字呈現處的應用雖然細微，但是在長數字的閱讀場景中仍能給用戶帶來識別便利。

17  |  選項露出

在網頁端表單設計中，用戶在表單填寫中需要對選項進行選擇時，常用的交互形式是在選擇器的下拉列表中進行選項的二次點擊。而在移動端設計中，觸發選擇器后的二次點擊會增加用戶的填寫成本。所以在設計時，當選項少于8時，在表單中直接顯示所有可選項，當選項超出過多時則在列表浮層中進行選擇。

18  |  減少頁面跳轉

在表單填寫中我們期望用戶保持專注，盡量避免產生引導用戶離開當前頁面的填寫交互，這種交互跳轉很容易打斷用戶固有的行為軌跡。因此運用浮層、彈窗等交互來完成輔助信息的采集是我們較為推崇的交互形式。

19  |  關聯標記

當用戶提交表單信息后，如已填寫的內容有偏差，需要明確的標記有問題的數據及錯誤原因，幫助用戶找到問題并解決問題。杜絕報錯信息描述模糊，信息不關聯的報錯信息引發用戶困惑。

20  |  實時校驗

在某些業務場景中，為了幫助用戶在提交信息前校正他所填寫的內容，避免大面積報錯場景的出現。我們可以使用實時校驗的方法，在用戶輸入完成后進行判斷及結果反饋，如登陸注冊流程的驗證碼校驗就可以運用實時校驗的報錯方式。

當然需要注意的是，運用實時校驗的表單需在用戶明確離開此項輸入狀態時再進行結果反饋，而非在填寫過程中進行實時校驗，避免出現填寫時持續報錯的情況。

21  |  密碼保護

在輸入密碼的表單中，部分平臺會在密碼輸入時顯示暗文字段以此保護用戶隱私，而鑒于前述第七條準則，移動端的密碼已簡化至只輸入一次，暗文的顯示會讓用戶無法確認所輸密碼信息。因此在需要隱私保護的場景下，我們需要完善密碼交互的呈現形式，當輸入時，輸入位短暫顯示為明文，保持1秒或者保持到下一位密碼輸入后再變成暗文，這樣的交互改善可以確保用戶在輸入中明確內容，也滿足了其隱私需求。

22  |  提交反饋

在用戶完成整個任務環節時，提供成功或失敗的反饋能讓用戶在枯燥的表單填寫后有更強烈的情感反饋。所以在設計時，我們需要提供正向的激勵夸贊用戶表單填寫成功，在表單沒有完成時鼓勵用戶修改內容，重新提交，不可以負面情緒責怪用戶。

今年上半年，本著提升途牛產品調性，為內容傳達提效的初衷，由途牛UED組織并發起了一次針對現有關鍵頁面升級的項目，在架構升級全量推進初期，我們優先選取了酒店表單業務作為此次設計重構的首選試驗點。

表單作為一個偏理性的產品，直接影響著用戶決策到產品轉化的數據，在此環節，更需要降低用戶成本，維持產品決策熱情以實現商業價值上的成功。在酒店表單業務改版過程中，除了應用上述七方面的設計準則幫助提升用戶體驗，我們也結合了酒店現有問題和產品特性進行了更為精細化的設計重構。

整合信息框架

—

體制讓步

對用戶來說，途牛是一個整體的產品，所有表單的基礎體驗應該是一致的。以往，基于企業平臺的發展，酒店細分的國內酒店和國際酒店兩個業務相對獨立，雖然同樣隸屬于下單環節，但是業務迭代進程及側重方向的不同導致表單前臺呈現差異較大。

借助途牛整體關鍵頁面升級的項目，在此次酒店業務重構初期，協同兩個業務的產品、設計、研發我們共同整合資源，解決歷史遺留體驗問題，為國內、國際酒店表單業務進行整體體驗的統一和提升助力。另一方面，UED也通過酒店業務的試點思路，將基礎表單框架進行模塊細分，逐步影響并推廣至全站表單業務升級。

框架構建

回顧現有酒店表單業務的問題，主要體現在內容層級模糊，類型樣式混亂上。這些隨著每一次迭代需求增加而新增的表單項，只是基于業務類型進行了單模塊的設計，而對于用戶來說，差異化的表單項樣式無形中增加了填寫時信息獲取的成本。

基于人體本身的生理構造，我們在獲取文本信息時，并不會逐字閱讀，往往采用“掃視”的方式識別段落輪廓從而獲取信息，規律性的排列方式也會幫助持續這種“掃視”的節奏，提升信息轉化效率。

因此在設計上我們遵循相似信息一致性的原則，簡化重復冗余的視覺噪音，將每個單元表單項模型遵循“上類型+下內容”的形式幫助用戶快速對所需填寫的表單類型建立心理預期。在大量相同的填寫區域，統一左側內容標題對齊方式，并通過字色、字重等形式確保未觸發時內容標題為主，暗提示為輔，填寫后填寫內容為主，內容標題為輔的視覺表達，從而在表單的不同階段仍舊保證了用戶對于主次信息的識別體驗。

品牌信息傳達

為了減弱表單填寫頁冰冷感，在框架信息整合的基礎上，我們此次改版也將品牌解構，用色彩的形式融入表單頁面設計，將品牌功能化，輔助產品以深化品牌用戶心中形成立體感知。

當然品牌功能化的融入也需要有所限制，此次我們主要從氛圍、控件、操作、提示這四個方面展開，在不影響表單主要信息呈現的基礎上，遵循適度、適量兩個原則。

內容層級排序

—

用戶吸引

回顧整個購買流程，填寫訂單業務承擔著維系用戶在產品詳情所產生的內容吸引到內容轉化的責任，而如何在枯燥的酒店表單中維穩甚至加固用戶的內容吸引？為此，我們參照了《Actionable Gamification》關于人性八大核心驅動力中的“擁有感&占有欲”和“失去&避免”這兩條來幫助我們。

結合對用戶使用場景的需求分析，我們將信息在用戶心中的關注度進行了重新排序，首屏弱化了用戶已經在詳情頁明確的酒店名稱，轉而對用戶需在此環節明確的房型、入住時間、離店時間等內容進行了強化和整合，明確產品歸屬。同時為了加固用戶的內容吸引，我們前置了酒店“超值價”、“可免費取消”等信息來解除用戶對于產品價格和沉沒成本的疑慮，從而正向地激勵用戶完成后續的表單填寫。

細分模塊

除了對首屏信息的排序重置外，對于需要用戶填寫的每個單元模塊我們也做出了一些調整。

如取消險模塊，此前為避免客訴，將所有需要用戶確認和查看的信息都進行了高亮提示和行動引導。這些信息雖然是我們需要用戶知道的，但并不一定是用戶在填寫時想要詳細了解的，過多的信息干擾反而影響了有用信息識別，也降低了用戶填寫表單的效率。因此新版表單重構時我們將協議信息整合至末尾統一確認，同時對文字、icon進行視覺減負，統一弱化輔助信息呈現，轉而強調用戶需要確認的取消險金額和投保人模塊。

從上圖國際酒店改版前后的方案進行對比可見，每個細分模塊都有著或多或少細節的調整，當然還有沒有展現的輔助信息交互浮層框架的統一。這些信息呈現的形態與交互的邏輯也都遵循著前文“保持秩序、描述清晰、化繁為簡、幫助用戶、信息分組、減少跳轉、及時反饋”這七大原則，每一個細節都可以展開來細細剖析，這里就不多加贅述了。

結語

—

蚍蜉亦可撼樹，在產品升級的過程中，用戶體驗的提升往往需要依靠像表單這樣一個個微小的業務作為突破點，從而裂變反哺至全局。此次酒店表單重構項目從產品角度來看，功能上并沒有改變，而通過代入用戶場景，用戶感知，用戶行為習慣等方面進行細節的體驗升級。后續我們還將進行更加深入地探索與迭代，將體驗升級持續擴散至其他業務，為每一位途牛用戶帶來更便捷、更自然的出行體驗。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

1. 系統全面地了解文字的基礎知識、顯示方式、影響因素及當前網頁設計中適合的文字系統；
2. 梳理出自己團隊所有產品文字使用情況；
3. 綜合第1步、第2步總結出適合團隊業務的文字系統。

字符屏幕顯示原理

1. 字符

字符是指計算機中使用的字母、數字、標點符號等等。

計算機最初發明出來是用來解決數字計算問題的。

后來發現，計算機還可以做更多的事，例如文本處理。其實計算機挺笨的，它讀到的所有字符都是由1和0組成的字符串，因為計算機電路只有兩種狀態，「開」和「閉」，對應「1」和「0」。計算機也只可以直接存儲和處理二進制數字。

2. 二進制

「二進制」是數字世界里的基本規則。

下面這些不同格式的文件，在本質上都是一串由1和0組成的代碼，要了解這些文件首先要了解二進制。人有十根手指頭，但計算機電路只有「開」和「閉」兩種狀態，所以滿十進一位的計數方式更適合人類計算，而滿二進一的二進制更適合計算機。計算機只需要1和0這兩個數字就可以傳遞一切信息。

△ MP4

△ MP3

△ JPG

△ TXT

△ AVI

以圖像為例，我們用電腦或手機看到的圖像都是在某個角落里存儲著下面這樣的一串數據。開頭的16位翻譯過來就是 BMP文件開始的標識。

BMP文件標識后面的數字就是圖像的各項基本信息。

△ 圖像的各項基本信息

△ 顏色深度

最開始的24位，都是1，像素顯示為紅、綠、藍三種顏色，相加后顯示為白色。

接下來的24位，前8位是1，后面都是0，像素顯示為紅色。

再后面24位的前16位都是1，最后8位為0，像素顯示紅、綠兩色，相加后顯示為黃色。

根據這樣的規則整個55×55的格子鋪滿顏色就得到一張完整的圖片。所以一個 BMP圖像文件中的1和0就在逐個記錄圖像中每一個像素點的顏色。

△ 二進制圖片生成方式

△ 色光三原色和顏料三原色區別

下面所有文件的顯示都和圖像顯示例子一樣，文件中的1和0按照人們事先設計好的規則排列好，只需要找到正確的打開方式按照特定的規則來解讀這些數據，我們就可以獲得其中的信息。我們怎么才能知道某一個文件的1和0究竟是按什么規則排列的？我們又要用怎樣的方式來解讀？這就用到了擴展名，在文件的名字后面加幾個特定的字符，就可以幫助系統辨別出文件的類型，從而提示電腦去按照某種特定的規則來正確解讀其中的信息。

△ MP4格式擴展名

△ MP3格式擴展名

△ JPG格式擴展名

△ TXT格式擴展名

△ AVI格式擴展名

更多其他文件拓展名：

3. 字符編碼

為了在計算機上顯示字符，必須將字符轉換成二進制數字。所以就有了統一、標準字符轉換規則，即字符編碼。字符編碼是給所有的漢字定一個的數字編號，并用1和0來表示這個數字編號。

文字的一個字符對應一個編碼（碼點），而編碼對應字符集里的一個「字」，字符通過字符集與「字」相連。像圖中所示Unicode、GB 2312、Shift_JIS 都是字符集，其主要作用是為每一個「字」分配一個編碼。

△ 文本編碼流程

字符集里的每一個編碼對應的是一個「字」而不是「字形」，也就是一個「字」在不同的地區或標準中可能有不同的「字形」，但字符集中只能對其分配一個編碼（除非相差過大，比如簡化字），要顯示其不同的「字形」要通過使用為不同地區或標準設計的字體來實現。

△ 字異形（左簡體中文，右日文）

4. 編碼發展史

ASCII

ASCII（American Standard Code for Information Interchange，美國信息交換標準代碼）出現在上個世紀60年代的美國，ASCII 一共定義了128個字符，包括英文字母 A-Z，a-z，0-9，一些標點符號和控制符號。ASCII 采用的編碼模型是簡單字符集，在英語系國家里 ASCII 標準很完美。但是世界上有好幾千種語言，其他語言系的國家想使用計算機，ASCII 就遠遠不夠了。所以編碼進入了混亂的時代。

△ ASCII編碼

混亂時代

計算機的一個字節是8位，可以表示256個字符。ASCII 使用了7位，所以人們決定把剩余的1位也利用起來。人們對于 ASCII 已規定好的128個字符沒有異議，但是不同語系的人對于其他字符的需求不一樣，所以對于剩下的128個字符的擴展千奇百怪。而且在亞洲語言系統中有更多的字符。于是就又產生了各種多字節表示一個字符的方法，每個語系都有自己特定的編碼頁（code pages），這就使整個局面更加混亂不堪。這時 Unicode 出現了。

Unicode

Unicode 就是給計算機中所有的字符各自分配一個代號。Unicode 可以認為是字符的編號，它為每種語言中的每個字符設定了統一并且唯一的二進制編碼，Unicode 字符集和編碼方式解決了跨語言、跨平臺的交流問題。但在 Unicode 里每一個字符都是用4個字節來編碼，原本英文字母僅需1個字節編碼，中文需2~3個字節編碼即可，這對于存儲或傳輸資源而言是很不劃算的。

UTF-8

UTF-8 基于 Unicode 編碼的一種節約字節的編碼，是一種可變長度字符編碼方式。在UTF-8編碼中，英文字母是一個字節，中文（非生僻字）是2~3個字節?？梢哉J為， UTF-8 是對 Unicode 的一種壓縮算法。UTF-8 等編碼方式有效的節約了存儲空間和傳輸帶寬，因而受到了極大的推廣應用。并且 UTF-8 兼容 ASCII 字符集。

UTF：Unicode Transformation Format

5. 中文編碼類型

△ 中文編碼類型

文字基礎知識

1. 文字

「文字」是信息交流的工具，可讀性、易讀性至關重要。在網頁設計中文字使用需要考慮幾個要素：首先考慮字體，其次是字重、字號、行高、字間距、行間距、段間距等。

△ 字體、字重

△ 字間距、字號、行高

△ 行間距、段間距

2. 字體

「字體」是文字的外在形式特征，不同的字體有不同的性格。

字體種類

綜合中文、英文都適用的廣義分類。

襯線、無襯線

△ 襯線和無襯線差異1

△ 襯線和無襯線差異2

字體 – 中文

字體構成：

△ 筆畫

中宮，是指等分成九個小方格最中間的那一格。

△ 中宮

△ 中宮和字體關系

△ 中宮緊湊、中宮松散

間架結構，漢字種類眾多，筆劃不等，空間排布極為重要。字體的間架結構可分為兩類：單體字、合體字。

△ 單體字 間架結構

△ 合體字 間架結構

漢字字形眾多，有些字形會產生視覺大小變化，頂格、縮格、出格就是針對不同結構的字體筆畫特征進行微調，讓他們看起來更加均衡、等大、視覺更完整。

△ 調整前

△ 調整后

字形調整實例：

襯線、無襯線字形演變：

△ 襯線 字形演變

△ 無襯線 字形演變

字體對比：

微軟雅黑、方正蘭亭黑簡體、思源黑體、蘋方-簡，筆畫寬度均勻，橫平豎直。同一字號，微軟雅黑最粗，小字號時閱讀會較為吃力。方正蘭亭黑從微軟雅黑派衍生出來，可以更好地適應其他應用場合。

黑體、華文黑體、冬青黑體筆畫末端寬度不同。

字體 – 英文

「字谷」概念來自西文字母設計，字谷指字母中部分或完全封閉的空間，即字母當中留白部分。

英文的字體結構是由4條平行線組成，有時候是5條，但是一般大寫線會忽略?！富€」在西文中是標準，單個字母的所有立腳點都是在這條線上（除了 g、j、p、y）。英文文字結構多種多樣，4條平行線的位置也會發生改變。

升部：上緣線和主線之間的內容。

降部：下緣線和基線之間的內容。

字體對比：Helvetica Neue、Arial、DIN

Helvetica Neue：中性，無襯線，現代主義風格字體。字體末端嚴格保持橫平豎直，性格嚴謹、保守，沒有任何的修飾，適合不同分辨率的顯示器。該字體是 Helvetica 字體的升級版本，擁有更多的字重，更易于不同場合的應用。字形則相對偏胖，筆畫更清晰，而且小字號的情況下可讀性也很高。

Arial：Arial 是一套隨同多套微軟應用軟件所分發，無襯線。該字體比例及字重和 Helvetica 極相似，其實是 Monotype Grotesque 系列的衍變。在字體及字距上都做了一些細微的調整和變動，以增加它在電腦屏幕的不同分辨率的可讀性。

DIN：字形瘦長，無襯線，適合顯示比較長的數字，但是小字號的情況下識別度較低。DIN 字體在德國有著悠久歷史，是交通標志、路牌、門牌和車牌的標準字體。雖然曾經是德國納粹使用的字體，但是經過設計和重新升級。DIN 在雜志、海報以及其他各種設計領域都被廣泛地使用。

Helvetica Neue、Arial、DIN 數字對比：

3. 字重

「字重」是同一種字體的不同字形粗細，即字體重量。字重的劃分根據不同字體廠商各有不同，不同的字重稱呼也可以不一樣，常見的劃分如下：

在排版中，一種字體會在標題、正文、說明注釋等不同內容下使用，單一的字重不能很好適應排版需求，于是衍生出了同一個字體的不同字重。

4. 字號

「字號」是字體的高度，不同平臺字號規范不同。

在界面設計中，文字字號決定了信息層次和權重。首先要設定基準字號（最小字號），然后可依據一定規律設定導航、標題等稍大字號。一般網頁基準字號有12px、14px、16px等。

字號也受閱讀距離影響，眼睛到屏幕距離40~70cm，為較適合的閱讀距離。

Ant Design 定義的電腦顯示器閱讀距離（50 cm）從原先的12上升至14，以保證在多數常用顯示器上的用戶閱讀效率最佳。

5. 行高

「行高」可以理解為一個包裹在字體外面的無形的盒子。字號和行高決定著一套字體系統的動態與秩序之美。

西文：西文基本行高是字號的1.2倍左右，字體有上伸部（ascender）和下延部（descender）可來創造行間空隙。

中文：中文因為字符密實且高度一致，所以一般行高需要更大，根據不同人群的特點（兒童、年輕人、老年人）以及使用環境，可達到1.5~2倍甚至更大。

Ant Design 受到5音階以及自然律的啟發定義了10個不同字號以及與之相對應的行高。

6. 字間距

「字間距」是指一組字母之間相互間隔的距離，受字偶距和字體影響。

字偶距：是指兩個字母（或其他字符，比如數字，標點符號等）之間的空白。不同的字母有不同的外形，所以字體使用相等的字間距是不協調的。所以需要調整字偶距來提升可讀性。

按字間距可分類為：比例字體（Proportional）和等寬字體（Monospaced）。

比例字體：根據字符外形特點設置不同字距的字體，這種字體外形協調，可讀性好。

等寬字體：每個字符設置相同字距的字體，其優點是可以很好的控制排版對齊。

7. 行間距

行間距（line spacing / leading）：行與行之間的距離，作為一段文本中的留白，行間距讓字與字之間有了可呼吸的空間，行間距對文章的易讀性有很大影響。

排版推薦使用行間距1.2~2倍。

如何設定行間距，如何規范行間距

行間距由行高決定，為了確?？勺x性增加行間距，就需要增加行高。舉個例子：字號12，行高設定20，那么行間距=「（行高-字號）÷2」×2，除2又乘2，我就簡單的簡化成行間距 = 行高 – 字號，那么行間距就是20-12=8，并且可以將這個數值固定下來，重復使用。

注：至于為什么是20，因為最初一個字節用8個二進制位來表示，所以現在的很多網頁設計中常用到8。12+8=20，參考 Ant Design，網上有很多設計師總結的行間距計算方法，對于一個數學不好的我來說，參考已有總結和經驗得出的數值，固定這個數值重復使用，這樣最簡單。

8. 段間距

段間距（paragraphs spacing）：段落與段落之間的距離，可保持頁面節奏，與字體、行高相互關聯。為保證文章易讀性，正文段間距，可以簡單地取一個空行（也就是一個行高），這是比較常規也比較合適的做法。舉個例子：字號12，行高設定20，段間距 = 行高 + 行間距。

小結

要設置「有節奏感的文本內容」就要遵循這些規則：段間距大于行高，行高大于行間距，行間距大于字間距。

字體選用基礎原則

1. 網頁文字顯示方式

網頁設計內容一般都是通過電腦各種瀏覽器來承載顯示的，瀏覽器顯示字體是直接讀取用戶操作系統里的字體。

2. 字體選用原則

字體是界面設計中最基本的構成之一，科學的字體系統：始終保證信息具有優秀的易讀可讀性，提升用戶的閱讀體驗及工作效率。

• 原則一：字體優先使用各操作系統默認的字體。
• 原則二：有版權、筆畫嚴謹、清晰可讀、經典。

3. 操作系統

下圖數據來源：世界互聯網市場份額統計網站 Net MarketShare。

△ 操作系統市場占有率 TOP10

各操作系統默認字體：

4. 瀏覽器

電腦瀏覽器直接讀取用戶操作系統里的字體，不同瀏覽器對文字的渲染方式不同，因此了解市場瀏覽器使用情況很有必要。

下圖數據來源：世界互聯網市場份額統計網站 Net MarketShare

5. 字體版權

除了操作系統默認字體，其次需要優先選擇使用的就是已購版權字體，如果沒有已購買的字體，可考慮一些免費字體，非免費字體使用時需謹慎。

△ 公司常購版權字體

文字規范

1. 字體規范

字體使用三原則

體系化：在同一個系統UI設計中先建立體系化的設計思路，對主、次、輔助、標題、展示等類別的字體做統一的規劃，再落地到具體場景中進行微調。建立體系化的設計思路有助于強化橫向字體落地的一致性，提高字體應用的性價比，減少不必要的樣式浪費。

重復：重復設計中出現的一個或多個內容。任何事情都可以重復。字體、字重字號、顏色、一條線、各種形狀（如圓形、正方形或三角形）等。字體使用最好不要超過3種，一般同一個系統UI設計內容的字體數量建議2種即可，中文一種、英文數字一種。且字體樣式上也遵循重復原則，避免毫無意義的使用大量字號、顏色、字重、行高等。

韻律：在需要拉開差距的時候可以嘗試選擇對比大的字體字號，令字號之間產生一種微妙的韻律感。為保證良好的閱讀體驗，每行保持適當的字符數量。每行上擁有適當的字符數量是文本可讀性的關鍵。如果每行文字太短，視線必須反復折回來，打破讀者的節奏。如果一行文字太長，用戶的眼睛將很難專注于文本。英文無特殊要求避免使用全大寫字符，因為會大大延緩用戶掃描和閱讀的速度。

現有產品字體統計

字體規范

綜合考慮不同操作系統選用最佳字體體驗。

代碼聲明：

• Font-family：Helvetica Neue, Helvetica, Arial, 「蘋方-簡」, 「Microsoft YaHei」, 「微軟雅黑」, sans-serif。
• 英文字體：首先查找Helvetica Neue（Mac），然后查找Helvetica（Win），都找不到就用Arial（Mac&Win）；若是以上三者都缺失，則使用當前默認的sans-serif字體（操作系統或瀏覽器指定）；
• 中文字體：選用平臺默認中文字體 蘋方-簡（Mac），微軟雅黑（Win）。

2. 字重規范

一般情況下會選用「一粗一細」兩種字重。

粗體：在視覺面積上較重，筆畫加粗，字腔（筆畫間空間）小，突出顯示，產生強調作用。常用于標題和標語。

細體：在視覺面積上較輕，筆畫輕細，字腔（筆畫間空間）大，結構疏朗清透，閱讀時不會讓讀者產生壓迫感。常用于正文和說明。

中文、英文推薦使用字重：

3. 字號規范

現有產品字號統計

字號規范

4. 行高規范

參考：Ant Design 受到5音階以及自然規律啟發定義了10個不同字號以及與之相對應的行高。

5. 字間距規范

使用比例字體，根據字符外形特點設置不同字距的字體，這種字體外形協調，可讀性好。

6. 行間距規范

顏色規范

1. Ant Design 兩大色彩體系

Ant Design 兩大色彩體系：系統級、產品級。

系統級色彩體系

系統級色彩體系主要定義了螞蟻中臺設計中的基礎色板、中性色板和數據可視化色板。

• 基礎色板：12個主色（薄暮/火山/日暮/金盞花/日出/青檸/極光綠/明青/拂曉藍/極客藍/醬紫/法式洋紅）以及衍生色共120個顏色。
• 中性色板：黑、白、灰，從白到黑共10個顏色。
• 數據可視化色板：敬請期待。

產品級色彩體系

產品級色彩體系則是在具體設計過程中，基于系統色彩進一步定義符合產品調性以及功能訴求的顏色。

• 品牌色應用：品牌色取自基礎色板的藍色#1890FF，應用場景包括：關鍵行動點，操作狀態、重要信息高亮，圖形化等場景。
• 中性色：中性色主要應用在文字部分，此外背景、邊框、分割線等場景中也非常常見。
• 功能色：功能色代表著明確的信息及狀態，如成功、出錯、失敗、提醒、鏈接等。

2. 系統級 中性色

中性色包含了黑、白、灰。在網頁設計中被大量使用，合理的選擇中性色能夠令頁面信息具備良好的主次關系，助力閱讀體驗。中性色板一共包含了從白到黑的10個顏色。

3. 產品級 中性色

Ant Design 的中性色主要應用在文字、背景、邊框、分割線等場景中。產品中性色的定義需要考慮深色淺色背景的差異，同時結合 WCAG 2.0標準。中性色在落地的時候是按照「透明度」的方式實現。

VIP大數據用戶體驗部 的中性色也是主要應用在界面的文字、背景、邊框、分割線等場景中。考慮到深淺色背景的差異，中性色根據設計需求在落地的時候可按照色值和透明度兩種方式實現，兩種方式優先使用色值方式，盡量避免兩者混搭使用。

4. 產品級 功能色

功能色代表了明確的信息以及狀態，比如成功、警告、失敗、提醒、鏈接等。

功能色的選取需要遵守用戶對色彩的基本認知。在一套產品體系下，功能色盡量保持一致，不要有過多的自定義干擾用戶的認知體驗。

文案

文案內容來源于 Ant Design，一文一字之間可研究琢磨的空間還很大。

分享一個感觸很深的例子，里面有一個專業用語「閾yù值」和「閥fá值」，這兩個字一開始我看了很久才看出來區別，查資料了解到，其實「閥fá值」在專業行業里是一個錯別字，是一個錯誤的用詞，其正確用法是「閾值」是所屬行業認可通用詞?！搁搚ù值」又叫臨界值，是指一個效應能夠產生的值或最高值。

所以精準、清晰的語言會更容易讓用戶理解，合適的語氣更容易讓用戶建立信任感。因此在界面設計時，在使用和定義文案時要注意以下幾點：

• 從用戶角度出發；
• 表述一致；
• 重要的信息放在顯著位置；
• 專業、精準、完整；
• 精簡、友好、正面。

在有限的空間內將重要的信息放在最前面，讓用戶第一眼看到最重要的內容。（或通過高亮、留白等方式突出重要信息）。

結語

因為硬件軟件一直在變化，設計規范和內容也要定時更新，規范是為了在繁多復雜業務中尋求一種平衡，幫助各團隊更的完成任務，有些內容適合強制規定，有些內容適合規范一個范圍，有些內容適合制定一種規律方法……當出現特殊情況時需要重新審視和不斷完善靈活使用。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

UXRen

打造有價值產品的首要規則是，它應該對某些人有真正的使用價值。也就是說，一個真實的人(或許多個人)會因為你的工作而解決了某些問題或實現了某些需求。

這個道理是顯而易見的，但是，如果你去聽一聽這些產品設計們的日常用語，就會發現，在日常生活中，我們不常這樣說。

反而，在語言交流中，設計師經常會“走捷徑”。有時會直接使用行業語言或專家術語來提高表達度，但大多數情況都是為了避免廢話。

舉例來講：

• 我們要如何增加用戶對這種功能的使用？
• 為什么這兩方面看起來不夠統一？
• 這里的點擊率這么低，可能我們太過強調了。
• 我感覺這里干擾信息太多了，要怎么解決這個問題？
• 這個設計需要更多“呼吸空間（留白）”。
• 我們應該將這點設計地更簡潔一些。
• 這一指標需要提升，現在的曲線走向并不理想。

想象一下，當用戶聽這些話時，他們能相信我們的最終目的是為他們創造價值嗎？

當然，我們在使用語言捷徑時，其實是在把我們腦海中的各個點連接起來，這種基于對內容的理解，在腦海中將一個概念與另一個概念聯系起來的思考方式——就像是火車在有序的系統中飛馳而過，直到停留在人們期待的站臺上一樣。

但在實際交流中，有可能出現兩種完全預料不到的結果：

第一種情況是，當與一個認知和你不太一致的人交流時，你認為重要的事情，對方有可能完不理解為什么這樣。

比如說，作為一個設計師，當我說“為什么這些東西不一致”的時候，我自己的邏輯是這樣的：

不夠一致=> 這些東西雖然看起來很像，但當點擊的時候，可能有人會選A，也有人會選B=>這就會使用戶困惑，并且影響他們從我們構建的內容中獲得最大的價值。

其他精通設計語言的人，一般而言都會跟我一樣的思考問題。比如，讓東西“簡潔”其實是指讓它專注于最重要的點，以便人們能一眼就知道如何使用它。讓界面“可以呼吸”則是指讓人們在閱讀或者瀏覽時能更輕松愉悅。

但如果你并沒有建立這些認知連接，你可能會不解：一致性、簡潔性和可呼吸空間為什么這么重要呢，這些價值觀看起來是不是有點隨意？而且這些疑惑有可能是對的，為了一致性而保持一致也許并沒有必要。如果這世上沒有人會對兩個看起來相似但反應不同的事物感到困惑的話（假設開發成本投入不算很大的話），那么這不會是一個問題。

許多工程師和產品經理跟我講過，關于“一致性”的討論經常意見很難統一，但當我說“目標是讓用戶感覺沒有困惑”時，爭議就不存在了。

使用“語言捷徑”的第二個意想不到的后果是，我們有可能會忽視真正的最終目標。你看待問題的方式和角度會更多地從公司出發而不是用戶真正面臨的問題。

舉個例子，我們要如何提高這一功能的使用率？這可能并不是任何一個你的用戶會關心的問題，在討論這一問題的時候，你有可能會開始從公司角度思考解決方案，比如讓功能更顯眼，不斷提醒用戶這一功能的存在等。

但其實這些做法只有在強調的功能的確很重要的時候，才會起作用。但如果這一功能的使用率本來就低，那么更有可能說明這一功能對用戶而言沒那么重要。如果你沒有真正以人為中心來思考問題，很難發現這一點。

歸根結底，雖然語言只是一個小的方面，但我相信它是非常重要的。多關注一點在工作時使用的談話方式，如果你是為人設計的，那么請用人們更熟悉的語言。

舉例來講：

• 我們要如何增加用戶對這個功能的使用？=> 是什么讓這個功能對人們更有價值？
• 為什么這兩方面不夠統一？=> 讓我們確保，用戶不會因為這兩個看起來相似但有不一樣功能的東西而感到困惑。
• 點擊率真的很低，可能是因為強調得不夠。=> 人們可能會意識不到這個功能的存在，因為這實在太容易被忽略了。
• 我們發現很多用戶流失，我們該怎么辦？=> 那些試用過我們產品的用戶不會再回購，為什么會這樣呢？
• 這個設計需要更多的呼吸空間。=> 用戶閱讀瀏覽信息的體驗應該更輕松、愉悅。
• 我們應該將這點設計地更簡潔一些。=> 用戶應該能在第一眼就注意到最重要的信息，并知道他們應該做什么。不該用過多的選擇給用戶壓力。
• 這一指標需要提升，現在的曲線看起來并不理想。=> 我們的產品還沒能讓用戶覺得足夠有用，從而進一步回購，所以我們應該提升我們所提供的價值。

• 藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

  
  

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

該報告是百度人工智能交互設計院基于過去一年多對AI領域前沿技術、產品和設計的深入研究和洞察，結合產業界和學術界的經驗探析而來。AI賦能的人機交互革新了大眾的生活形態，未來，AI加持的人機交互模式又會呈現出什么樣的態勢呢？

《報告》從“人機交互介質”、“交互對象”、“AI應用場景”、“人機關系”等方面總結了AI人機交互的八大趨勢。

趨勢一：語音交互技術進步，更趨向人類自然對話體驗

研究公司Ovum預測稱，到2021年，地球上的語音助手的數量會和人類一樣多，人們會越來越傾向于向語音助手尋求情感上的幫助。在AI人機交互中，語音交互技術在用戶終端上的覆蓋最為廣泛。

以智能音箱為例，有數據顯示，2018年全球智能音箱市場同比增長200%。其中，中國智能音箱市場增速達到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業均加速了用語音交互技術開啟大眾智能生活的步伐。截止2018年12月31日，搭載百度對話式人工智能操作系統DuerOS的智能設備激活量也已超2億。

目前，語音交互技術已經加速在智能家居、手機、車載、智能穿戴、機器人等行業的滲透和落地?！秷蟾妗分赋?，未來隨著語音技術的不斷完善，語音交互的自然度將進一步提升，并愈加趨向人類自然對話的體驗。具體表現為：語音交互將從機械的單輪對話進階到更流暢的多輪對話；合成語音更自然、真實，接近真人水平；語音交互具備聽覺選擇能力，提升多人對話體驗；語音交互將支持多種方言，并針對細分群體進行差異化設計。

趨勢二：人臉、手勢等通道更多出現在產品中，多通道融合交互成為主流交互形式

媒介學家雷吉斯·德布雷（Régis Debray)曾提出：“技術能實現不同區域里不同文化的人之間的連接”。隨著技術的發展，人與人之間的連接早已不成問題。當前，AI技術更是拓展了人與智能體交互的通道。除語音交互外，計算機視覺技術的發展已使得智能體實現了通過識別人臉、指紋、面部表情、肢體動作等人體信息，而更加快捷多元地與人類進行交互。但是不同的交互通道在有其獨特優勢和場景適用性外，也有一定的局限性。

《報告》認為，未來，人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式，為人類打開更多的交互空間和應用場景。具體表現為：人臉檢測及識別聚集更細維度的面部特征，拓展更多的交互空間和場景；空中手勢交互將成為新熱點；觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道；生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。

趨勢三：智能體開始擁有明確的人設

近期，明星“人設”崩塌已成大家茶余飯后的熱門話題。但是你想過，智能體也將擁有明確的“人設”么？《報告》認為，未來，用戶可以更加明顯地感知到智能體鮮活的“人設”。

所謂智能體的“人設”是指，用戶在與智能體的互動過程中，根據感知到的綜合特征推斷出一種具有一致性的角色形象，一般由性格（如外向、善良等）、關系（如助手、朋友等）和基本屬性（如性別、年齡等）構成?！秷蟾妗分赋?，目前，智能體人設的設計和表達主要聚焦在語音（如音色、語調等）和語言層面（如表達方式），并且通常局限在部分場景、部分話術上，缺少一致性和全局感。

《報告》提出，未來，智能體人設將從語音、產品外觀、虛擬形象等多維度進行設計，甚至聘用編劇設計具有統一形象特點的話術，利用混合現實（MR）、全息投影等技術將人設具象化，讓用戶在不同場景下均感受到智能體一致、明顯的人設特征。換句話說，未來，智能體的人設會具有很明顯的特征，但不會輕易崩塌。

此外，《報告》還認為，打造用戶喜愛的人設也將成為企業在市場競爭中形成差異化、吸引更多用戶的重要方式。

趨勢四：智能體在被動交互外，開始出現主動交互行為

技術的發展雖然革新了我們的生活方式，但是長久以來，人機交互一直延續著人類“輸入”，機器“反饋”的循環模式，人類始終是主動的，機器始終是被動的。

《報告》認為，人工智能賦予了機器情境感知和自主認知能力，使我們有機會構建機器主動服務于人的交互模型。智能體出現主動交互行為的具體表現為：主動交互越來越“貼心”；主動交互在“家”和“車”的場景下率先商用落地；主動交互將提升公共場景下人機協同的效率。

趨勢五：智能體開始擁有情感判斷及反饋智能

2014年在北美上映的動畫片《超能陸戰隊》中的機器人大白，以對主人公關懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機器人。令人欣喜的是，具有情感判斷和應對能力的智能體正逐漸成為現實。

過去20年，在人機交互中，機器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現的如情感陪護機器人、智能音箱、智能汽車等已經初步具備一些情感識別能力，可以根據不同的場景、對象，進行適當的情感交互。

《報告》指出，未來，情感計算技術的提升及硬件升級將賦予智能體在“視”“聽”等方面更強的情感識別能力；同時智能體對于人類思維理解、情景理解能力也將更加完善，情感交互能力將更智能、更體貼。

趨勢六：AI對特定人群的關懷得到快速發展和應用

人機交互的發展為兒童、老人、殘障人士等群體更便捷地利用機器獲得服務，提供了充分可能。當前市面上已經出現大量針對兒童教育的AI產品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動需求，特別開發了兒童語音識別引擎，并定制兒童語音播報音色及對話邏輯，陪伴兒童一起成長。在養老領域，為老人提供陪聊、提醒等陪護服務的智能產品也被AI企業提上了日程。此外，少數AI產品也開始專注殘障、病患等更加細分的人群，如2018年11月，百度推出了AI眼底篩查一體機，幫助患者快速篩查眼底疾病，為基層醫療帶去了極大的便利。

《報告》提出，未來，AI對人類的關懷將得到快速發展和應用，覆蓋更加細分的人群和更深入的場景。為兒童，AI將從易于交互到提供心智陪伴的服務；為老人，AI將縮小他們與科技的鴻溝，助推他們開啟品質生活；為感官殘障人士，AI將幫助他們重獲對世界的立體感知；為特殊疾病人群，AI將提供預測、診斷和康復服務。

趨勢七：智能設備互聯互通，多場景銜接

以BAT為首的互聯網企業，在2018年紛紛調整組織架構，轉向To B。巨頭重提產業互聯網戰略成為當前市場新現象。此現象背后，正是AI、5G、云計算等新興技術的發展與升級。2018年的政府工作報告，進一步強調了“產業升級的人工智能應用”?！爱a業化”和“應用化”成為未來幾年人工智能的兩大發展方向。

《報告》指出，隨著AI技術的進一步成熟和落地，及其與大數據、IoT的結合，AI將從單品智能、獨立場景到互聯智能，場景融合進階。智能設備將互聯互通，場景將進一步融合，實現多場景銜接；VR/AR將促進線上和線下、虛擬和現實的聯結，未來，VR會加速拓展到更多的產業和實體，AR中的現實與虛擬將從簡單疊加到有機融合，實現用戶可以源自自然意識進行人機互動。

趨勢八：人機開始走向深度協同，信任構建成為首要突破點

2018年6月，百度研究院發布并開源“神經條件隨機場”的AI算法。該算法擁有強大的腫瘤病理切片檢測能力，可以大幅提升醫生閱讀病理切皮的效率和準確率。人機協同即，通過人工智能增強人類智能，讓人工智能成為人類智能的自然延伸和擴展。

目前，人機協同已在工業領域初步實現，而隨著智能體從工業生產領域向商業服務、社會服務和家居服務領域拓展，人機將走向深度協同?！秷蟾妗氛J為，人機深度協同可以最大化發揮雙方優勢，實現合作共贏。

而人們對AI的信任，是智能體全面進入人類工作和生活，實現真正人機協同的前提。即，信任構建成為了實現人機深度協同的首要突破點。與此同時，AI倫理道德將更加細化，成為所有從業者需遵守的行業準繩。AI行業的發展在帶給大眾便利生活之時，避免算法歧視、保護人類隱私、尊重人類價值等也變成了從業者們亟需重視的問題。

最后，《報告》指出，AI時代的人因工程是一個真正的系統工程。而每個人機交互行業的從業者都需要擁有AI思維。最重要的是，中國的人機交互設計和研究者們將首次和發達國家站在同一起跑線上，我們有機會去定義這些體驗標準，而不再是追隨或遵守。

AI時代大門緩緩開啟，屬于中國和中國企業引領世界前沿的新時機已到來。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

之前聽一位同學在公司看國外作品學習的時候，公司的一個老員工發現了，就過來語重心長地和他說，你看這些東西沒用的，學不到東西，就是在浪費時間等等，類似這樣的話說了一堆。聽到這個話題的時候就特別的親切，因為在開始接觸設計的時候，和那位老員工的想法一樣。但是隨著對設計的理解越來越深，接觸的項目多了以后，這種想法慢慢就淡化了。

其實新人對研究國外作品這件事存在誤區是很正常的，畢竟應用的文字不一樣，內容多數我們也看不懂，把時間花在這上面給人的第一感覺確實有點不合適，哪有直接去看國內的作品來得過癮。我們暫時拋開作品的數量與質量不談，來聊聊這個話題。

我們平時在工作中完成的作品，里面基本都會包含文字、圖片或圖形、色彩這幾種基本元素，不管你做的是海報、logo還是畫冊都離不開它們，比如純文字類型的海報、公告、條幅。

純圖片形式的燈箱、畫冊、展板、品大片。

純圖形的UI圖標、布展裝飾、logo徽章。

包括純顏色的手機屏保、背景墻之類的設計，這些基本的設計元素，會在設計作品中單獨出現。

而更多的設計作品都是這幾種元素同時出現的結果，這些海報中，文字、圖片、圖形、色彩這幾種元素都占全了。注意，這些海報用的都是中文，屬于國內的海報對吧？也能夠在這上面學到一些東西，那我們換幾張國外的作品看看，有什么不一樣的地方。

日本的、歐洲的等等都是優質的設計作品，我們可以來分析一下這些作品，風格、技法、表現形式暫時可以拋開。

構成他們的元素和國產海報有什么區別？都存在文字、圖片、圖形包括色彩，唯一的區別就是上面說的，不同的國家，使用的文字會不太一樣。那么這種文字上的差異真的會影響到我們對這個作品的研究、欣賞嗎？

答案很明顯，不會的。了解一些構成知識的同學都知道，構成版面的基本元素就是點、線、面，而文字、圖片、圖形包括色彩，他們在版面中整體來看，本質上就是點線面的具象表現。那我們在欣賞這些作品的時候，完全可以把文字看成是點線面的存在，這樣的話也就沒有必要糾結他用的是哪個國家的文字了。

像這張國外的海報，我們把這里存在的視覺元素標注出來，他們本質上就是這些東西。

國內的也一樣，如果你看到的是這些東西，還需要糾結這是哪個國家的作品嗎？

版面中的所有視覺元素，都可以看成是點線面的存在。

來做一組實驗，這張英文海報，我們把這里面的英文，替換成漢字。前后對比一下，海報的整體感覺，基本沒有出現什么變化。

再換一組，感覺基本一致。

再來一組，這回我們把英文替換成日文。類似這個版面構成的形式，我們把文字替換成英文、漢字，變化也不會很多，依然很美觀。我們研究、學習、欣賞優秀作品的時候，一定不能受到類似「看國外的設計沒用」這類思維的束縛，不然的話你會錯過很多的。

不光從構成的角度看這個問題是這樣，其實從設計發展的角度來看，也能得出同樣的結論。因為現代設計教育的起源來自德國的包豪斯，后來包豪斯的理念傳到了美國，又通過美國傳遍了整個世界。包括我們現在學習的平面設計體系，都是一脈相承的。從這個起源的角度來看，也不存在國內、國外那么大的差別。都是一個門派的，只要做的好，那看誰的都一樣。說了這么多，應該能看出來，我們是鼓勵大家去多看優秀作品的。那么堅持做這件事，又能得到什么呢？下面就來說一下，為什么要養成欣賞優秀作品的習慣？

欣賞優秀作品的習慣

先來看看這個習慣能給我們帶來的好處有哪些。

1. 提升審美

長時間欣賞優秀的作品，會對我們個人的審美能力有質的提升，幫助我們開闊眼界。眼高手低雖然是個貶義詞，不過這對于正在成長的我們來說是好事，最起碼能讓自己對自己的能力有一個比較清晰的認知，知道自己做的不夠好，這樣會有動力不斷的鞭策自己學習新的東西，把專業做到更好。

2. 培養興趣

如果我們對這個行業沒興趣的話，就算你再有設計天賦，也很難做好的。堅持看優秀的作品給我們提供持續的刺激，說不定哪幅作品就非常合你的胃口，勾起你的興趣，讓你花時間去研究。

3. 利用碎片化的時間學習

平時都很忙很累，再懶一點，就沒什么完整的時間學習。這個時候如果能把碎片化的時間利用上，我們坐地鐵、坐公交、午休、睡覺前，包括上廁所的時候都是可以通過欣賞這些優秀的作品提升自己的，這也是一個提升學習效率的習慣。

4. 為設計提供靈感和參照

這也是最重要的一點，不知道你有沒有一接到項目，大腦就一片空白的感覺，是因為你干活干的太少的原因嗎？不一定，有不少人每天不停的干活還這樣。其實出現這種狀況的主要原因就是看東西看的太少。很多好的形式我們見都沒有見過，怎么可能有印象，沒印象就更不可能把他們應用到我們平時的工作中了。

所以說，我們想有好的想法、無盡的靈感，必須通過看優秀作品這個成本低、見效快的方式來提升了，并且通過我們持續不斷的積累，得到的東西會越來越多，這是一種可以不斷提升自己的方式。

當然了，欣賞優秀作品也是有方法的，走馬觀花的看一大堆，最后能得到的可能只有審美的提升。就是感覺自己周圍的人做的東西都是垃圾，輪到自己做，發現自己也很垃圾。那為了避免這個悲劇發生在你的身上，下面分享一些欣賞優秀作品的正確方法。

如何欣賞作品

我們欣賞作品的場景主要有兩種，第一種是有目的、有針對性的去看；第二種是沒有針對性的看。這兩種場景要看的東西差不多，細節上會有一些差異，我們先來了解一下有針對性的。一般來說，有目的有針對性指的是我們接到了具體的項目，但是這個項目以前沒有接觸過，需要了解一下別人都是怎么做的，然后帶著問題去尋找答案。

先從項目要求入手，就是看看你做的內容是關于什么的，比如你要做日本壽司海報，就去搜集這方面的作品。有些同學在搜索的時候很實在，要做關于壽司的海報就專門去找日本壽司的作品，這種方式的缺陷特別明顯，如果你要做的這個項目品類能找到的優秀作品很多還好，不過多數情況下，優秀作品是不那么好找的。這個時候把思路打開，選擇的余地就會大很多。

比如把日本壽司海報這個關鍵詞縮減成日本料理海報，優秀作品的數量會成倍的增加。

或者你要做的是海報，那我們搜索的時候除了海報，還可以找日式的包裝、畫冊。

網站、插畫等等作品，都會給我們帶來很多的思路。

數量的問題，這也是我們推薦看國外優秀作品的一個原因，光去找中文的作品，在一個小品類里，很難找到足夠多的優秀作品，一般的東西又沒有什么學習的價值，這時候加入國外的東西會讓我們的選擇余地更大、思路更廣。我們在搜集作品的同時，連帶關于項目的一些圖片、文字材料都可以一起搜索，這樣能幫助我們更深的理解這個項目，學到更多的知識。

其實學習這個行為不是非得上學、看書才能學，我們設計師在接觸各種項目的時候，通過與客戶溝通和查閱項目相關資料的過程也是在學習，而且我覺得這種學習方式比我們單純的去上學讀書更深刻、實用。學到的東西也是在工作中甚至生活中用得上。

在找到這些優秀作品以后，就可以嘗試去尋找這些作品共同的規律。

比如文字，如果文字屬于同一種題材的設計，就算是不同國家的作品，我們也會在里面找到一些共同的特征。比如這些關于食品的字體，都會表現出屬于食物的那份圓潤的特征，這就是一種規律。這些規律性的東西總結出來，就可以嘗試應用到自己的作品中。這個是學習大的規律，在這個大規律的基礎上，再去關注這里面的一些小的細節。想做好東西，稍小的細節也很重要。

再比如文字組的形式。文字的主要作用是傳遞信息，那么如何、美觀的把文字表現出來就要靠文字組了。一款作品做的是否優秀，通過觀察文字組的處理是否細致，很容易看出來。信息的層級關系需要文字組來表現，主標題、副標題、段落文字、時間、裝飾性的文字等等，這些文字可不是隨便扔到版面中就行了，它們都是通過設計師的處理，以文字組合的形式分布在版面的各個位置。

這里面每一個文字組合都是一個小的個體，比如很常見的日期的處理方式就有很多，像這張海報里日期文字組合的處理方式。

我們看到了覺得這個形式不錯，就可以記下來。那這些處理方式我們見過了，遇到合適的項目，換一個字體，或者調整一下數字，就能應用到自己的項目中了，這些組合形式，你沒看見、沒有印象，自己拍腦袋是很難想出來的。

包括這種產品或圖形的表現排列形式，在做畫冊、雜志、頭圖、詳情頁、海報、展板的時候經常會碰到。

自己排不好的話，就可以借鑒這些作品的形式和規律，再上手就輕松多了。如果你想做的是logo設計，也可以去觀察優秀作品的細節，比如字體與圖形的比例、文字與圖形的間距是多少、文字與文字的間距如何控制，包括別人的創意點在哪，這些東西都是可以在別人的作品中學到的。

△ 《高手的平面課堂！解鎖LOGO設計新技巧》

就像異形同構這篇文章，你看到了這類作品，就能回憶起這款 logo 使用的是異形同構中的邊線同構這個方式設計的，這種方式有哪些特點？如何能設計出類似的作品？教程里都講過了，這樣又把之前學到東西鞏固了一遍。

△ 《平面設計中，如何通過“抄襲”優秀的作品成為高手？》

包括你看過的作品，他們的網格是怎么劃分的。使用的是什么樣的字體、構圖如何都可以作為我們思考學習的方向，關于這幾點的詳細內容，在之前的文章里很細致的講過，沒看過的同學可以去看看。

如果是沒有針對性的看作品，和上面的思考路徑是一致的，只不過是利用碎片化的時間來學習而已，更靈活一些，可以快速瀏覽，也可以觀察細節。如果你有收藏整理這些材料的習慣會更好，拿出來就能用，收集整理的越多、越細致，以后工作起來越輕松。

案例演示

所謂的創意就是我們把不同的元素重新發散、打散、重組呈現的過程。能夠保證有想法、思路的前提就是見識，要見過很多好東西，有了很深的印象以后才能憑借這些印象，學到的東西設計成新的、屬于你自己的作品。下面給大家演示一遍，我們看多了優秀作品以后，再去做設計的時候會發生什么變化。

比如我們要用這些材料來設計一款網頁頭圖。

看到這些材料，可能會想到以前在哪見過，類似這種左右放置的圖配文形式。

產品價格的處理方式見過這樣的。

文字的形式全部使用黑體和無襯線字體，很多作品都是這樣處理的，放在一起很和諧。

還見過所有的文字組，都以左對齊的形式進行排列的作品。

只要有印象，我們在設計的過程中就會下意識的往這些方向上靠，設計出的作品也會接近前面的那些規則。

在這些規則影響的基礎上，如果我們還見過襯線體搭配無襯線體的作品，圖疊字的形式，也能做出接近的風格作品。

同樣內容，不同的表現形式。你看過的優秀作品越多，選擇的空間就越大。

我們再來看這個案例，一張藝術展的海報。

整體的骨架是這樣的，這種骨架布局的方式來自于左邊這個案例，類似的形式有很多。

主體文字組合的結構是因為見過類似的組合方式，在文字量近似的情況下，我們的文字組合也可以設計成類似的形式。

如果說我們設計的這個文字組合之間，距離稍遠，也有很多的作品會使用線的分割來解決這個問題。

包括其他文字組合的布局方式，也是參照這種軸線式的排列方法。文字使用的是宋體搭配西文襯線體的方式，中文的宋體和西文的襯線體具有類似的筆畫特征，基礎文字的統一性能夠得到保障。

將和主題相關的照片填充到劃分好的網格中，這里面使用的照片是同一張照片的不同局部，這種對照片重復的處理方式也很常見，在給版面增加變化的同時，也會制造出一定的故事性，引發受眾的聯想。

一張海報從無到有的創作過程。

想設計出不錯的作品，沒有大量的積累，對優秀的作品沒有印象是肯定行不通的。

總結

怎么樣，是不是覺得多看看優秀的作品還是有用的？不管是國外的、國內的都一樣能學到很多。類似我是做電商的，看印刷品的設計沒用；我是做包裝的，看版式的作品沒用；我專門做商業項目的，看藝術類的項目沒用；我們公司是做金融產品的，那看其他行業的東西都沒用。遇到這種言論，我們可以冷靜的思考一下，是真的沒用，還是這個人，他不會用。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

圖片相較于純文字具備更強的視覺性，所以選擇合適的好圖片就至關重要，下面為大家介紹三種思路。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

為什么你的設計看起來很亂？在此之前我們先了解一個概念，我們怎樣看這個世界？

我們通過眼睛看世界，眼（又稱眼睛，目）是一個可以感知光線的器官。那么結論來了，我們看到這個世界，其實本質就是看到了光。舉個例子，晴空萬里時我們可以看到很遠很遠的距離，反之在漆黑的屋子里，我們什么都看不見。

我們再來了解第二個問題，眼睛是怎樣成像的？眼睛通過調節晶狀體的彎曲程度（屈光）來改變晶狀體焦距獲得倒立的、縮小的實像。簡單來說，成像原理就是晶狀體來改變焦距，簡單一點解釋決定成像的重要因素是焦距。

你的設計看起來很亂，往往在這幾個方面出了問題：

• 明暗關系紊亂；
• 視覺焦點不明確，畫面沒有重點；
• 顏色雜亂，毫無章法。

明暗

明暗是指畫中物體受光、背光和反光部分的明暗度變化以及對這種變化的表現方法。明暗分亮面，灰面，暗面，以及明暗交界線，反光五大調子。單個物體明暗關系，暗部（反光，投影）＞灰面＞亮面。整體關系，靠近光源暗部＞遠離光源……畫畫核心畫的是光，遵循光照的自然規律即可。

去色檢查畫面明暗關系

從上至下三張圖依次是去色之后的黑白圖；運用色相和飽和度給畫面賦予一個顏色的單色圖；原圖。

從下圖可以粗略得出結論，明暗（光源色）+固有色=色彩。調色之前先處理明暗，畫面顏色處理起來就非常簡單了。

最近火爆的國產硬核科幻片海報，即使去掉顏色，黑白關系依舊明確清楚。好的設計即使沒有任何顏色，依舊是一副好的素描畫。我所理解的明暗關系與色彩的關系相當于人體與衣服妝容的關系，對于一個美女是否漂亮，衣服妝容的搭配是你能達到漂亮的上限，然而你的臉型，身高，氣質，皮膚才是你能達到的驚為天人的基礎。

視覺焦點

視覺焦點究其概念，是讓我們的視線多停留幾秒的視覺元素，我們在畫面中第一眼就能看到的元素，畫面中的「主角」。

對畫面的視覺漏斗進行分類：

• 視覺焦點：想看不見都很難，表現突出；
• 重要元素：不經意就能看見；
• 輔助元素：仔細看看也能看見（類似買理財產品的最右下角的小標注，「投資有風險，理財需謹慎」）

高斯模糊法看視覺焦點

瞇著眼睛看形，睜著眼睛看細節。把畫面模糊調到一定程度，然后看畫面，如果畫面仍然能看清楚「主角」，那么畫面的視覺中心就是可以的。下圖畫面即使模糊了，我們依然能看清「男主角」沈騰以及飛馳人生四個大字，雖然原圖背景復雜以及其他裝飾物很多，依然不影響畫面的整體協調感，元素多且雜而不亂。

這上面的兩個例子看出，即使畫面模糊了，還是能清晰看到畫面表達的主題。那么模糊度多少合適呢，一般調整到上面所說的視覺漏斗中重要元素看起來剛好模糊到看不清就可以了。

色彩

色彩是附著在物品上由于光的照射產品漫反射的顏色，可以粗略按色彩元素分為光源色，固有色和漫反射產生的環境色。按照長期的實踐經驗來看，通常比較和諧的配色方式是除了產品的固有色之外，盡量把光源色和環境色統一在三種顏色（黑白灰不算顏色）之內，顏色比例盡量類光源色的主色調占據畫面百分之八十的面積，其他環境色作為補充。

色彩插件檢查配色

谷歌插件 palette.site 能分析出畫面顏色的狀態以及畫面中幾種主要的顏色，借助這個插件能很輕松檢查畫面是否超過了3種顏色（黑白灰不算顏色），如果超過三種顏色，那么頁面就需要做減法，或者將顏色統一在一個色系里，用明度以及飽和度區分。

插件的使用方法：可以直接使用瀏覽器下載，然后也可以在瀏覽器中選擇一張圖片，右鍵「在新標簽中打開圖片」，然后再「點擊右上角的插件按鈕」分析顏色狀態。

從上面的兩個案例中可以看出，兩個 banner 的顏色分析基本都在三種顏色以內，特別是下面的看起來比較復雜的顏色，總共分析的顏色也就紅黃藍，其中藍色還是點綴色的存在。

今天的內容就說到這里了，我們回顧一下重點內容，解決畫面看起來很亂可以有以下方法：

• 去色檢查畫面明暗關系
• 高斯模糊法看視覺焦點
• 色彩插件檢查配色

設計雖沒有近路，但可以少走彎路。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

Tooltips并不新鮮，但它們仍然被誤用。

定義：Tooltip是當用戶與圖形用戶界面中的元素交互時出現的簡短、信息豐富的消息。Tooltips通常會在兩種情況下出現，鼠標懸停時或鍵盤懸停。(以防萬一你不知道鍵盤懸停是什么: 為了使用頁面中激活的元素，用戶通常需要用鼠標移上去或使用鍵盤上的tab鍵切換上去。鍵盤懸停指的是保持鍵盤聚焦在同一個元素上一段時間。)

工具提示(Tooltips)可以依附于頁面中任何激活的元素（圖標、文字鏈接、按鈕，等等）。它們為配對的元素提供描述或解釋。因此，tooltips與界面中的元素相關聯并具有特定性，并不會用它來解釋大圖或整個的任務流。

有一個很重要的地方是，tooltips是用戶觸發的。因此，在頁面中主動彈出來告知用戶新的功能或如何使用一個具體的功能的提示不是tooltips。

由于tooltips是由懸停手勢觸發出來的，他們只能在設備上通過鼠標或鍵盤觸發。在觸摸屏上通常不可用。（將來，tooltips可以在眼控設備上觸發，當用戶將視線聚焦在界面某個特定元素一段時間便可觸發）

Tooltips vs. Popup Tips

盡管tooltips主要是限于桌面電腦和筆記本，但是在觸摸屏上，它們還有一個類似姊妹元素：popup Tips。Tooltips和Popup Tips都有相同的目標：提供有用的、更多的內容。下面這個表格展現了二者主要的相似點和不同點。

本文將重點介紹tooltips及其在桌面網站上的使用。

Tooltip使用指南

1.不要在任務的關鍵信息處使用tooltips

用戶不需要找到工具提示即可完成任務。當Tooltips為一些用戶不熟悉的表單字段提供額外的解釋，或者解釋一些看起來不尋常的需求時，它是最好用的。請記住，tooltips會消失，因此指令或其它可直接操作的信息，比如字段需求，不應該出現在tooltip中。（如果是的話，用戶就不得不在他的工作記憶中記住，以便順利使用）

Don't:

Amtrak網站將密碼要求放在Tooltips中（通過鼠標懸停訪問）。這類信息對于用戶成功完成“創建賬戶”流程至關重要，因此應始終顯示在屏幕上。

Do:

FedEx使02-用tooltips為運輸表單字段提供額外信息。比如，電子郵件字段中有一個tooltip，說明列出該字段的原因（此tooltip通過鼠標懸停訪問）

2.在tooltip內提供簡短有用的內容

明顯的或有冗余文本的tooltips對用戶無益。如果你無法想到特別有用的內容，就不要提供Tooltip。否則，只會給UI增加無用信息，并且浪費任何一個看到該工具提示的用戶。

此外，長內容也不再是“提示”，所以請保持簡短。Tooltips是微內容的——短文本旨在自給自足。你的文本可以是單行或者多行，只要它是有關聯的并且不會遮擋相關內容。

Don't:

在Sprint網站上，帶有“添加新行”的按鈕上還有文本“添加新行”的tooltip。這個tooltip是重復且沒必要的。

Do:

阿里巴巴的搜索框里有一個無標簽的相機圖標。當用戶鼠標懸停到這個圖標上時，會出現“通過圖片搜索”的tooltip。這個功能對很多用戶來說都不熟悉，因此這里描述圖標用途的tooltip很有幫助

3.支持鼠標和鍵盤懸停

Tooltips只在鼠標懸停時出現的話，對于依賴于鍵盤導航的用戶來說不夠易用。確保在你的設計中tooltips可以通過鍵盤無障礙訪問。

Don't:

麥當勞的網站不支持通過鍵盤觸發tooltip。當用戶選中同一個頁面（底部)時，鼠標懸停啟動的tooltip（頂部）不可用。

Do:

維基百科支持鍵盤觸發tooltips。鼠標懸停和鍵盤懸停時會出現相同的tooltips。

4.當附近有多個元素時使用箭頭指示

箭頭有助于清楚的識別工具提示和哪個元素相關聯。當附近有幾個元素時，箭頭有助于避免混淆。

Don't:

PowerPoint有幾個圖標彼此靠近。如果沒有工具提示箭頭，則很難知道哪個工具提示對應哪個工具。

Do:

Whiteboard使用工具提示箭頭來提示所選圖標。盡管圖標間距很大，但手型指針的提示能讓指示更清晰，視覺噪音最小。

5.在網頁中使用統一的Tooltips

Tooltips很難發現，因為它們通常缺乏視覺線索。如果tooltips在你的網站中沒有規律的出現，用戶將永遠不會發現它們。保持一致并為設計中的所有元素，而不是只針對某些元素提供工具提示非常重要。如果只有一些元素需要額外的解釋，使用彈出提示而不是工具提示。

Don't:

Business Insider網站為其導航菜單里3個圖標的其中兩個提供了tooltips。（注：在網站的主頁上，Globe圖標確實有一個讀取Globe圖標的工具提示，但是這個標簽沒有任何幫助，沒有說明它的功能：語言選擇器）一般來說，我們建議不要使用沒有標簽的圖標和隱藏標簽的tooltips，但是當工具提示不一致時，這種問題更嚴重。

Do:

Todolist始終如一的使用tooltips。主要部分的三個圖標都有tooltips.通過一致性來實現用戶的潛在期望。

更多推薦

• 為無標簽的圖標提供tooltips

大多數圖標都有一定程度的概念模糊，這就是我們為所有圖標推薦文本標簽的原因。如果你堅持不為網站中的圖標提供文本標簽，至少你可以給用戶提供一個描述性的工具提示。

• 確保tooltips和背景有一定的對比

用戶通常會查看他們點擊或懸停的位置。然而，由于tooltips的隱蔽性，一定對比度對于確保用戶能看到工具提示中的文字很重要。此外，對于有視力障礙的用戶，在白色頁面中使用淺灰色tooltips會很難閱讀。

• 定位tooltips，以便他們不會遮擋相關內容

當tooltips遮擋了與它們相關的內容時，會導致用戶重復操作（即移動鼠標關閉工具提示，再次讀取信息或字段，懸停以顯示工具提示）。測試你的工具提示位置確保不會擋到與用戶目標相關的其它內容。

結論

當用戶無法理解某項功能時，tooltips是一種防錯方式。如果用戶遵循其它的設計指南（比如，文本標簽加圖標），那么今天的很多tooltips用例都可以忽略。重要的信息應始終在頁面上顯示。因此，tooltips對于用戶完成重要的任務并不是必不可少的。

我們越是追求極簡主義，我們需要的tooltips就越多，我們的用戶就需要越多的學習成本。下次，當你考慮tooltips的時候，問一下自己：為了用戶完成某個任務，這個信息是否需要？如果答案是否定的，那么工具提示非常合適。否則，信息應直接出現在頁面中。

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

作者： John Saito | 翻譯： 正_青_春 審校： 凌藝蜻

我從設計中學到的一件事是你無法取悅所有人。你可以嘗試，但你最終會得到一個大打折扣的設計，而且無法讓任何人滿意。

當你試圖讓所有人滿意時，你會失去你的重點，你會開發一些人們不需要的功能，你所寫的用戶也根本不會去讀。

好的設計就是完全圍繞一個清晰的目標。這一點非常重要！

過去的一個月里，我一直在和在設計中有明確清晰目標的設計師交流，他們來自Google，Airbnb，Slack, Dropbox等等, 我想窺視他們的內心，看看是什么驅動他們做出決定以及是什么在指引他們的設計，以下是我學到的一些內容。

UXRen

1、從問題開始，而不是答案

 你是否注冊了新產品，然后第二天就忘記密碼？這已經無數次地發生在我身上。如果我向你求助，你會建議我做什么？

 有些人可能會建議我直接寫下密碼，輕松，問題解決了。但是安全專家不會推薦寫下密碼，因為那并不安全。

好的設計師不會直接跳到解決方案，他們會花時間去理解問題。

 那么，好的設計師會怎么做？好的設計師不會直接跳到解決方案。他們會花時間去了解問題。他們提出問題并找出原因、背景和限制：你一般怎么記錄你的密碼？你總是隨身攜帶手機嗎？你有多少密碼？

你越了解問題，你越能找到解決問題的切入點。深入理解給你自信，深入理解就是把你的初步想法轉化為實際深入的觀點。

我詢問了Google 智能助理的產品設計師Adriana Olmos關于她解決問題的方法。當她的利益相關者提出需求時，他們經常根據解決方案而不是問題來定位他們的想法?！拔以噲D去了解他們解決問題的理論基礎是什么”她說，從那時起，我與他們一起去了解用戶最底層的需求，并了解背后的原因，然后來做優化迭代。了解了原因，如何去做就順理成章了。

了解了問題的來龍去脈，你就可以找到解決問題的方法了。 評論(0) 瀏覽(2867)

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。