火星網(wǎng)校
我的設計成長筆記—第14篇(UI設計4)
發(fā)布時間：2024-04-01 14:52:35 瀏覽量：201次
UI設計4
2019年5月23日
今天是我距離30歲的倒數(shù)第295天
這里是我的設計成長筆記
—————————————————
接著上一篇
瀏覽：布局框架結構
目的是可以提高信息獲取率，完成核心操作動作，提高可用性。
也就是在頁面設計的時候對排版的要求，要結合用戶的瀏覽習慣，品牌調性，營銷目的進行框架布局的調整和組件的選擇。
確認：給出反饋
不論成功或者失敗，一定要給出結果，成功后的下一步操作，失敗后的原因和解決方法，所有的頁面都是“環(huán)狀”一定要流暢。
錯誤：同上
開發(fā)階段錯誤的頻率會非常高，要優(yōu)化用戶體驗就必須要有及時反饋的入口，給出最快的解決調整是讓產品良性發(fā)展的必然方法。
結束：Happy ending
結合上一篇提到的峰終定律，在一系列操作達到最終結束的時候可以營造一個快樂的結尾作為彩蛋（當然，適情況來就好了）
中斷：幾乎沒有
但是作為小公司也要準備好備案應急方案，比如多個備份，中斷的通知方式，補償方式等等。
好，理解完界面狀態(tài)部署的9個維度后，接下來按照色彩—圖標—樣式—命名繼續(xù)梳理設計規(guī)范。
色彩
在平面設計的時候，一般要給色彩將出原理挺不好說的，比如為什么我的企業(yè)要用這個配色，為什么logo只用這個配色等等，同樣，在UI設計的以后配色的解釋說明也需要一個依托，我一般使用這樣的說辭：通過情緒版找出衍生詞，建立相應的圖片系統(tǒng)選取與企業(yè)氣質相符合的圖片進行色彩統(tǒng)計，挑選最適合的顏色選取主題色。
插播：情緒版
情緒版是通過原生關鍵詞（企業(yè)提供、相關聯(lián)、產品相關聯(lián)等）進行頭腦風暴挑選出衍生關鍵詞，然后搜集相關的圖片（例如視覺映射、心理映射、物理映射等）提取生成情緒版。
在UI界面制定規(guī)范的時候色彩規(guī)范一般選取：1個主色（大面積、表達氣質）、2個輔色（同一色或鄰近色，烘托襯托，拉開層次）、若干個高亮色（紅色、黃色、橙色、藍色、綠色等，強調確認、錯誤、等待等等）、1-3個基本色（素灰，分割線、加載色塊、灰度圖等等）
好像目前網(wǎng)絡上沒有講配色定義的文章，大部分都是只說如何配色。其實整套界面下來顏色定義好了是很節(jié)約時間的一件事。
圖標
應用位置：導航欄、標簽欄、操作欄等等
樣式：線性、面性、線面結合、文字、圖文、橫排、豎排
尺寸：最大尺寸、最小尺寸、常規(guī)尺寸
五種狀態(tài)：默認、懸停、點擊、禁止、忙碌
格式：png\svg
樣式
這里的樣式包括文字、圖標、組件的：間距、圓角、陰影
文字：字間距、行間距
模塊標題（26、28、30、32）
內容標題（26、28、30、32）
特殊內容標題（40、48）
頻道區(qū)正文（24、26、28）
內容正文（22、24、26）
標簽文字（20、22、24）
間距（16、18、20、26、30）
單位是px，倍率是1倍圖
組件間距
搜索欄（26、28、30）
分割線間距
各類模塊間距
圓角數(shù)值
陰影大小、偏移、模糊、擴展、顏色等
當然，這些也是結合設計方案逐步制定的，上面列出的也是我個人常用到的一些數(shù)據(jù)，也是慢慢摸索覺得這些細節(jié)設定好標準后會大大提高設計的效率和質量。（僅供參考哈）
命名
命名開始就從視覺規(guī)范開始過度到交互規(guī)范的范疇了，下一篇介紹命名，就開始梳理交互規(guī)范。
好啦，今天就到這吧
就醬～拜拜
——————————————————————
文中涉及相關鏈接
https://www.uisdc.com/mood-board-improve-persuasive
：關注Jam吉馬的成長筆記 回復“吉馬”領取設計管理工具
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網(wǎng)站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網(wǎng)站,這些網(wǎng)站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
4. 10個免費學習UI設計的網(wǎng)站 提升你的設計能力
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網(wǎng)站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網(wǎng)頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現(xiàn)代平面...
-
7. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數(shù)字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
9. 物聯(lián)網(wǎng)APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
10. 武漢UI設計培訓班費用怎么樣？想學UI設計要多少錢？
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
最新文章
