之前總結了B端表單頁設計的一些問題，其中信息錄入是比較重要的部分，信息錄入中選擇錄入是最為常用及復雜的組件，平時工作中遇到的相關問題也是最多的，此次針對選擇錄入常用組件的應用場景和交互規則進行總結

選擇錄入的類型比較多，可以簡單的分為兩大類即

基礎選擇組件：單選/多選/開關/下拉選擇

復雜選擇組件：時間/日期/穿梭框/級聯選擇/樹形選擇等

B端表單業務場景比較多，很多場景具有通用性，有的場景卻有一定的獨立性，需要了解場景及用戶的需求和組件的適用性才能提高用戶操作體驗和效率 

一.單選框

單選框(Radio)是表單中比較常用的控件，它通常被用來從一組互斥的相關選項中選擇一個單獨的選項。

當點擊一個未選中的單選名時，它會被選中，其他按鈕為未選中狀態。英文命名Radio來源于舊收音機上的按鈕，用于舊收音機不同頻道的切換，當一個按鈕被按下時，其他按鈕會彈起，使被按下的按鈕處于唯一被選擇狀態的按鈕。

• 使用場景

1.當用戶需要在一組互斥的選項中進行單一選擇時使用單選框；如果要進行多個選擇，推薦使用多選框。

2.當選項數目在2-7個之間時使用單選框；如果選項超過7個，推薦使用下拉框。

3.如果有兩個含義相反的選項，如“同意”和“不同意”，“接受”和“拒絕”等，建議使用一個多選框或者開關勾選為同意，不勾選為不同意。

4.如果每個選項都有同等的優先級，沒有推薦選項時，使用單選框；如果需要向用戶推薦某個選項，可以使用下拉框。

5.如果提供給用戶的選項很熟悉，看了第一個選項就能預見到所有的內容，如“周一”，那么后邊的選項是“周二到周日”等，這種情況下就不需要將所有的選項都展示出來，可以使用下拉框來簡化界面。

• 交互邏輯

1.選項的設置，在設計單選框的選項時，要充分考慮用戶的實際情況，給出的選項要覆蓋到所有的情況。應該滿足“互斥”的原則，因此選項之間要避免存在交集，同時也要注意選項覆蓋要全面，不能出現遺漏。

例如，要考慮到用戶不進行選擇的情況，這時需要提供一個“無”的選項。給出的選項有可能都不符合用戶的情況，如果所有的選項用戶都可能不會選，就需要提供一個“其它”選項。

2.默認選項，一般情況下為第一個選項，需要選擇最安全，最有可能的選項作為默認選項，提前預判用戶的選擇，提升用戶選擇效率。

3.選項排序會影響用戶選擇效率，所以需要遵循一定的原則。按照邏輯順序，選擇概率由高到低；或者按照復雜程度排序，由簡單到復雜；也可以按照操作后風險排序，將最安全的操作放在前邊，由風險最低到最高進行排序

4.排列對齊方式，豎直排列相對于水平排列而言，容易讀取和定位，可以提高用戶的瀏覽效率，所有的選項進行左對齊，不用受制于選項的標簽文字長短，但豎直排列會占用較多的垂直空間；水平排列要注意每個選項之間的間距，間距盡量大一點，要不然用戶會分不清單選按鈕的文字到底是在前邊，pc端水平空間比較大，所以相對而言，水平排列的方式更加常用。

5.交互區域，單選框的面積較小，用戶在點擊的時候會比較困難?？梢酝ㄟ^擴大點擊區的交互區域來提高易用性，將標簽文字也設置為可點擊，增加操作區域的面積，方便用戶操作

6.文字標簽，每個選項的文字都要簡潔明了的表達該選項所代表的含義。一般使用短語而不是句子，因此不需要以句號來結尾。盡量保證每個文字標簽用語的表達的一致性，不要出現有的用名詞，有的用動詞的情況。如果需要解釋說明，可以在選項下方使用單獨一行文字。如果標簽文字無法進行精簡，必須使用多行文字，將單選按鈕與文字頂對齊

7.交互狀態，每個選項都有選中和未選中兩種情況，每種情況對應了3種交互狀態，分別為默認、懸浮和禁用。

二.多選框

多選框的交互定義是幫助用戶完成從若干個互斥的選項集合當中選取一個或者多個選項的任務，多選框多用于表單中。傳統意義上，多選框是方形，單選框是圓的，用戶已經形成這種習慣認知，所以盡量避免使用特殊形狀

• 使用場景

1.當用戶需要在一組互斥的選項中進行多個選擇，完成N選n的任務，使用多選框

2.當選項數目在3-7個之間時使用多選框；如果選項超過7個，推薦使用下拉選擇

3.當選項數量為一個，包含“是”和“否”的邏輯，也可叫單個多選框 比如常見的用戶協議頁面，通常采用單個多選框。

• 交互邏輯

選項排序/對齊方式/交互區域/文字標簽等邏輯與單選框基本一致

1.選項的設置，因為所有選項處于外露狀態，所以超過7個時建議使用下拉選擇器，避免選項過多難以展示

2.默認選項，相對單選框，默認選擇在多選框中并不常見

3.提交操作，單個多選場景中，提交時必不可少的，可以是確認按鈕或是其他方式；下拉選框中為了提高效率也可不用確認，點擊空白處即確認選擇。

4.排列對齊方式：縱向排布，適用于選項內容較多或信息長度差異較大的情況；橫向，適用于選項數量多且內容簡短的情況

5.特殊狀態：相對于其他控件，多選有了兩個較為特殊的狀態“半選中”“禁用(已選)”

1）半選中狀態是全選狀態的一種特殊狀態，依附于全選狀態，所以當多選框中存在全選時才可能出現半選狀態，同時還需要有選中狀態的子項，全選半選狀態屬于【父級】狀態，交互的邏輯是狀態的變化是隨時體現的，所以【子級】狀態的變化，作為【父級】狀態也應該隨之變化，這樣父子級聯動才會有半選中狀態的出現。

