如何作好的設計

本文說的「設計」只是狹義的特指互聯網行業中的交互和視覺設計；

本文的目的是爲了給非專業設計人員（前端 or 後端 or ....）提供一些讓你的交互和視覺更好的方法（相對於本身搗鼓）。固然，任何剝離具體場景的最佳實踐都是耍流氓，仍是須要具體狀況具體分析的，莫要較真 o(╥﹏╥)o

由於本人也是一個前端開發工程師，非專業設計人員，本文僅表明我的見解，若是能給你一些幫助那是我但願的，若是你以爲你對這部分有更深入的看法，能夠左上角或者私信。

本文是結合 Ant Design 官網 和本身的看法寫的，文中一些語句和配圖都是出自：ant.design/components/… ，由於涉及到的案例太多，因此還在慢慢積累素材。侵刪~~

開始關注用戶體驗是去年和 D2 大會同一天舉辦的 螞蟻金服體驗科技大會，雖然沒有到現場，可是光看 PPT 和視頻就感慨設計師這個職業就和後端對咱們前端說「原來大家不止是畫頁面的呀」同樣同樣的（雖然我如今仍然是一個切圖仔 /(ㄒoㄒ)/~~）

好的設計不止是說一句「這樣設計好看」，而是有必定的設計標準和原則。

好比：爲何 Ant Design 推薦主字體字號是 14px？ 不是設計師的一句：我看這個字號順眼。而是基於電腦顯示器閱讀距離（50cm） 以及最佳閱讀角度（0.3）計算出最佳字號，保證多數經常使用顯示器上用戶閱讀最佳體驗。

而後找到了 Ant Design 的官網，看到了右上角的 「設計語言」 點進去，彷彿發現了寶藏 !

由於以前是作 B端 相關的業務，不少的需求都是產品只給 PRD，最終頁面雖然是靠組件拼接起來的，可是仍是感受「很醜」 緣由就是沒有遵循一些設計規範；

在詳細閱讀了 「設計語言」 和 林外 大佬的一些文章以後，感受對如何作更好的用戶體驗有了更深的理解。

其實最開始關注用戶體驗的目的很簡單：解決選擇困難症，由於以前在 B端 作項目的時候，產品對交互和視覺的要求並不怎麼高，不少時候都是一句話：「自由發揮」

那麼問題來了， 十六進制的顏色值那麼多，我要怎麼選擇？ 字號從 12px - 24px， 我要怎麼選擇？ 間距從 1px - npx， 我要怎麼選擇？

爲了解決本身的選擇困難症，開始慢慢關注用戶體驗和交互設計，原來這些都是有跡可尋的；

好的設計並非簡單的一句：我以爲這樣比較好看，而是有必定的設計標準和原則； 因此咱們就要探索怎麼才能作出更好的設計

0. 什麼是好的設計

對於什麼是好的設計，一百我的內心有一百個哈姆雷特，可是有一點是大多數人的共識：天然

• 我不知道下一步該怎麼操做？
• 我不知道我剛剛的操做的結果是什麼？成功 仍是 失敗？
• 「是否取消該訂單？ 是 取消」 那我選擇 「取消」 到底 有沒有取消訂單？
• ...

當你在使用某產品的過程當中，遇到這些讓你花費很長時間思考如何使用時，那麼該部分的設計就是很差的。

我認爲好的設計須要符合的首要條件是 —— 天然

• 讓用戶和人機交互的行爲更加天然
• 將天然界中的客觀規律運用到界面設計中

好設計比差設計更難發現，由於它是如此的天然，天然到你發現不了。 -- 林外

這裏只想到了這一點，由於時間緣由，尚未再去系統的概括總結，只想到了這一個，先挖個坑

1. 極簡：傳達給用戶最重要的信息

在當今信息爆炸的時代、用戶天天接收到的信息都是數以萬計的，因此一個好的產品、好的設計應該向用戶展現最爲重要的信息。

試想一下，若是你打開一個網頁，密密麻麻的全是文字，那麼你的第一反應會是如何？雖然展現的信息不少，可是有哪些是真正能被用戶所接收的呢？

在當今社會，如何可以精簡信息，將最重要的信息傳達給用戶，纔是咱們應該思考的。

