<strike id="cy2gs"><menu id="cy2gs"></menu></strike>
  • <del id="cy2gs"><dfn id="cy2gs"></dfn></del>
  • 從混沌到有序:設計規范全方位指南

    2025-3-13    杰睿

    從零開始,打造設計規范:設計原則、流程與工具的全方位指南
    整個文章我們會講
     
    •  
      為什么建立設計規范?
    •  
      什么時候建立設計規范
    •  
      以及具體的設計規范怎么做
     
    一、設計規范的目標?
    首先需要明確設計規范的目標,也就是為什么建立設計規范,這里包括提高用戶體驗、降低開發成本、提高團隊協作斜率等。這些目標將為后續的規范制定提供方向。
    還有就是大家都知道,在做項目時如果沒有明確的目標和價值,是很難推動的。
    從混沌到有序:設計規范全方位指南
     
     
    二、什么時候建立設計規范?
    在項目全面進入ui設計之前,先設計幾個核心頁面的demo
    ,確立整體的基礎規范和設計風格,把一些基礎的設計規范定義出來,例如
    命名、尺寸、間距、顏色、字體、核心控件
    等、這樣在開展設計的過程中保持一致性和統一性,當然,在項目設計過程中,UI設計規范也需要根據實際情況去調整補充。
    從混沌到有序:設計規范全方位指南
     
     
    三、設計規范具體要怎么做?
    這里先講一些基礎通用的規范
    3.1、間距
    在間距部分我們需要把一些
    頁面間距、模塊間距、元素間距
    ,這些要定義出來
    像我平時在工作中
    通常以8px作為基數
    ,以此衍生出
    8、16、24、32、48、64
    ,這6個間距數值,完全能夠滿足絕大多數的使用場景。當然,針對信息較少的頁面也會使用到
    120、160、200...其他間距數值,例如缺省頁、登錄頁面等。出去這些特殊頁面,基本上通用的就上面那6個就足夠了
    從混沌到有序:設計規范全方位指南
     
     
     
    3.2、顏色規范
    我們要先把主色調和輔助色,通常主色都是根據
    品牌形象和目標用戶
    的需求選擇。
    拿在顏色的定義中需要注意以下幾點
    1、使用色彩心理學:
    根據不同的顏色和情感聯想,選擇適合的顏色來傳達品牌形象和用戶體驗。例如,藍色通常被認為具有專業、信任和穩定的感覺,而紅色則具有激情、活力和創新的聯想。
     
    2、建立層次結構:
    使用顏色的飽和度和明度來建立層次結構。將重要的設計元素設置為高飽和度和明亮的顏色,使其在頁面上突出顯示,而將次要的設計元素設置為低飽和度和較暗的顏色。
    3、避免使用過多的顏色:
    過多的顏色可能會使頁面顯得混亂和難以聚焦。在設計過程中,盡量使用有限的顏色組合,并且要避免使用過多的對比色或互補色。
    從混沌到有序:設計規范全方位指南
     
     
    3.3、文字規范
    我們需要把
    字體、字號、顏色、行距
    、這些給定義清楚,有規律的大小字號更有利于閱讀,(另外要注意一些特殊字體的版權問題)
    常用的字體大小
    20px、24px、28px、32px、36px,44px,48px,且都是間隔4px
    ,設計師需要根據具體場景去決定字體大小,以確保用戶能夠輕松閱讀和理解界面信息層級比重。
     
    3.4、UI圖標規范
    圖標是UI設計的重要組成部分,它可以使圖標看起來更加
    美觀、易用、統一和有吸引力
    。也傳達著整個UI視覺風格調性,和系統功能的作用。
    在圖標設計上一定要簡單清晰,定義規范時要對
    圖標的大小、圓角、線條粗細、等有明確的指示
    ,在繪制的時候我們可以制定自己的
    網格規范
    ,以便參考。
    從混沌到有序:設計規范全方位指南
     
     
    3.5、按鈕
    按鈕尺寸:
    一般來說,按鈕的尺寸應該能夠適應不同的屏幕尺寸和分辨率,并且應該能夠突出顯示。
    按鈕形狀:
    應該具有清晰的輪廓和圓潤的邊角,圓角大小是多少
    按鈕顏色:
    按鈕的顏色應該與整體UI設計風格相協調,并且應該能夠突出主題和重點信息。一般主按鈕大多使用主題色。
    按鈕文本:
    按鈕的文本應該簡短明了,并且應該能夠清晰地表達按鈕的功能。還需要定義清楚按鈕中限制的字數。
    按鈕內邊距:
    按鈕的內邊距應該能夠擴大按鈕的可點擊范圍,并且應該能夠提高用戶點擊按鈕的準確性。需要考慮極限情況下,最小應該保持多少內邊距。
    按鈕狀態:
    按鈕的狀態應該能夠表達按鈕的狀態和功能。一般來說,按鈕的狀態包括正常狀態、點擊狀態等。
    從混沌到有序:設計規范全方位指南


    作者:考思考
    鏈接:https://www.zcool.com.cn/article/ZMTYxMjA4OA==.html
    來源:站酷
    著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://www.skdbbs.com

    存檔

    主站蜘蛛池模板: 中文字幕日韩精品在线| 国产麻豆精品久久一二三 | 久久久国产乱子伦精品作者| 国产精品99久久久久久www| 国产成人精品电影在线观看| 亚洲AⅤ永久无码精品AA| 国产精品无码永久免费888| 成人午夜精品网站在线观看| 久久精品中文騷妇女内射| 亚洲精品和日本精品| 国产一区麻豆剧传媒果冻精品| 亚洲精品你懂的| 久久99精品国产麻豆宅宅| 国产成人A人亚洲精品无码| 无码人妻精品一区二区三| 区亚洲欧美一级久久精品亚洲精品成人网久久久久 | 欧美日韩精品一区二区三区不卡| 国产精品无码久久久久久| 亚洲精品专区| 久久五月精品中文字幕| 精品无码综合一区| 精品乱子伦一区二区三区| 国产精品久操视频| 99久久夜色精品国产网站| 久久线看观看精品香蕉国产| 国产精品嫩草影院一二三区入口| 国产精品无码久久综合| 国产成人无码精品一区二区三区| 精品国产第一国产综合精品| 久久久久人妻精品一区二区三区| 亚洲AV无码久久精品色欲| 午夜精品乱人伦小说区| 亚洲AV乱码久久精品蜜桃| 无码人妻精品一区二区三区66| 无码国产精品一区二区免费模式 | 国产精品91av| 91在线视频精品| 国产在线不卡午夜精品2021| 国产亚洲精品a在线观看app| 久久国产乱子精品免费女| 亚洲精品理论电影在线观看|