2）禁用狀態有未選禁用和已選禁用，未選禁用一般是該條數據不滿足條件無法選中進行操作。而已選禁用一般用戶的權限不足無法進行操作，通常展示出來只是為了讓用戶了解到有此操作。 

• 應用場景

1.復雜選擇器

復雜選擇器中常常會用到多選框，可以明確展示選項的選擇狀態，需要注意的是多選框可以承載的半選，全選狀態所對應的關系，是否符合業務場景。在實際工作中，我曾遇到過父級選擇影響子級但是子級無法影響父級的多選場景，不符合常規的多選習慣，但是在實際業務場景中真實存在。

2.權限設置

在很多權限設置/流程設置的頁面中，常常會用到多選框，需要注意的是各個場景中選中，取消，默認，重置等不同狀態下，頁面的變化，狀態扭轉時交互邏輯的合理性和易用性。

3.表格多選

表格頁面情況多且復雜，對于勾選有兩種形式一種是勾選多選框，一種是點擊行數據選擇，需要明確哪一種更適合當前的業務場景。另外表格的中最多的功能即是全選操作或是部分選擇操作，需明確操作后對整個表格的影響 

三.開關

開關用于兩種相對對立的狀態的切換,多用于「開/關」「啟用/停用」等，不同于單選和多選開關是一個即時性的操作，這也導致開關使用的特殊性。開關能明確的展示當前的功能狀態，讓用戶能高效的進行跳轉操作。

• 使用場景

1.用于對流程的快速開啟，如表格中開啟或關閉某條數據/功能

2.權重較高的功能或設置，如配置表單的停用/啟用，用戶權限的啟用/停用

3.用于開啟/關閉全局權限，后設置其他功能的操作，如業務規則的設置等

• 交互邏輯

1.開關 配有對應的文字說明，開啟/關閉某種功能或權限

2.開關具有聯動性，通過開關去控制下層功能的操作

3.開關的每一次變更狀態都要有相應的反饋，輔助用戶進行狀態判斷

四.下拉選擇

下拉選擇B端業務中最常用的組件，且下拉選擇的類型也比較廣，一般有下拉單選，下拉多選，下拉級聯，下拉樹等基本場景是可選項過多時，會使用下拉選擇器對所有選項進行整合方便用戶高效錄入信息。選項層級建議不超過 三層且需要有一定的邏輯排序，通常包括觸發器和下拉面板兩個部分當選項數量過多的時候，建議增加「搜索」功能。

• 下拉選擇結構

1.標簽文本：選擇器標題，明確選擇內容

2.選框：與文本框類似，需有一個外邊框，為可操作的熱區范圍，主要功能是與下拉菜單進行聯動

當選項較多的時候，多選框會配上搜索功能，目的是為了讓用戶快速找到對應的選項，而形式主要有以下兩種

3.右側標識(可選)：每個選框右側的圖標，都是選框類型的象征。常見的是下拉箭頭，默認朝下；展示選項列表時，箭頭朝上。

4.占位符：保持暗提示的簡潔，避免把暗提示作為選擇器的輔助說明，默認占位文字，格式為「請選擇xxx」

5.回顯值：回顯值通常包括兩種類型

1）當下拉單選，一般采用純文本回顯即可

2）當下拉多選，需要同時展示多個選中項，因此在錄入框中采取Tag形式，使單個選項也可以點擊刪除形成完整的閉環

6.選項：下拉選擇一般針對選項數超過5個

內容：1）選框 + 文本 + 副文本； 2）選框 + 文本； 3）文本 + 副文本； 4）文本。除了選項內容的不同，形式中也有較為復雜的，重點分析級聯選擇和樹：

1)樹展示，可選擇的數據是一個樹形結構時，例如公司層級、學科系統、分類目錄等，樹結構中可以自由選擇子節點和根結點。

2)級聯展示，針對的一般是有所屬關系的選項且所屬關系比較明確，層級一般3-5級，選擇到最末子級才能完成選擇一般是由大到小進行選擇，選項數量上3>2>1，比如省市縣選擇

3)分組展示,選項過多時考慮使用的方式，使用分割線將同一類選項進行劃分，用戶選擇時會思考從大的分類到具體的選項。但選項過多則還是建議用樹結構

7.選項面板：承載所有可選擇的選項列表，在選項數量過多時會對下拉菜單的高度進行限制，即設置下拉菜單的最大高度，當超過最大高度時，出現滾動條。面板相當于一個容器可以根據業務需求承載復雜的形式 例如tab分類、錨點、字母定位等，

• 選擇器狀態

默認（Default  

懸停（Hover

1.未選擇，若選框有搜索功能則光標變成文本輸入狀態，若沒有搜索功能則光標變成小手（示例

2.已選擇，選擇后懸停狀態下全部清空的功能，不是所有場景下配置該功能， 要考慮實際業務中是否需要清空

激活（Active

1.未選擇，點擊框體激活下拉面板，單選一般是勾選后自動關閉面板，多選則需要點擊面板以外確認關閉面板

2.已選擇，若是已選擇再次激活，需要將已選擇的選項高亮，再次點擊已選選項則取消選擇；選項熱區，一般將整行作為熱區擴大點擊范圍，方便用戶操作。

禁用（Disable

1.選框禁用，用戶無法激活，選框置灰，在設計工程中需要將禁用于正常狀態之間拉開差距，這樣用戶能快速識別

2.選項禁用，表示該選項無法被選擇，不影響整個選擇器的功能，只用將該選項置灰即可，光標置入時會變成Not allowed

• 回顯規則

1. 單選，多數單選選擇后下拉面板自動收起，回顯選擇的選項，選項回顯時有一些特殊情況如存在極端情況文案過長則結尾用「…」展示， hover 顯示「文字提示氣泡」；或者選項中存在主文本副文本，考慮實際業務場景回顯時可只顯示主文本。