1. 設計極簡

蘋果就是一直以極簡設計著稱，下面是我隨便在蘋果官網截了幾張圖。

能夠看出

• 在首頁，就把當季推薦款推薦給你 —— iPhone 11 pro，而且只有這一款；
• 在「列表頁」，一個產品佔據一屏；而且只展現最基本信息，想了解更多能夠 「learn more」
• 整個網站都使用同一種風格
• ....

咱們能夠看出，蘋果的一些平面設計有如下特色：

• 保留最基本元素：屏幕上的元素越少，焦點越有效。根據此邏輯，若是你的屏幕只有一個元素，你能夠肯定這個信息必定能夠傳達到用戶。
• 留白：不要睡得太晚，不要愛得太滿~~
• 對比：你可使用更少的元素進行設計，在建立視覺層次結構時須要更有創意 最少顏色：在簡約設計中，咱們使用顏色創造視覺興趣或直接注意，而不添加任何額外的設計元素或實際圖形。

重點信息重點放置、次要信息有跡可循放置、無關信息不要放置。

1.2 功能極簡

上面是平面設計上的極簡主義，在咱們的應用的功能上也是如此；

好比 微信 發現頁，以前是所有展現的，可是在 微信6.6.2 版本中增長了對 發現頁的管理 設置。極大地減小了用戶查找信息的時間。

根據用戶本身的喜愛來設置，可以很大程度的避免用戶接收無用信息。

而且如今不少應用也都在作功能的減法，功能越純粹的應用也會受到一些人的青睞；

提供最好的選擇，可是要足夠少，作產品設計如此，生活也是如此。

仍是開頭說的，具體狀況具體分析，這裏蘋果能夠在官網使用極簡主義很大一部分緣由是由於蘋果的產品相對而言比較少，可以作到將全部的產品都展現出來；相反的，淘寶確定就不能用這種方案。

一樣的，功能的極簡也是看你想解決用戶的什麼問題，若是你就是想作功能的聚合那也是沒問題的，看你本身的受衆羣體和你設計的初衷。

2. 統一：減小用戶的學習成本

更多將人機交互行爲控制在無心識狀態下，這樣才能讓人機天然交互。

2.1 顏色、字號

好比最基本的，一個系統要有本身的主題色、要有本身統一的佈局風格、統一風格的 icon...

我我的以爲統一這些的意義在於：可以讓頁面中儘量多的元素有本身的「語義」，造成統一的標準，減小用戶大腦的思考；

這樣在咱們設計頁面的過程當中結構更加清晰，隨之帶來的是培養用戶習慣，讓用戶的潛意識可以直接判斷出設計者想要傳達的含義，節省用戶的腦力。

好比當用戶操做後，在右上角有一個 綠色的 message，那麼即便沒有註明 「成功」 和 「錯誤」 用戶也值得這是一個錯誤的標識。由於有 「X」 的 icon 和紅色的主題色

一樣的，若是你應用的字體顏色使用的很「正確」，那麼用戶若是隻想看關鍵信息就會選擇閱讀顏色最深的（color-text-primary）、字號最大的。

若是用戶更關心一些細節的描述，那麼就會着重看顏色稍微淺一些（ color-text-secondary ）而且字號小一些的文字。相信你在購買機票或者保險的時候必定會找最不起眼的責任條款或者退款協議去閱讀。

這樣就天然給咱們的產品信息進行一個分層，而後用戶根據經驗和潛意識就能夠天然地知道你要傳達的信息。

2.2 佈局

還須要統一的就是佈局，一旦使用了一種佈局，就不要輕易改變，否則會讓用戶無所適從；

好比咱們辦公司的垃圾桶，一個是「可回收」一個是「幹垃圾」，兩個垃圾桶除了最上面的標籤其餘徹底相同，

保潔阿姨常常會調換兩個的位置，致使每次扔垃圾以前都要先看一下標籤，不看就常常容易扔錯。

2.3 文案表述一致

• 描述同一個事物的詞彙要保持統一;
• 上下文的語法、語種、語序要保持統一;
• 操做的名稱和目標頁面標題的名稱保持一致。

