[ 友情提醒 多圖殺流量 ]
前端和設計的日常
你確定這是我給你切的圖?
為什麼這裡的圖示這麼小?
這個間距不對!
點這個按鈕為什麼沒有彈一下!
這個定位少了1PX!
╰（‵□′）╯ 你到底有沒有按照我的圖做啊
...
TOT 哭暈在廁所有沒有~
前端作為實現使用者與產品之間硬連線的存在, 在日常工作中少不了被設計姐姐親切的問(qiang)候(po). 不過仔細想想, 前端和設計是不分家的, 前端主動學習補充一些設計知識, 不僅可以拓寬知識面, 有利於職業生涯, 而且也是培養自己的美感的過程, 最重要的是可以吃上設計姐姐的糖(逃 ε=ε=ε=┏(゜ロ゜;)┛)
JS的高度靈活, 使得我們每一個人的程式碼思考和程式碼想法都能得到幾乎詳盡的表達, 為了使開發過程更加流暢, 我們在團隊中可以通過程式碼模式, 編寫出優良的程式碼結構, 減少專案的混亂程度, 或是通過ESLint規範團隊成員的語法, 減少編輯器一開啟程式碼全紅而尷尬的概率), 以求達到標準. 在設計界其實也有這樣的標準存在: 設計七大定律
我們今天介紹其中最易懂也最好用的一種, 席克定律
席克定律
我們先來看一張圖:
假設我們要在這個列表中尋求某個角色, 第一感覺是不是要瘋掉~ 那如果又是這樣呢:
瞬間感覺介面清晰很多, 不過還可以更好:
席克定律主要描繪的就是這樣一個場景, 當選項不斷增加時, 我們下決定的時長就會增加.
通常情況而言, 選項數量和使用者決定時長呈出類似下面的函式關係:
我們觀察圖片可以發現:
- 使用者有基礎反應時間, 也就是隻要有選項的情況下(就算選項數量只有一個), 使用者仍然需要時間進行反應.
- 當面對的選項數量越多, 使用者需要的反應時長也相應增加.
- 如果選項複雜度不同, 反應時間也會相應變化(主要反應在曲線的曲率變化上)
程式設計師最怕的BUG是找不到的BUG, 不過我們已經知道了席克定律的基本原理, 那反應在介面上常見的互動問題就很好解決了. 根據以上三點原理, 我們可以大致總結出這幾點不同的解決方案:
- 分步選擇, 均分總複雜度到每一個步驟
- 限制選項數量, 保留基本的選項
- 控制單個元素的複雜度, 使頁面簡單好理解
我們用三個例子分別描繪這些解決方案:
分步選擇
我們在網站搜尋素材時, 種類繁多的素材總是讓我們無所適從. 我們可以使用分類選擇來均分每一個選擇的步驟, 這樣就能很快篩選出我們想要的素材了:
限制選項數量
雖然說, 右鍵開啟選單這個快捷設計很大程度上而言提升了使用滑鼠時的幸福感, 但你們有沒有覺得, 當選項數量一多的時候整個人都不好了. 我們對比一下兩個軟體, 當我在它的系統托盤區域點選右鍵時, 會彈出怎樣的畫面:
首先是一個Steam上免費的截圖軟體Sharex:
再是一個免費的檔案搜尋工具Listary:
哈哈, 差距超明顯有沒有, 右鍵點選後者的托盤, 我能很清晰的做出決定我將要做什麼, 而面對ShareX龐大的選單時, 作為新手使用者的我, 肯定是一臉黑線, 這簡直就是折磨!
題外話: 並不是說哪個軟體不好, 像ShareX這種功能強大的軟體需要更高的學習成本, 是理所應當的. 我們最終關注的點不在設計定律, 而在使用者, 當面對使用者反應時間/出錯率, 操作複雜度/功能複雜度等多方面維度的立體考慮時, 我們往往要結合具體的產品和對應使用者做具體分析.
控制單個元素的複雜度
就像你做閱讀理解, 雖然說每道閱讀理解都只有4個選項, 但是, 簡單的一下子就能做出來, 難的就死也做不出來一樣 TOT
老師怎麼用難題折磨你, 你就應該怎麼去折磨你的使用者, 你就應該怎麼避免去用複雜邏輯折磨使用者.
我們用谷歌登陸框舉例, 登陸本身是沒有複雜度可言的, 但是如果我們假設以下情況:
- 使用者使用手機登陸, 手機螢幕很小
- 手機鍵盤很高, 容易遮擋使用者視野
- Input框如果設計的很小, 那麼如果填錯將難以修改
谷歌的應對方案是將登陸步驟拆分開, 填寫使用者名稱和填寫密碼作為了兩個獨立的邏輯存在, 一個頁面只有一個模組, 在分步的基礎上進一步降低了介面複雜度, 提高介面可用性, 減少使用者反應時間.
擴充
Lionad : 規範是死的, 人是活的
咳咳, 上面那就話是我胡謅的.
我想說的是, 無論規範(程式碼規範, 設計規範)定義的多麼嚴格, 我們總會有跳出規範施展手腳的時候, 比如著名的太空梭式程式碼. 在具體的專案實施過程中, 我們通常會在規範的基礎上融合多種通用的手段, 就像是我們上面介紹的三種減少使用者反應時間的解決方案中, 他們自有某種相似的概念, 在某種程度上來說是可以通用的, 甚至我們還可以結合其它定律以通使用:
- 就像是分步解決的過程中, 通常要結合泰思勒定律, 考慮到整個系統的複雜度可壓縮程度是有限的, 分步步驟需要仔細權衡;
- 限制選項數量的過程中, 我們可以使用奧卡姆剃刀原理, 剔除頁面榮譽, 僅保留頁面的基本元素, 如網易雲音樂的車載模式;
- ...
這裡還是需要再強調三遍: 理論不能脫離實際, 定律也應該結合具體專案使用
結語
通過上面的介紹, 我們對席克定律有了一個基本的認識, 我們就可以時常把他們代入到產品中進行思考啦, 只有在代入思考的過程中, 才能對這些定律有更加深刻的體會. 作為一個合格的前端, 通悉互動, 打磨頁面, 不僅是對自己技術和職業的負責, 也是對使用者的負責, 希望此文對你有所幫助, 看到這裡都是真愛啊(笑.jpg) 請點贊 收藏 關注 三連擊!
(我是Lionad, 剩下的幾大定律隨緣更新了, 歡迎私信交流 我逃 ε=ε=ε=┏(゜ロ゜;)┛ 反正你抓不住我~)