2. 多選，以Tag形式展示已選擇項使單個選項也可以點擊刪除形成完整的閉環；存在的極端情況是當選項過多時的展示效果，一般有兩種形式撐開高度和選項融合

      1）撐開高度，一般用在需要完全展示選擇項同時可快速調整已選項的場景中，通過改變錄入框的整體高度來展示完整的選型，撐開的高度能在表單中實現一些疏密變化，一般也不會無限撐開，會有一定的限制，并且在右側增加滾動條。

     2）選項融合，對選項展示不作要求的場景中可根據文本框的寬度進行選項融合，展示具體的選項數量即可，這樣能最大程度的保證表單的的整齊，讓選擇器的適配性更高。

     3）省略展示選項，以文本形式展示，鼠標hover氣泡展示全部選項信息

問題思考

何時用下拉選框，何時用彈窗選擇？

大部分情況下，單選優先用下拉選框，用戶比較高效的完成選擇，同時也可以明確自己的選擇。而多選場景中對于選項數量可控，選項復雜度較低的可以用下拉選框。但是對于選項結構復雜，內容過載，用戶頻繁的滾動容易造成誤操作影響選擇的準確性和高效性，此時會考慮使用彈窗，且多選彈窗一般需要配有搜索區，選項區，已選區。需要注意的是，已選項在彈窗內的顯示以及回顯形式。多選彈窗一般可以比較直觀的展示已選項，所以可以采用省略展示選項的方式。

選擇搜索如何顯示？

如下彈窗選擇中，對于數量和層級比較復雜的選擇項，搜索是很有必要的，對于搜索結果的展現形式不同的場景可能會有不同，用戶使用搜索一般是對于選項比較明確，所以推薦搜索結果展示末級，用戶可以更高效的做出選擇，避免復雜的層級關系干擾。

五.時間與日期選擇器

• 兩種類型

1.時間點選擇，選定某一個時間/日期點，B端時間點選擇的業務場景較少

2.時間段選擇，選定某一個時間范圍，一般有開始時間和結束時間，時間段的應用一般是在數據篩選的場景中

確定時間類型后，要考慮時間粒度，時間粒度分為年、季、月、周、天、時、分、秒，B端圖表頁面中針對年度、季度、月度的篩選時很常見的，需要結合場景選擇時間粒度。

日期選擇器中一般是通過點擊讓用戶選擇時間，除了讓用戶點選外，時間選擇器還會提供一些快捷選項例如“今天、本周、本月，本季度“等。選擇后回顯的時間顯示格式有多種如“2022-01-01”“2022年01月01日”“2022.01.01”“20220101”“2022年01月01日”平臺需要確定統一的樣式，避免增加用戶的認知成本。

時間段選擇，常見兩種形式分段式和連體式，在不同的平臺都有應用，在交互上的區別分段式需要用戶點擊兩次分別選擇開始時間和結束時間，連體式是用戶點擊一次調起時間選擇時間段，相對而言連體式操作更便捷，但是分段式理解更簡單，連體式存在一定的認知成本，總體上來說其實區別并不大，平臺需要建立統一的標準，這樣能形成較為統一的體驗和習慣。 

選擇器在實際工作中應用廣泛，B端業務復雜，總會遇到各種新的場景，總結會有不足不全之處，歡迎大家一起探討交流。

文章來源：站酷   作者：MuMu魚

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

• 文章來源：站酷   作者：赤鯨
  
  
  分享此文一切功德，皆悉回向給文章原作者及眾讀者.
  
  
  免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
  
  
  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、
  BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

顏色是感知的問題。每種顏色代表不同的定義波長，但是我們每個人對顏色的感知都取決于我們的感知能力。此外，我們都有與顏色相關的不同文化或背景關聯。

有很多很棒的文章和視頻，介紹了色彩理論和色輪，還有許多用于生成調色板的工具。但是有時您會在實踐中發現這些文章不太好用，顏色組合不完全匹配或所生成的調色板在您的項目環境中效果不佳。

所以你會怎么做？您如何開始思考和查看顏色，使它們更易于選擇以及調整您的需求？

諸如互補和單色，飽和度和亮度之類的色彩理論術語并沒有吸引他們。

因此，我開始以不同的方式分解色彩，方法是從繪畫和室內設計等傳統視覺和圖形藝術中汲取靈感，并以對我們作為UI設計師所做的方式有意義的方式對其進行取景。

匹配調色板并平衡配色方案

也許您已經按照所有的色彩協調和顏色理論教程進行了準備，并生成了一個免費的調色板，但是您注意到這些顏色似乎不太匹配，也許它們看起來比較粗糙或不專業。

創建良好的配色方案就是與色調，陰影和溫度匹配的平衡。要在設計應用程序中成功做到這一點，您需知道要拉動哪些杠桿。

色彩理論提供了一些公式，可用于啟動調色板，這是理解調色板的重要基礎。但是創建漂亮的調色板不僅與這些公式有關，還與平衡色調，陰影和溫度有關。

這些是我們可以推拉的“杠桿”，可以為我們的UI設計實現更加平衡和獨特的顏色組合。

因此，首先，回顧一下這些杠桿的作用。

色相是用于描述所見到的每種色調的通用術語。

飽和度指的是我們正在查看的特定顏色的主要顏色系列。白色，黑色和灰色通常被稱為無彩色。

明度也指顏色的明暗程度。色調相同的顏色，明暗可能不同。例如，絳紅色和粉紅色都含有紅色，但前者顯暗，后者顯亮。

色溫-色溫更多地是關于我們如何感知所看到的色相。并且我們傾向于將它們分為暖色和冷色。

暖色-通常是通過增加色調中的紅色或黃色來獲得的顏色。這些往往會喚起激情，舒適，活力和運動的感覺。他們使我們想起陽光和熱量。

冷色-是增加藍色和綠色的顏色。這些趨向于喚起，清新，冬天，靜止，平靜。他們使我們想起冰，雪和水。

色彩模型和色彩空間

要獲得一些技術知識，您可能聽說過3種不同的顏色模型，這將有助于我們更好地理解光和顏色的協同作用。

CMYK使用減法混色。它指的是光線反射物理白頁的方式。顏色的重疊導致黑色。由于頁面無法投射光線并向您發光，因此頁面必須具有反射光。將這些顏色混合在一起就可以掩蓋頁面的白色，從而減少了可以反射的光量。