仍是想要最開始說的那個案例，這個彈出框相信你必定是要思考一分鐘或者有一次錯誤的實踐才能選對。

這個的問題在於文案表述不一致，提示的內容是

「是否」取消該訂單，可是給的選項並非 「是」 和 「否」

3. 前饋: 讓用戶知道要作什麼

有助於執行類的信息叫前饋（Feedforward）；有助於理解發生了什麼的信息叫反饋（Feedback）。每一個人都知道反饋是什麼，它能夠幫助你知道發生了什麼事。但你怎麼知道你能作什麼？這就是前饋的做用。前饋是控制理論中借用的一個術語。

3.1 使用導航

導航就是在沙漠中的指南針，能在用戶迷路的時候給用戶指路。 在廣義上，任何告知用戶他在哪裏，他能去什麼地方以及如何到達那裏的方式，均可以稱之爲導航。

• 導航菜單（Menu）
• 麪包屑（Breadcrumb）
• 標籤頁（Tabs）
• 步驟條（Steps）
• 分頁器（Pagination）

3.2 合理使用表單提示與幫助

3.3 提供邀請

• 新用戶引導頁
• 引導操做邀請
• 推論邀請：用於交互期間，合理推斷用戶可能產生的需求。
• 更多內容邀請：查看更多內容。

4. 反饋: 讓用戶知道作了什麼

• 實時查詢
• 實時反饋（eg:密碼強度）
• loading

真的很想吐槽一些應用，沒有反饋，根本不知道個人操做的結果成功與否，都要返回再去從新確認。

而後就是白屏這些沒有處理好報錯狀況，會讓用戶不知道發生了什麼。

5. 分類：減小溝通成本，讓用戶更快的接收信息

5.1 增長元素的親密性：讓用戶對頁面結構和信息層次一目瞭然

將關聯性越高的元素放在一塊兒

5.2 使用合理的對齊方式：引導用戶視覺流向，讓用戶更流暢地接收信息

• 文案類對齊 —— 左對齊：統一視覺起點
• 表單類對齊 —— 冒號對齊：讓用戶眼球順着冒號的視覺流，就能找到全部填寫項，從而提升填寫效率。
• 金額數字對齊 —— 相同有效位數右對齊：快速對比數值大小

5.3 適當的增長對比：在不一樣元素之間創建一種有組織的層次結構，讓用戶快速識別關鍵信息。

• 主次關係對比
• 總分關係對比
• 狀態關係對比

5.4 重複相同的元素：快速識別元素之間的關聯性

6. 簡化交互：不打斷用戶心流

每多一次交互，用戶的心流就可能被打斷。特別是頁面之間的跳轉。

6.1 足不出戶：能在當前頁面完成的操做就不要進行頁面跳轉

• 頁面內編輯
  • 當『易讀性』遠比『易編輯性』重要時，可使用『單擊編輯』。
  • 當『易讀性』爲主，同時又要突出操做行的『易編輯性』時，可以使用『文字鏈/圖標編輯』。
• 覆蓋層
  • 刪除確認（儘可能避免使用 Modal，會打亂用戶心流）
  • 詳情通常在列表中，經過用戶『懸停』/『點擊』某個區塊，在當前頁加載該條列表項的更多詳情信息。
  • 將全部的 流程處理 在一個頁面內完成
• 嵌入層
  • 下拉框：將一些詳細信息放入下拉框
  • tab：將消息分類，使用 tab 切換展現

6.2 簡化交互

• 善於使用拖拽
• 列表排序
• 拖拽上傳

7. 專業：開發者的必備素養

7.1 用詞精準完整

• 通用基本用詞要規範，不要寫錯字，詞語表達要完整。
• 專業用語要精準，並是所屬行業承認通用用詞；時間的表述必須明確。

7.2 大小寫和標點符號

• 英文名詞大小寫規範
• 統計數據使用阿拉伯數字
• 謹慎使用感嘆號: 感嘆號會讓文案顯得過於激動，容易讓氣氛變得過於緊張。

7.3 指代明確

不要在同一個句式中混用『你』和『我』，交互中指代混亂會讓用戶至關糾結。

---

復瑣事情簡單化；簡單事情標準化；標準事情流程化；流程事情自動化，萬事莫不如此。