火星網校
我的設計成長筆記—第13篇(UI設計3)
發(fā)布時間：2024-03-15 14:05:48 瀏覽量：195次
UI設計3
2019年5月21日
今天是我距離30歲的倒數第295天
這里是我的設計成長筆記
—————————————————
加班-出差-加班...好累
上了歲數越來越覺得身體負擔不起了，前幾年還覺得自己身體很好，這一年開始發(fā)現自己腰痛、背痛、手腕痛了。今年還是增加一個運動計劃吧，平時不注意休息，工作計劃被動熬夜也頻繁，再加上出差時間安排，晚上也睡不好，日積月累現在開始感覺自己有點力不從心了，哎..同志們也注意下吧，身體才是革命的本錢。
好了，繼續(xù)總結
上次聊到了
原型制作
原型制作常用的軟件是Axure，對于產品來講應該是相對簡便，而且可以做出各種交互效果。但是對于我來說等于要再接觸一個新軟件了，感覺有點麻煩，學了一下其實功能使用sketch+交互軟件（principle、flinto、hype3..)一樣可以替代，所以最后果斷放棄了Axure（建議了解一下，萬一必須用呢，咱也能上對吧）
用戶體驗地圖，也是交互分析的開始
用戶體驗地圖是一個可視化地描述用戶使用產品或接受服務的體驗情況，以此發(fā)現用戶在整個使用過程中的問題點和滿意點，并從中提煉出產品或服務中的改進點和機會點。
交互分析
這里提一個知識點：峰終定律
交互分析是一個很重要的點，大量的設計前期鋪墊工作都是在這個階段完成的，就像平面設計前期的調研表一樣，目的也是為了摸清用戶或者甲方到底想要的是什么，唯一不同的是用戶體驗是一個長期實時反饋的調研，平面設計則是階段性的。其實在學習UI設計的過程，也會對平面有一些反思，UI設計對細節(jié)的注重，對規(guī)范的嚴苛，其實應用在平面中都是很好的促進，尤其是這種產品思維。如果企業(yè)設計能夠學習和理解UI設計這種迭代和用戶體驗的方法，那么對企業(yè)設計也是一個很大的提高。
初步的交互我一般用sketch畫好后導入藍湖或者磨刀這種第三方的平臺里分享鏈接就好了，操作流程簡單很容易團隊其他工種的同事理解（如果不想上傳到第三方，也可以使用sketch的一個插件Sketch Measure可以導出獨立的適配文件）
使用這些基本帶交互的界面，在模擬相對應的使用場景里進行體驗調研即可。
結合品牌產品的運營活動，比如投放渠道，推廣方案，轉化方案等，確定在哪個頁面位置提供活動入口，提供什么樣的展示方式和操作流程。
最后整理好所有的調研資料活動方案交互流程等文檔進行方案確定，確定后開始制作第一版本的原型產品。
在開始制作原型之前，嗯
首先要確定階段性實現方案制定，給整套方案進行優(yōu)先級的排序，哪些功能是第一個開發(fā)版本要實現的，哪些可以以后慢慢迭代，哪些是不確定性需求等。這個階段最容易犯什么都想要，什么都要做，最后抓不住真正需求的情況，而且反復的調整給整個制作團隊帶來的內耗是非常巨大的。
其次要確定上線媒介，是web、小程序、ios、安卓，是否要多端適配，是自適應還是響應式等等。這樣可以在設計稿階段就預留好功能界面的位置，不至于后面調整尺寸變形、字體排版不夠等問題。同時還有不同的媒介也會涉及一些動效不兼容的情況，在后面制作效果的時候會遇到。
最后還要確定設計規(guī)范制定
包括視覺規(guī)范、動效規(guī)范、交互規(guī)范
視覺規(guī)范
一、界面
除了前面說的尺寸和適配
重點的還有界面狀態(tài)部署的9個維度
等待—初始—尋找—無數據—瀏覽—確認—錯誤—結束—中斷
（這里也是我常常犯錯誤的地方，在制作過程中，總是因為對這9個狀態(tài)不熟悉從而漏掉一些頁面。）
等待：啟動頁
目的是可以后臺進行預加載，等待期間減少用戶焦慮，提高用戶體驗；同時可以進行品牌宣傳等；也可以進行前期的使用介紹，功能介紹，降低用戶學習成本。
初始：首屏
核心內容的介紹，這里是用戶的第一印象，所以界面的美觀、功能層級的清晰是很重要的。所以避免不重要的信息，突出表明核心功能，提供良好的視覺引導。
尋找：引導、搜索
這里我放了引導和搜索，網上整理的資料只是提供了搜索，在我工作過程中有些產品其實功能并不需要搜索，而更應給注重引導。
網上介紹的搜索是四種搜索狀態(tài)：目的性搜索、無目的性搜索、全面性搜索、重復性搜索，這四種檢索狀態(tài)很好理解，某寶、某東等電商平臺都很清楚的。
引導反而是常常容易忽視的。
引導的目的是清晰“我在哪、我要干什么”
確定當前位置，確定上一步是什么，確定下一步是什么等。
無數據：空狀態(tài)
空狀態(tài)分類三種：初次加載、完成或清空內容、出錯頁面
初次加載可以利用啟動頁、引導頁等方式后臺完成預加載；清空、完成、出錯給出相應的空狀態(tài)畫面就好了。（這里的出錯是加載狀態(tài)出錯比如404）
今天先到這里，下一次把這個階段補齊，再次強調一下設計規(guī)范的重要性不亞于前面的交互流程，交互錯了是要改頁面，改順序的大改；設計規(guī)范錯了，就是改尺寸，改樣式，改顏色的小改，雖然大改很麻煩，但畢竟是開始階段，改就改了，無非是重做，但是設計規(guī)范錯了，無數的小細節(jié)在最后切圖輸出的時候，和程序對接會讓你直接崩潰，我就崩潰過，最后只能重新整理重新制作，哎，都是眼淚。
好啦，就醬～拜拜
——————————————————————
彩：關注公眾號 Jam吉馬的成長筆記 回復“吉馬”領取設計管理工具
熱門課程推薦
熱門資訊
-
1. iPhone6的UI設計尺寸規(guī)范，原來如此重要！
想要了解iPhone6界面設計的尺寸規(guī)范嗎？這里為您詳細介紹iPhone6的UI設計尺寸規(guī)范，包括界面尺寸、圖標尺寸、可點擊高度規(guī)范、搜索欄高度規(guī)范以及界面元素之間的距離規(guī)范。
-
2. 12個絕佳的UI設計網站，助力你的創(chuàng)作之旅!
將為大家介紹12個絕佳的UI設計網站,這些網站不僅可以為你提供靈感,還可以幫助你學習新的技巧,助力你的創(chuàng)意之旅!dribbbleDribbble 是一個面向設計師的...
-
3. 移動端UI設計中常見的5種APP界面類型，你get到了嗎？
通過介紹移動端UI設計中的閃屏頁、引導頁、浮層引導頁、空白頁和首頁等5種APP界面類型，幫助大家更好地了解UI設計的基本知識
-
怎樣可以提升你的UI設計能力!第一個:站酷站酷想必是設計師都知道的一個網站,里面不止有UI設計的資源,還有其他設計的,不如:平面設計、網頁設計、字體...
-
在移動端設計中,列表頁和表單頁是不可或缺的部分。一個好的列表頁和表單頁設計能夠讓用戶輕松地獲取信息并產生點擊欲望,從而提高點擊率。本文將為你...
-
對于想要提高自己的設計能力和創(chuàng)造力的小白和UI設計師來說,這本書是一個很好的選擇。4.《設計的覺醒》(IKKO TANAKA)推薦理由: 這本書是日本現代平面...
-
探索零基礎UI設計培訓的時長與薪資前景。了解數字藝術教育領域的專業(yè)課程，以及培訓后的職業(yè)發(fā)展機會。
-
8. 物聯網APP UI設計:創(chuàng)造智能硬件領域的沉浸式體驗
ui設計應該讓用戶一目了然,能夠快速找到所需的信息和功能。在設計過程中,應盡量使用簡潔的圖標、文字和色彩,避免過多的視覺干擾。符合用戶習慣:ui設...
-
想了解武漢UI設計培訓班的費用是多少嗎？不知道學UI設計要花多少錢？不妨看看這篇文章，了解UI設計培訓班的學費價格以及學習內容。
-
10. 設計中的色彩心理學:淺析中西方色彩的歷史演變與設計應用
摘要:本文探討了色彩的歷史演變和設計應用。通過對色彩在早期文明社會中的實用運用、不同文化背景下色彩觀念的差異、色彩在設計中的重要性以及新興技...