RGB稱為光的加法混合。它指的是數字屏幕向我們投射光的方式。您在全亮度下的顏色會導致我們看到白色的重疊。有點像被明亮的泛光燈所蒙蔽。

HSB-代表色相，飽和度和明度

HSB顏色模型為我們提供了放射狀的顏色，其中我們具有一定范圍的色相，飽和度和明度值。

這就是我們的眼睛和大腦如何解釋顏色HSB就是我們的眼睛所看到的一切，而與它是從屏幕還是在紙上投射的光線無關。

因此，出于為UI設計選擇顏色的目的，我們將使用HSB顏色模型。

顏色屬性

您經常會聽到兩種較大的顏色分組。暖色和冷色。

暖色通常被認為是主動色，這意味著它們會引起更多關注。

冷色通常被認為更被動且后退一些。

根據色彩的豐富程度和它們如何平衡，您可以使柔和的暖色充當被動元素，而更鮮艷的冷色則扮演主動角色。

現在，您了解了顏色如何在屏幕上顯示以及如何設置我們的設計應用程序。讓我們談談如何在我們的設計軟件中使用和推動這些杠桿，并平衡我們的配色方案和調色板。

為了得出這些不同的顏色類別，我們將集中于推和拉色調，飽和度和亮度（HSB）的控制桿。

在數字屏幕上，我發現有一個公式和安全范圍的飽和度和亮度，可以每次為每個類別創建一個完美的調色板。

為簡化起見，我將主要顏色分為6種通常可以識別的主要顏色類別。這些反映了我們在日常生活中談論顏色時通常傾向于指代顏色的方式：

1.寶石色調

S：83-73，B：76-56

這些顏色是飽和度很高的色調，以寶石命名，包括寶石藍，寶石紅，紫水晶紫色，檸檬黃和翠綠色。想一想紅色寶石項鏈或皇家紫色的魅力。這些顏色富麗堂皇，深沉，并賦予豪華感。

2.粉彩

S：14-21，B：89-96

柔和的顏色屬于淺色系。粉色，淡紫色和淡藍色是常用的柔和色。這個家庭的顏色通常被描述為“舒緩”。我們通過降低飽和度和調整色彩來創建這些顏色。

3.大地色調

S：36-41，B：77-36

這些是自然界中常見的顏色。可以通過將純色與白色，黑色或灰色相結合來創建它們。從廣義上講，這些是中性色。它們受到樹木，森林，海洋和天空的色調的影響，被用以模仿自然色彩。我們通過增加飽和度和調整色調來創建大地色調。

4.中立

S：1-10，B：99-70

純中性色包括黑色，白色，米色和所有灰色，而接近中性色則包括棕色，棕褐色和深色。這些是通過使色彩去飽和來創建的。它們可以與以上任何類別配對以創造平衡。我們通過降低飽和度并調整色調，色調和陰影來創建中性色。

5.熒光燈/霓虹燈

S：100-63，B：100-82

在物理世界中，這是由霓虹燈管或紫外線反應涂料的顏色創造的，但在數字世界中，我們可以通過將非常明亮和高度飽和的顏色應用于我們的設計來獲得相同的效果。我們通過增加亮度和色調來創建它們。

6.陰影

S：0-0，B：0-100

兩種主要的陰影是黑色和白色，其他陰影也包括不同程度的灰色。

UI顏色組合

最佳的用戶界面設計結合使用一種顏色類別以及中性和陰影。

您實際上只需要這些類別中的1或2種顏色即可設計參與整個用戶界面。

我們為什么不這樣談論顏色

作為數字設計師，我們傾向于避免給這些配色方案分類，因為術語似乎是為混合自然色彩的畫家，印刷設計師和室內設計師保留的。但是從實際的角度來看，當我們仍在學習色彩理論并使我們的眼睛習慣于選擇可以一起使用的色彩時，我發現以這種方式引用色彩在UI和數字屏幕設計中可以非常有用。

這不是一門精確的科學，但是您會看到如何以這種方式思考顏色并掌握一些杠桿和數字，以指導您幫助用戶創建更令人愉悅和精致的調色板。

理解色彩理論的基礎和原理很重要，特別是當涉及到實際應用時，它就顯得尤為重要。引用不同的學科并找到對我們有用的類比可以帶來很大的不同。

作為UI / UX設計師，最重要的是，無論您如何去實現，您都能夠有效地使用顏色來傳達信息并為用戶創造最佳體驗。

• 文章來源：站酷   作者：對啊設計君
  
  
  分享此文一切功德，皆悉回向給文章原作者及眾讀者.
  
  
  免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
  
  
  藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、
  BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

UI 設計，是用理性方法，來滿足需求，并帶來美學享受。

本篇探討 UI 設計如何做到理性。全文共有三部分：有哪些理性，如何做到理性，止步于理性嗎。

01 UI 設計：有哪些理性？

UI 設計主要有四類理性：基本原則，基礎知識，風格設定，風格把控。四類理性有一個共同核心：活學活用。

1 基本原則

共有四個基本原則：對齊，對比，親密，重復。

先說對齊。

秩序產生美。對齊作為一種基本秩序，主要事關整齊美觀和閱讀體驗。

對齊一般分左對齊、右對齊和居中對齊。

從閱讀體驗角度來講，左對齊通常勝過居中對齊，所以絕大部分文章和 UI 界面都是左對齊為主。

從美感角度來講，居中對齊往往勝過左對齊，所以一些強調美感勝過強調閱讀效率、篇幅不長、同時需要細品的詩或歌往往采用居中對齊。

從空間利用率角度來講，右對齊往往是左對齊的一種補充。比如微信的發現頁面，最重要的圖標和文字左對齊，次要的右箭頭和其它信息右對齊。

UI 設計追求閱讀體驗、美感和高空間利用率，所以這三種對齊方式大部分時候都會同時出現。整體而言，是以左對齊為主，居中對齊和右對齊為輔。

再說對比。

