一文了解設計規范的前世今生

6 評論 10912 瀏覽 64 收藏 11 分鐘

設計規范是遵循一定的設計原則,在產品周期下不斷進行迭代和升級。變化的用戶習慣,以及新的交互模式,因此需要不斷跟緊潮流了解新興事物,保持好奇心,才能產出更具有時代特性的產品。

設計規范一詞于我入設計行業之時便始終伴隨著我,這是一個貫穿始終卻又作用良多的物件兒。

先有產品還是先有規范?

在設計過程中,產品的各項功能從1.0版本的基礎功能到后來2.0、3.0等的期望功能、興奮功能等會,產品在不斷的經歷迭代,不停蛻變。在一開始你是無法預測產品未來的走向的,所以,設計規范也會經歷1.0、2.0、3.0……的迭代

而這些迭代必然是根據產品不停的發展帶來的反饋,在一些細小的變化及修改積累到一定程度的時候,就會為產品帶來一系列新的風格變化,且不再適用于之前的規范。所以,必須對規范進行更新及修改,來適應新走向,給產品帶來新一輪風格升級,確保產品一致性。

設計規范都是什么樣兒的?

設計規范內容包含:主要色彩、文字、icon、組件、模塊、頁面。

一個產品的內容物必然包括以上6點,這樣才能組成一個完成一個基本完整的頁面。

  • 色彩:產品的主色調是什么,紅色、藍色、綠色、橙色。明度區分,深沉的,亮眼的,還是濃郁的,主色調決定了產品的整體調性。
  • 文字:APP里常見的字體無非是12、14、16等的常規字體大小,你選擇字體的大小、粗細程度也是對產品整體風格有一個很大的影響的,字體纖細較為時尚,字體粗重更加沉穩。
  • 圖標:線性圖標、塊面圖標、雙色圖標、多色圖標、漸變圖標、寫實圖標等等
  • 模塊組件:下拉列表菜單、搜索模塊、新聞模塊、信息卡片模塊、輸入模塊、按鈕等
  • 頁面:首頁、新聞頁面、我的頁面、設置頁面、音頻頁面、視頻頁面、詳情頁面等。

主流設計規范

現在主流的設計規范,從大的方面說起,包含谷歌系統出具的Meterial Design,以及基于蘋果的iOS人機規范指南,還有一些大廠的整體設計組件庫比如Ant Design、Airbnb DLS等。

基于各家的產品風格和設計理念產出的設計規范語言體系,通過模塊化的解決方案,降低冗余的生產成本,讓設計者能專注于更好的用戶體驗,這種可持續性、可發展性是維護設計規范系統產生價值的核心。

設計規范的來源

設計規范基于諸多已經成理論的設計原則,在方向上具有指導作用,在設計頁面時可細讀體會理解,并加以運用?。

尼爾森10大可用性原則可謂是指導設計交互等的綜合性的原則,后續的很多原則都多少包含了它的影子,讓我們來重點解讀一下:

  1. 系統可見性原則:在我理解呢,就是需要給予反饋,一步操作一個反饋,哪怕是輕點按鈕等也需要給一個狀態甚至是些微的顏色改變等,時時刻刻讓用戶有操縱感,清晰可見。
  2. 場景貼切原則:你所做的一切設計都需要與真實世界做匹配,就如當年橫空出世的iPhone,日歷、計算器、相機等都是采用的擬物風格,就連我們習以為常的四方形圓角,那也是經過深思熟慮之后考慮到用戶對觸屏使用的感受,圓角不會刺傷手指而做的設計,而非隨意為之。
  3. 可控性原則:這里說的就是用戶的控制性能和自由度,想點擊哪里就跳轉對應頁面,不希望有通知就可以及時關閉,支付方式可選擇,行為可撤銷等等,都屬于可控性原則范圍內。
  4. 一致性原則:產品要保持一致,不能這里的叫確定按鈕,那里的叫確認按鈕。主色是紅色,你不能改個橘紅和玫紅一起做主要視覺色。嗯,這很好理解的吧。
  5. 防錯原則:在手機等這些移動設備上操作,必不可少的會造成誤觸或者是點擊不當等,輸入錯誤等,最常見的防錯原則應用就是密碼的修改,需要你輸入兩次以作確認,來降低輸錯的可能。還有所有頁面都可返回上一層級,死所有操作都有可修改,可取消等等。
  6. 協助記憶原則:對用戶來說識別比記憶的負擔要小的多,在優化體驗上,這也是一條非常友好的原則。案例就例如一些歷史標簽、登錄頁面的上次登錄提示,
  7. 靈活和高效原則: 智能聯想輸入等,如果你的應用不能高效解決我的需求,那我拋棄你是非常快速的一件事。
  8. 美學和最簡主義原則:例如現在的陰影風格設計、高光設計等,還有篇平化設計,都是基于美學原則趨于最簡主義原則的案例。
  9. 幫助用戶識別、診斷、并從錯誤中恢復:密碼輸錯的提示、密碼提示找回、實在不行我們還有客服,等等
  10. 幫助和文檔:一些操作的簡短提示,甚至是一些長段的介紹說明這些就是你不出問題,用戶大概率不會去看的東西,但是你一定要有。

米勒定律,也稱之為“7±2法則”,最常見的就是分段記憶,例如銀行卡號的輸入為每4位間隔一次,目的就是降低記憶成本,提高信息的易讀性,從而達到視覺防錯的作用。

席克定律也叫克制定律,選擇越多,做出選擇的時間也就越多,強調精簡設計。

費茨定律,產品可用性中的效率指標,距離決定你的操作效率,你需要強調關聯性就讓元素之間靠近,如果為了防止用戶誤操作或習慣性操作導致錯誤可以放遠,可以正著用當然也可以反正來。

這些定律、原則都是指導我們設計、交互以及與設計規范等息息相關的原則,我們需在理解的基礎上合理運用,遵從規則順勢而為也不失為一種很省力的做法。

設計規范的作用

  • 宏觀上對內統一:不會出現來對接的設計不知道主色是啥,對接的開發不知道原來常用的字色、字體大小是啥,導致產品出現不一致,對內管理出現混亂。讓管理和合作都變得容易。
  • 提高設計效率:組件可以多次甚至全應用復用,例如一些常規按鈕、控件等,協同工作的情況下,可以保證產出一致。
  • 一致性的用戶體驗:統一的交互帶來統一的用戶體驗。
  • 維護方便易于拓展:減少重復開發,保持內部統一,不管是在設計協作還是開發對接都能有一套統一的規范可循,降低溝通成本,利于迭代維護,不會因為心血來潮或追趕潮流的設計而導致產品風格混亂。

大多數移動應用是暫態的,用戶用完就走,在短時間內需要給用戶建立起深刻的印象,你就需要在產品整體建立起統一化的風格,提高辨識度。

設計規范是遵循一定的設計原則,在產品周期下不斷進行迭代和升級。變化的用戶習慣,以及新的交互模式,移動設備的不斷更新,大眾的認知也在慢慢被改變。

所以,我們需要不斷跟緊潮流了解新興事物,保持好奇心,才能產出更具有時代特性的產品。

 

作者:就不,公眾號:豬三的日常

本文由 @就不 原創發布于人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基于CC0協議。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 請問去哪里可以看到微信/考拉/網易云比較完整的設計規范

    來自北京 回復
  2. 總結的很棒,夸??

    回復
  3. 大佬最近想研究下交互的規范,有沒有具體的交互參數可以學習的

    回復
    1. 容我整理一下~~

      來自上海 回復
  4. 寫的不錯,加油

    來自上海 回復
    1. 謝謝三爺 ??

      來自上海 回復