<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          超全面的B端設計規范指南(一):設計原則

          2023-2-7    博博

          前言

          B 端設計離不開設計規范這個話題,而做好設計規范是一個龐大復雜工程,很多人對這些處于一知半解狀態,在這個系列文章里我通過結合自己平時的項目案例來談談自己對 B 端設計規范的一些理解,希望可以帶來一些啟發。

          本篇先談談設計規范制作的指導思想--設計原則,后續文章再展開講一下常見各種組件的設計規范。

          一、設計規范作用

          設計規范作為 B 端設計中非常重要的一環,它的作用主要體現在以下三個方面:

          超全面的B端設計規范指南(一):設計原則

          在日常工作中,當項目組收到一個新的需求時,如果已經具備了成熟的設計規范體系,其工作效率往往會得到很好的提升。最后上線的頁面不用走查還原度。以下是具體工作流程:

          超全面的B端設計規范指南(一):設計原則

          二、設計原則

          通過前面內容我們知道了設計規范對于產品設計意義重大,那么制定設計規范制定依據又是什么呢?這里就要引出設計原則這個話題,設計原則是設計規范的總的綱領,所有的設計規范都應當以設計原則為基準。設計原則主要包含以下內容:

          超全面的B端設計規范指南(一):設計原則

          接下來就圍繞設計原則清晰、高效、友好、可控這四個方面展開講解。

          1. 清晰

          清晰原則主要從視覺角度讓界面信息傳達合理,提高用戶信息獲取效率。主要包含對比,親密,對齊,重復四個方面。

          ① 對比:

          對比是指界面中為了區分信息層級,強化元素對比度,使用的很常見的一種手段,例如下圖中利用大色塊按鈕與線框按鈕形成對比來凸顯關鍵按鈕;又比如通過對文字字號加大,字體加粗,顏色加深來與弱文案形成對比,凸顯關鍵文字信息。

          超全面的B端設計規范指南(一):設計原則

          ② 親密:

          如果信息之間關聯性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,則它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層次一目了然。

          超全面的B端設計規范指南(一):設計原則

          ③ 對齊:

          在界面設計中,將元素進行對齊,既符合了用戶的認知特點(我們往往傾向使知覺對象的直線延續還是直線,曲線延續還是曲線),也能引導視用戶視覺流,讓用戶更流暢地接收信息。

          超全面的B端設計規范指南(一):設計原則

          ④ 重復:

          重復是指相同的元素在項目中重復引用,作用是可以有效降低用戶的學習成本,同時提高這些元素之間的關聯性。

          超全面的B端設計規范指南(一):設計原則

          2. 高效

          高效原則體現在便捷、輕量、簡化、一致幾個方面,目的是通過合理的方式讓產品操作更加便捷;交互體驗與內容更加輕量和簡化;以及產品風格保持一致。下面結合幾個常見案例說明如何應用這一原則。

          ① 合理利用拖拽--便捷、輕量:

          在涉及到諸如上傳文件,排序,滑動輸入,搭建等需求時,合理采用拖拽交互往往可以打造更加便捷用戶體驗。

          超全面的B端設計規范指南(一):設計原則

          ② 盡量減少不必要的跳轉--便捷、輕量:

          用戶操作過程盡量減少跳轉,以實現交互減步長,從而使用戶操作更高效輕量。例如能用原位操作就不考慮展開收起;能用展開收起就不用氣泡...依次類推(優先級從高到低:原位 > 展開收起 > 氣泡 > 彈窗 > 抽屜 > 新頁面)

          超全面的B端設計規范指南(一):設計原則

          ③ 放大點擊熱區--便捷:

          放大可點擊按鈕熱區,相對于較小點擊熱區,具備更絲滑操作體驗。

          超全面的B端設計規范指南(一):設計原則

          ④ 懸停即現--輕量:

          利用懸停即現,避免信息過于重復啰嗦,簡化頁面提高閱讀體驗。

          超全面的B端設計規范指南(一):設計原則

          ⑤ 折疊次要功能--簡化:

          頁面功能按鈕過多時,可將次要按鈕收納到一起,點擊時再展開,外面只展示高頻操作或重要按鈕,保證頁面內容簡潔。

          超全面的B端設計規范指南(一):設計原則

          ⑥ 統一樣式--一致:

          一致性是指在不同頁面中相同操作應保持一致視覺與交互樣式,可有降低用戶學習成本與企業開發成本。

          超全面的B端設計規范指南(一):設計原則

          3. 友好

          友好原則應貫穿用戶操作前,操作中以及操作后三個階段,給予用戶及時反饋與幫助。

          ① 操作前:

          在用戶操作前給到合適的引導與幫助,有效減少用戶迷茫感。

          超全面的B端設計規范指南(一):設計原則

          ② 操作中:

          通過交互效果以及頁面樣式讓用戶可以清晰感知到自己當前操作。

          超全面的B端設計規范指南(一):設計原則

          ③ 操作后:

          利用界面中元素變化清晰直觀展示當前的狀態

          超全面的B端設計規范指南(一):設計原則

          4. 可控

          可控主要體現在自由和導航兩個方面。

          ① 自由:

          自由即指用戶可以自由完成一些操作,例如回退,撤銷,終止等。

          超全面的B端設計規范指南(一):設計原則

          ② 導航:

          導航是指用戶隨時知曉當前所在位置,而且可以利用導航隨意到達目標頁面。

          超全面的B端設計規范指南(一):設計原則

          通過本篇內容我們大概知道了制作設計規范主要方向,那么具體到每個組件上,我們該如何去設計呢?后續篇章將細分聊聊如何去設計 B 端常見組件的一些內容。

          部分參考資料:

          1. 《B 端產品設計-Mia》
          2. 《Ant Design》



          作者:huang。亮      來源:優設網



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



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

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合