嘈嘈切切錯雜彈，大珠小珠落玉盤。音樂講究韻律和節奏，設計也追求錯落有致的節奏感。這種節奏感，很大程度上靠對比實現。

好的對比可以帶來視覺張力，就是抓人眼球的吸引力，同時也能起到主次分明和視覺引導的作用，最終帶來良好的閱讀體驗。

一定程度上，對比是無處不在的。只要存在不同，就存在對比。比如大小之間的對比，不同顏色之間的對比，文字與圖標/圖片之間的對比，不同對齊方式之間的對比，等等。

一般而言，對比需要果斷：若不同，就徹底不同。因為一般情況下，充分的對比能帶來更好的視覺張力和更好的閱讀體驗。

第三說親密。

設計就是分類，張小龍曾如是說。分類中最重要的原則是親密，還有一個副產物是留白。

性質相同或相似的元素，我們會讓它們看起來離的更近，關系更親密。親密成就分類，分類能化繁為簡。

最后說下重復。

設計追求一致性，一致性主要靠重復來實現。被大量“重復”的元素，比如這篇文章里的字體大小和字體顏色，既保證了一致性，又提高了效率。

2 基礎知識

基礎知識主要包括：手繪、顏色、版式設計、字體設計、品牌設計、動效設計、插畫設計等專業知識。

UI 設計師可能不用畫卡通人物或插畫，但一定會畫圖標和 logo，這些也會用到手繪。作為造型基本功，需要掌握一定手繪技能。

顏色方面，最重要的是能夠很好感受和理解顏色傳達出來的感覺，也即顏色的“精神之美”，這塊主要依賴審美和練習。

配色方面，推薦軟件里的 HSB（色相、飽和度和亮度） 模式，這種模式很好理解，也方便調色。另外還強烈推薦從照片中吸取顏色，因為照片往往會和“生活”、“自然”有一定關聯，“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。

版式設計就像是選秀節目中練習生的舞臺表演，考驗的是唱跳、表情管理、舞臺魅力、臨場應變等綜合實力。

“活學活用”環節，會結合例子分享版式設計。

字體設計、品牌設計、動效設計、插畫設計等方面，個人經驗不多，就不分享了。文末會附一份推薦書單，囊括基本原則和部分基礎知識。

3 風格設定

風格設定，即上篇提到的“精確描述”，是在動手設計之前，先探索出合適的風格，并把它精確描述出來。

好的開始是成功的一半。風格設定是一個開始，極其重要。如果風格設定只做到 60 分，稍微打點折扣的執行結果就是不及格。所以，如果要把設計做到 85 分，風格設定一般要做到 90 分。

風格設定猶如在茫茫大海中行船，首要目標是把握方向，核心訴求是精準。海上并無現成道路和導航可循，只能依靠繁瑣而嚴謹的推理和計算。

風格設定的次要目標是劃一個既清晰界定風格、又清晰指明“發揮范圍”的“圓圈”，核心訴求是周密。因為需要清楚知道“圓圈”以內代表什么，“圓圈”以外代表什么。

在“精準”和“周密”上同時做到優良，風格設定才能做到優良。

既精準又周密的風格設定，通常無法一蹴而就：“風格設定”階段一般只能做到七成，剩下三成需要在設計過程中繼續探索和打磨。下一大段會結合案例分享具體方法。

4 風格把控

風格把控有兩層含義，一是實現當初設定的風格，二是在實現的基礎上做到統一和規范。

只要嚴格在“圓圈”里發揮，實現當初設定的風格并不難。那做到統一和規范難嗎？往難了說就是需要做大量瑣碎工作：以聯系的眼光看待所有設計元素，并把它們分類規整好，注意分類不宜過多，同時分類邏輯上不能出現明顯問題。往簡單了說就是大量復用已有的設計樣式。

風格把控就是在劃定的“發揮范圍”內，利用設計知識和經驗，以規范的方式實現規劃好的風格。

5 活學活用

活學活用作為四類理性的共同核心，最典型的應用場景是版式設計。

活學活用有兩個要點：正反結合，風格第一。

所謂正反結合，是指設計知識既能正著用，也能反著用。最常見的例子是對齊原則，大部分時候是正著用，但如果想要營造活潑的感覺，也會反著用：故意打破對齊原則。

除了對齊原則，其它設計知識，比如重復原則，也可以反著用。

本文配圖就是一個例子：圖片左上角、右上角和右下角分別散布著裝飾元素（橫線、圓環）和 logo，在裝飾元素的出現次數上，沒有用重復原則。過年家里掛燈籠一般至少掛兩個，同一裝飾元素一般至少出現兩次，以達到一種和諧和較為熱鬧的裝飾效果。

我在裝飾元素的出現次數上沒有用重復原則，而在出現位置（相似位置）、元素大小（相似大?。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜驮瓌t，同樣達到了和諧效果。之所以沒在裝飾元素的出現次數上用重復原則，是想放一個隱喻在這里。

所謂風格第一，是指設計風格永遠第一，設計知識永遠第二。知識服務風格，切不可重知識輕風格。

《倚天屠龍記》中，張三豐教張無忌練習太極劍時，要他忘記劍招，只記劍意。某種程度上，版式設計也要將“劍意”放在第一位，“劍招”服務“劍意”。

對比原則也有反著用的時候。有一條關于對比的知識：對比要果斷，若不同，就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍色的強烈對比，但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色，無對比。

設計最重要的是感染力，感染力主要來自個性、態度、價值觀這些風格層面的東西，而非設計知識這些技法層面的東西。

當一個設計，技法高超而風格不足時，感染力和魅力就會不足，這也是設計師經常會犯的錯誤，大家需要注意。

02 UI 設計：如何做到理性？

可以簡單分成三步：規劃，成形，細化。下面結合微信 Redesign 這個案例來說明。

1 規劃：用“紅綠燈”法設定風格

設定風格，用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網上看到的一種“紅黃綠卡片法”（在紅、黃、綠三種顏色的卡片上寫下不同的設計關鍵詞），并和“情緒板”法有相似之處：都包含關鍵詞定位和圖片參考兩部分。

