LD | 前端必定要知道的設計常識(一) | 席克定律

[ 友情提醒 多圖殺流量 ]

前端和設計的平常

你肯定這是我給你切的圖?

爲何這裏的圖標這麼小?

這個間距不對!

點這個按鈕爲何沒有彈一下!

這個定位少了1PX!

╰（‵□′）╯ 你到底有沒有按照個人圖作啊

...

TOT 哭暈在廁全部沒有~

前端做爲實現用戶與產品之間硬鏈接的存在, 在平常工做中少不了被設計姐姐親切的問(qiang)候(po). 不過仔細想一想, 前端和設計是不分家的, 前端主動學習補充一些設計知識, 不只能夠拓寬知識面, 有利於職業生涯, 並且也是培養本身的美感的過程, 最重要的是能夠吃上設計姐姐的糖(逃 ε=ε=ε=┏(゜ロ゜;)┛)

JS的高度靈活, 使得咱們每個人的代碼思考和代碼想法都能獲得幾乎詳盡的表達, 爲了使開發過程更加流暢, 咱們在團隊中能夠經過代碼模式, 編寫出優良的代碼結構, 減小項目的混亂程度, 或是經過ESLint規範團隊成員的語法, 減小編輯器一打開代碼全紅而尷尬的機率), 以求達到標準. 在設計界其實也有這樣的標準存在: 設計七大定律

咱們今天介紹其中最易懂也最好用的一種, 席克定律

席克定律

咱們先來看一張圖:

假設咱們要在這個列表中尋求某個角色, 第一感受是否是要瘋掉~ 那若是又是這樣呢:

瞬間感受界面清晰不少, 不過還能夠更好:

席克定律主要描繪的就是這樣一個場景, 當選項不斷增長時, 咱們下決定的時長就會增長.

一般狀況而言, 選項數量和用戶決定時長呈出相似下面的函數關係:

咱們觀察圖片能夠發現:

1. 用戶有基礎反應時間, 也就是隻要有選項的狀況下(就算選項數量只有一個), 用戶仍然須要時間進行反應.
2. 當面對的選項數量越多, 用戶須要的反應時長也相應增長.
3. 若是選項複雜度不一樣, 反應時間也會相應變化(主要反應在曲線的曲率變化上)

程序員最怕的BUG是找不到的BUG, 不過咱們已經知道了席克定律的基本原理, 那反應在界面上常見的交互問題就很好解決了. 根據以上三點原理, 咱們能夠大體總結出這幾點不一樣的解決方案:

1. 分步選擇, 均分總複雜度到每個步驟
2. 限制選項數量, 保留基本的選項
3. 控制單個元素的複雜度, 使頁面簡單好理解

咱們用三個例子分別描繪這些解決方案:

分步選擇

咱們在網站搜索素材時, 種類繁多的素材老是讓咱們無所適從. 咱們可使用分類選擇來均分每個選擇的步驟, 這樣就能很快篩選出咱們想要的素材了:

限制選項數量

雖說, 右鍵打開菜單這個快捷設計很大程度上而言提高了使用鼠標時的幸福感, 但大家有沒有以爲, 當選項數量一多的時候整我的都很差了. 咱們對比一下兩個軟件, 當我在它的系統托盤區域點擊右鍵時, 會彈出怎樣的畫面:

首先是一個Steam上免費的截圖軟件Sharex:

再是一個免費的文件搜索工具Listary:

哈哈, 差距超明顯有沒有, 右鍵點擊後者的托盤, 我能很清晰的作出決定我將要作什麼, 而面對ShareX龐大的選單時, 做爲新手用戶的我, 確定是一臉黑線, 這簡直就是折磨!

題外話: 並非說哪一個軟件很差, 像ShareX這種功能強大的軟件須要更高的學習成本, 是理所應當的. 咱們最終關注的點不在設計定律, 而在用戶, 當面對用戶反應時間/出錯率, 操做複雜度/功能複雜度等多方面維度的立體考慮時, 咱們每每要結合具體的產品和對應用戶作具體分析.

控制單個元素的複雜度

就像你作閱讀理解, 雖說每道閱讀理解都只有4個選項, 可是, 簡單的一會兒就能作出來, 難的就死也作不出來同樣 TOT

老師怎麼用難題折磨你, 你就應該怎麼去折磨你的用戶, 你就應該怎麼避免去用複雜邏輯折磨用戶.

咱們用谷歌登錄框舉例, 登錄自己是沒有複雜度可言的, 可是若是咱們假設如下狀況:

1. 用戶使用手機登錄, 手機屏幕很小
2. 手機鍵盤很高, 容易遮擋用戶視野
3. Input框若是設計的很小, 那麼若是填錯將難以修改

谷歌的應對方案是將登錄步驟拆分開, 填寫用戶名和填寫密碼做爲了兩個獨立的邏輯存在, 一個頁面只有一個模塊, 在分步的基礎上進一步下降了界面複雜度, 提升界面可用性, 減小用戶反應時間.

拓展

Lionad : 規範是死的, 人是活的

咳咳, 上面那就話是我胡謅的.

我想說的是, 不管規範(代碼規範, 設計規範)定義的多麼嚴格, 咱們總會有跳出規範施展手腳的時候, 好比著名的航天飛機式代碼. 在具體的項目實施過程當中, 咱們一般會在規範的基礎上融合多種通用的手段, 就像是咱們上面介紹的三種減小用戶反應時間的解決方案中, 他們自有某種類似的概念, 在某種程度上來講是能夠通用的, 甚至咱們還能夠結合其它定律以通使用:

• 就像是分步解決的過程當中, 一般要結合泰思勒定律, 考慮到整個系統的複雜度可壓縮程度是有限的, 分步步驟須要仔細權衡;
• 限制選項數量的過程當中, 咱們可使用奧卡姆剃刀原理, 剔除頁面榮譽, 僅保留頁面的基本元素, 如網易雲音樂的車載模式;
• ...

這裏仍是須要再強調三遍: 理論不能脫離實際, 定律也應該結合具體項目使用

結語

經過上面的介紹, 咱們對席克定律有了一個基本的認識, 咱們就能夠時常把他們代入到產品中進行思考啦, 只有在代入思考的過程當中, 才能對這些定律有更加深入的體會. 做爲一個合格的前端, 通悉交互, 打磨頁面, 不只是對本身技術和職業的負責, 也是對用戶的負責, 但願此文對你有所幫助, 看到這裏都是真愛啊(笑.jpg) 請點贊 收藏 關注 三連擊!

(我是Lionad, 剩下的幾大定律隨緣更新了, 歡迎私信交流 我逃 ε=ε=ε=┏(゜ロ゜;)┛ 反正你抓不住我~)