先說關鍵詞定位，共有兩步。

第一步類似頭腦風暴，結合產品屬性、用戶屬性、市場情況、個人喜好等因素，把能想到的設計關鍵詞全部寫下來。合適的不合適的都要寫，只要想到了就寫下來，確保有二三十個。如果關鍵詞數量不夠，這個步驟可以多重復幾次，直到夠了為止。這一步設計師和需求方都要參與進來，在提供關鍵詞上雙方是平等關系。

這個微信 Redesign 是個具有探索性質的小練習項目，基于微信 7.0，有兩個目的：首先保留原有交互體驗和品牌識別度，其次在視覺上更年輕、更流行?？梢酝ㄋ桌斫獬桑阂豢钗⑿拧捌つw”，主要給年輕用戶和趕新潮的中老年用戶用。

結合產品屬性（社交類、工具類、內容類）、用戶屬性（年輕用戶為主）、市場情況、個人喜好這些因素，這一步想到的關鍵詞如下圖所示。

第二步是歸類，就是把第一步產生的所有關鍵詞歸成“紅黃綠”三類。如果關鍵詞不夠，還可以再補充。這一步依然是需求方和設計師共同參與，但需要設計師來主導。

紅色關鍵詞代表不能踩的紅線：不能這樣做；黃色關鍵詞代表黃燈警告：這樣做不太合適；綠色關鍵詞代表暢通無阻：應該這樣做。

需要注意的是，綠色關鍵詞最好控制在 3-4 個之間，如果超過 4 個，就需要分成主綠關鍵詞和次綠關鍵詞，主綠關鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量，一是確保簡單和重點突出，二是也更容易實現。

回到第一步的關鍵詞上來。設計中當然可以用“擬人”、“隱喻”等手法，所以“擬人”這個關鍵詞顯得意義不大，故刪去。“溫潤”和“親和”，“老少皆宜”和“大眾”在語義上都存在一定的重復，所以刪去后者。刪除這類不合適的關鍵詞后，剩余關鍵詞就按“紅綠燈”法歸類，歸類后情況如下。

（微信 Redesign 之按“紅綠燈”法歸類后的設計關鍵詞）

關鍵詞定位已就緒，再來找參考圖片。

可供參考的圖片有兩大類：照片和 UI 界面。UI 界面也有兩類：線上作品（真實項目、練習作品等）和上線作品。

做 UI 設計，參考什么樣的圖片？個人建議，做什么類型的設計，就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面，banner 就重點參考 banner。

UI 界面的設計，個人喜歡重點參考知名產品的上線作品。單從視覺角度來說，上線作品的質量可能比不過一些線上練習作品。但是已經上線的知名產品的 UI 設計，其風格的形成往往都會經過很多推敲，會有很多比較成熟的設計思路在里面。

參考別人的設計，最重要的是參考設計思路，其次才是參考表現形式。這種設計思路，有時候能從網上找到，但更多時候靠自己推測。

微信 Redesign，根據“很多年輕人在用，且風格比較流行”這條主線，找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產品的截圖。這些產品的截圖，看完一圈后，就會面臨一個問題：以圖標為例，這幾個產品的圖標，風格各異，但基本都具備“年輕”和“流行”的特點，那應該參考哪一個？

這時就要求助關鍵詞定位。除了“年輕”和“流行”，主綠關鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻：很多老人和小孩也會用這兩個 App 看視頻，網上公開的數據也能佐證這一點，所以它們的設計一定會照顧中老年用戶的審美。

最后，出于個人偏好，我選擇重點參考愛奇藝的圖標風格，具體而言就是：深淺雙色、較粗(1.5pt)描邊、圓潤風格。

2 成形：按照規劃，實現風格

紅黃綠三色關鍵詞及重點參考圖片就緒后，就可以動手設計。

我一般會把界面設計粗略分成三大部分：版式風格、元素風格、元素大小，元素為圖標、圖片、按鈕等，然后去一一實現。

先說版式風格。

用的主要綠色關鍵詞是“更流行”和“更年輕”?！案餍小卑ǎ焊笞痔柕捻撁鏄祟}、盡可能用留白代替分割線和卡片的“無界”風格、圓形頭像、更多留白更多舒適、等等?！案贻p”包括：更圓潤的搜索框、輸入框和圖標、更年輕更具活力的配色、等等。

再說元素風格之圖標風格。

圖標主要參考愛奇藝 App：其一，底部導航和發現頁的圖標都是深淺雙色加較粗的描邊；其二，除了更圓潤以外，部分圖標還變 Q 了。

最后說元素大小。

以這個小項目為例，最主要的元素大小是圖標大小和字體大小，它們會影響整個設計的感覺。通常情況，元素越小，給人感覺越精致、越高端，此其一；其二，可能是年輕人和老年人視力存在差別的原因，越小的元素往往代表年輕人的審美，反之則代表老年人的審美。

元素大小主要運用的綠色關鍵詞是“輕微老少皆宜”。也就是說，需要在年輕人和中老年人的審美中找到一個平衡，所以元素大小基本直接參考了微信 7.0 的設計，個別地方做了微調。

最后，出來的效果如下圖所示。

3 細化：打磨優化

這份設計我發在了網上，部分網友留言說看著不夠好，不太舒服，有一個表達的比較具體——“雖然用了大面積留白，卻讓人感到緊迫...”。

基于網友的留言，我仔細審視了這個設計，最后發現問題主要出在頁面（發現頁為例）左右兩側：留白過小。

當初之所以這么設計，是想通過頁面左右兩側較少的留白制造一種內容將要撐破屏幕的感覺，從而營造一種活潑的感覺。注意，彼時“活潑”還沒出現在“黃色”關鍵詞里，上文兩張關于關鍵詞的圖都省略了中間探索和優化的過程。

很多網友之所以沒有感受到活潑而只是覺得不太舒服，至少有兩個原因：第一，整個設計的基調是簡約、清爽，有一定的年輕感和流行感，但沒有太明顯的活潑感，硬往里面某個地方塞“活潑感”并不和諧，大家也難以感受到；第二，單純就“活潑感”而言，做的依然不到位，比如圖標與右側文字的留白，可以比圖標與左側邊界的留白大，方能更好彰顯活潑與活力。

考慮到“輕微老少皆宜”這個綠色關鍵詞及微信主要是工具型和內容型產品，“活潑感”用在這里并不十分合適，于是放棄，并將“活潑”歸為“黃色”關鍵詞。此處留白的目的就回歸其本職工作：整體和諧與舒服。于是就把留白相應調大了。

另外一個優化的點是“眼睛”的形狀：微信圖標、看一看圖標、表情圖標、朋友圈里將點贊和評論折疊起來的圖標都有一雙“眼睛”，這雙“眼睛”起初是豎著的橢圓形，很萌，也比較低齡化。為了盡可能的“輕微老少皆宜”，這里統一把“眼睛”由豎著的橢圓形改成了圓形，弱化了“萌”和“低齡化”的感覺。

還有一塊是顏色上，拍攝視頻動態的圖標有用到藍紫色。這個紫色基本符合“更年輕”、“更流行”，但不太符合“輕微老少皆宜”，所以最后放棄了紫色，保留了藍色。

遵循主綠關鍵詞里的“輕微老少皆宜”，其它優化的點有：微信圖標尖角處的圓角調小，刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優化，比如顏色、留白、圓角大小、字體大小方面的微調。

優化后的微信 Redesign，整體效果如下圖所示。

凡事預則立，不預則廢。UI 設計如何做到理性，最核心的是設計風格，規劃、成形和細化都緊密圍繞設計風格展開。

最后，嘗試總結下“紅綠燈”法的優勢，主要有四點：精確、周密、穩妥、高效。

關于設計風格，傳統規劃方法一般只有三四個“綠色”關鍵詞。

“紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關鍵詞，從而確保大方向更準確?！凹t綠燈”法會產生20個以上的紅黃綠關鍵詞，從而確保劃出來的“發揮范圍”更周密，極少有疏漏。

在“成形”這個設計環節，一旦踩到“紅線”和“黃線”，規劃好的紅黃綠關鍵詞都會馬上發出警報，從而大大降低“違規踩線”行為的發生次數，確保設計執行環節的穩當可靠。

“紅綠燈”法通俗易懂門檻低，需求方可以較為深度參與“規劃”環節。需求方在“規劃”環節的深度參與，理論上可以降低后期的返工和修改次數，從而確保整個設計過程的高效。同時理論上也能夠提高設計師和需求方雙方合作的愉快程度。

03 UI 設計：止步于理性嗎？

UI 設計，始于理性，但無法止步于理性，還需要超越理性。注意，這里的理性，僅指設計知識的相關理性。

超越理性主要有兩點：直覺，其它知識。

1 直覺

直覺是指一種能夠快速感受和評估設計優劣的感覺。良好的直覺往往快而準。

感知和評價別人的設計時，用到的幾乎全部是直覺。審視自己的設計時，也離不開直覺。

在審視自己的 UI 設計時，直覺主要發揮兩個作用：第一，囿于知識儲備或表達能力，有些地方就是解釋不清，這個時候就要靠直覺去感受去判斷；第二，直覺往往會作為檢視設計的最后一道關卡，也是最重要的一道關卡。

直覺來自哪里？

個人觀察是，直覺往往和審美正相關。比如一個設計師，他掌握的設計知識有限，經驗有限，對自我的要求也不高，最終的作品往往不出彩。但如果他審美好的話，往往能夠分辨出不同設計方案之間孰優孰劣。

如果你想就設計稿征求別人的意見，請去找那些審美好的人。

2 其它知識

其它知識是指設計知識以外的所有其它知識。比如 iPhone 上刪除應用前應用圖標的抖動，其靈感應該來自生活中的搖頭求饒或嚇得發抖，抖動的幅度和頻率則需要利用物理學和數學方面的知識。

優秀的設計，一定會從生活中汲取大量靈感，并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說，在好的設計中，一定是個?？停阂驗槟阈枰煌５陌从嬎闫?，從而計算不同設計元素之間的比例關系和各自的大小。

汝欲學詩，功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎，而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟，在于你的思想是否深刻，情懷是否充足。

寫詩如此，做設計亦如此。設計知識只是做設計的基礎，而非關鍵。做設計的關鍵在于“其它知識”。“其它知識”非本文重點，就不展開了。

結語

UI 設計里的理性，主要是各類設計知識。理性的核心在于活學活用各類設計知識。

理性嚴謹的做 UI 設計，可以簡單分成三步：規劃，成形，細化。好的開始是成功的一半，一個高質量的規劃顯得尤為必要。

用“紅綠燈”法做規劃，并指導成形和細化工作，會更精準、周密、穩妥和高效。

UI 設計，是七分理性，三分直覺。審美越好，直覺越準。

優秀的 UI 設計，一定會從生活中汲取大量靈感，并廣泛利用設計以外學科的知識。

---

推薦書單  

[美]Robin Williams《寫給大家看的設計書》

[日]佐佐木剛士《版式設計原理》

[日]伊達千代《色彩設計的原理》

[日]小林章《西文字體1、2》

左佐《設計師的自我修養》

左佐《治字百方》

   因為智能手機的普及，用PC瀏覽的網站關注度正在下降。但是，托B2B數字營銷的福。PC網站今后也變成戰略中心。即使在B2C的領域，PC網站也是不可或缺。

   對于在硬件方面沒有太大變化PC的網頁設計來說，也有技術被固定化的印象，實際上現在也正在接受時代的潮流而發生著變化。特別是下面那樣的環境變化，也給與PC網站的UI設計帶來很大的影響。

?顯示設備的多用化。

?智能手機應用的普及化

?電子設備觸摸屏的普及

   如果迎合趨勢將會取得成功不是嗎？這個基礎就是抓住用戶動向的變化，有必要完全理解這一變化。因此這篇文章是PC網頁 UI設計的最新動向，基于那些背景下的推測匯總。

1.Big UI / low Density / Long Page的潮流

   舉例說曾經的PC網站有很多是在有限的空間內填入了大量元素的設計。但是現在UI部件變得有：大型化（Big UI）、較低的密度（Low Density）、長頁面（Long Page）的傾向。

   以前是海外以創意型，初創型為中心網站所采用的設計，進入日本的海外企業和前衛的網頁設計師，采用那些理念設計的企業網站，漸漸地在日本也被廣泛應用，這個趨勢也與扁平化設計相呼應。2013年以后以Big UI / Low Density / Long Page 為基礎的設計理念在網站更新中使用增多了。

   這樣的趨勢，不能單單看起來時興，其有合理的存在理由。在開發的立場，讓響應式網站更容易實現。如果在用戶的立場來看，更容易瀏覽、更容易理解、不再迷茫，除了所說的這些以外，讓網站更好的利用觸摸屏，作為其更大的優點。

   近些年不只手寫板，筆記本電腦也安裝了觸屏。對于在沒有準備手機網站的情況，在智能手機上，網站的頁面也被要求需要有一定程度的瀏覽。

   觸摸屏，因為用手指的點擊，不能進行精準操作。因此用戶界面會變大。元素之間的必需留出充分的空間。如果用戶界面變大，密度變低，當然頁面中表現元素要少，頁面變長，以滾動為前提了。

   這篇文章之后要介紹很多趨勢，都是從Big UI / Low Density / Long Page的潮流中派生出來的。這不是最時尚的流行，但是現在是最適合用戶行為的設計思想。

2.1欄布局

   作為Big UI / Low Density / Long Page合適的布局，就是1欄布局。

   曾經左右兩欄布局的PC網站是UI設計主流。在電子商務網站等有大量信息的網站中，3欄布局也很常見。但是現在去掉左右欄，只焦點于內容部分，1欄布局正在增加。

   對于用戶，不再有不必要的雜音映入眼簾，集中真正必要的內容。文字更容易閱讀，圖片被展示的更大。

   另一方面，映入眼簾的信息量減少，廣告等會變得有些分散。因此，對于用戶活動線路的設計，必須要更加謹慎。

   另外，在側邊欄設置局部的導航條手法，與其他層級的網站相關，有讓用戶不再迷茫的突出優點。去掉側邊欄的導航條，讓網站的層級降低，盡可能減少菜單，不止限于1頁內的布局意味著網站全體的設計方法需要重新考慮。

   反過來說，多層級化的前提是與網站的龐大度有關。有很多的1欄布局不能讓內容被準確的理解，據此判斷需要謹慎使用。

3.中對齊

   1欄布局的一個問題是文字換行吧。文字充滿整個寬度時候會顯的很長，很難保持布局的美觀。如果1行的文字數量超過40個字，人們就會覺得難以閱讀。不能因為是1欄就什么也都不考慮，寬度被文字占滿，是不可避免的。

   解決這個問題的一個思路就是中間對齊。說到寬度很寬1欄的布局，中對齊和左對齊如何很好的組合，變成設計的要點。

   中對齊的正確使用有一些值得注意的點。首先，必須避免用戶的視線忽視中間。例如，如果長文本中對齊，文章的開始點就會因此改變，變得難以閱讀。如果使用中對齊，短文章不必要換行，長文章必須左對齊。

   還有，接近元素寬度充滿的時候，雖然用中對齊，也不能很好的解決。但是,寬度被占滿的情況是不存在的，看到中對齊不完整的位置就像懸浮一樣。為此，必須要在運用盒子和邊緣等下功夫，中對齊才不會出現違和感。

4.固定的頂部和頂部的超薄化

   固定的頂部也很普遍。在很多的時候，這里搭載的是導航條。無論能進入頁面內哪個位置，都能立即回到主要部分。固定頂部的UI沒有側邊導航，當頁面較長時，能確保使用的敏捷度。

   但是，固定的頂部沒必要的時候，會有占據一些空間的缺點。因此，頂部只能加工的變薄。像曾經PC網站的外觀那樣，采用多段式并且較厚的頂部是很困難的。

   這就意味著必須在頁面內限定元素。如果元素容納的多，頁面就會變厚，很難被固定化。菜單的數量應該被限定，相對于以前，這方面的意識必須要加強。

5.固定的左邊導航

   近年可以看到一些布局將導航條設置在左側。說起來也與曾經2欄布局為主流時代的左導航在構造和功能上有所不同。

   畫面左邊被固定，最近有很多追隨滑動的按鈕。另外，內容部分基本使用1欄布局，跟隨畫面寬度的進行伸縮的液態布局被使用的數量也很多。

   這樣的設計會帶來應用程序的操作感。另外，有容易應對多設備的特點。移動端優先的設計，響應式網站和液態布局即是使用PC也能對應多種情況，有采用這樣的構造的傾向。

   但是，必須注意的是這樣新式布局，對于一般的用戶有很難留下第一印象的危險性。另外，對于菜單的多層級化的時候，連接和鼠標經過引出下一級菜單的操作是必要的，因此提高了操作的難易度。

從使用能力，全部的構造等固定左導航的缺點來看，有必要搞清導入的妥當性。

6.液態布局

   在設備多樣化中，畫面的分辨率呈現前所未有的變化。以前，寬度符合960~980px就可以解決問題的這個規律變得難以通用。對于分辨率多用化的一個回答就是，符合畫面寬度的布局也就是液態布局。

   液態布局是，元素和圖片不是用像素而是使用%。因此，無論看到什么樣的尺寸，分辨率的畫面，都會被布局成有一定的平衡。可以解決符合小畫面的時候的缺點和符合大畫面的時候的缺點。

   必須留意的是，對各個頁面“最合適化”的布局是不存在的。設想一下各種各樣的分辨率的畫面，匯集了最少破綻并被認為是有共同的妥協點的布局手法。有些特定的尺寸會感到平衡被打破，有些程度是必須被允許的，意味著會布局成像網頁的網頁。

   未完待續...

出典：http://baigie.me/sogitani/2015/02/pc-site-trend-2015/

翻譯：SISENdesign