很多寫產(chǎn)品設(shè)計的文章垛玻，往往都陷于產(chǎn)品設(shè)計這件事情本身。但在我看來泽谨，交互和視覺設(shè)計本身不是一件很難的事情璧榄，最重要的事情，在動手設(shè)計之前已經(jīng)完成了吧雹。這篇文章著重對界面設(shè)計的基本思路進(jìn)行整理骨杂，形成一個可操作化的執(zhí)行步驟。
第一步雄卷，完成需求分析搓蚪。
方案產(chǎn)出、原型設(shè)計丁鹉、交互設(shè)計都是基于需求分析的妒潭。
當(dāng)你能夠還原用戶的真實(shí)的使用場景悴能，明白用戶在這個場景下遇到了什么問題，為什么會遇到這個問題杜耙，就可以了解你可以通過產(chǎn)品設(shè)計優(yōu)化哪些點(diǎn)搜骡，怎么去優(yōu)化拂盯，那么接下來的解決方案也就呼之欲出了佑女。同樣的，在有了深刻理解的基礎(chǔ)上再去做界面設(shè)計谈竿，也是一件很簡單的事情团驱。很多時候，不知道這個界面該怎么表達(dá)空凸，背后的問題是這是一個偽需求嚎花，或者你對問題沒有一個清晰深刻的認(rèn)知。
第二步呀洲，頁面流程梳理紊选。
在深刻理解了需求和場景的基礎(chǔ)上，可以通過用戶的使用路徑道逗，確定下來產(chǎn)品需要經(jīng)過哪些流程兵罢，每個流程要完成的核心任務(wù)。
從而確定大致有哪幾個頁面滓窍，用戶需要在頁面里完成哪些事情卖词。列完這些之后，心里已經(jīng)對界面有了一個大概的雛形和基本的感覺吏夯。
第三步此蜈，頁面信息層級梳理。
開始著手畫原型圖之前噪生，一定要先列下來頁面的元素裆赵，梳理信息的層級。
首先跺嗽，頁面的信息有哪些顾瞪？這些信息可以劃分為哪些層級？這些信息層級的重要性該如何劃分抛蚁？信息層級的劃分取決于用戶在這個頁面到底需要做什么陈醒，信息層級的重要性取決于這件事情對用戶而言是不是最重要的。
以國民級應(yīng)用微信為例瞧甩。比如微信的進(jìn)入首頁钉跷，用戶進(jìn)來可能要完成的事情有哪些？第一件事肚逸，找人聊天爷辙；第二件事彬坏，通過首頁去做其他的事情，比如去朋友圈膝晾、掃碼支付等等栓始；第三件事，查找以前的聊天記錄血当。那么這個頁面的信息元素就可以按照使用場景劃分為聊天會話欄幻赚、導(dǎo)航欄、小工具入口臊旭。
再向下劃分落恼，聊天會話欄又包含不同的元素：頭像、姓名离熏、聊天內(nèi)容佳谦、聊天時間。這里面哪一個是最重要的呢滋戳？大多數(shù)情況下钻蔑，我們都是通過頭像和姓名來查找用戶的，頭像最容易吸引注意奸鸯，但是會經(jīng)常更改咪笑，參考價值沒那么大，除非對方是萬年不換頭像黨府喳；姓名在有備注的情況下可以一直不變蒲肋，所以這個信息也非常重要。上次聊天時間和內(nèi)容相比之下是個次要信息钝满，畢竟用戶如果要看聊天記錄兜粘，更可能會點(diǎn)進(jìn)去。這樣弯蚜，信息的優(yōu)先級就排出來了孔轴。
第四步，設(shè)計原型圖碎捺。
以上全都理清了路鹰，然后才開始動手畫。元素的擺放順序要符合用戶的認(rèn)知順序收厨，元素的大小晋柱、顏色要符合信息層級的劃分。不要被高保真原型圖干擾诵叁，追求頁面效果的精致雁竞。要用最簡單的線框來傳達(dá)你想要的感覺。即便是在沒有UI，需要出高保真來代替UI效果圖的情況下碑诉，也應(yīng)該先在紙上彪腔，或者用Axure畫出一個簡單的線框圖。如果有UI进栽，就不需要高保真了德挣，太逼真的設(shè)計反而會干擾UI的思路，給他們描繪出大概的想要的效果快毛，最好找?guī)讉€同樣感覺的設(shè)計圖來給他們參考格嗅，讓他們理解產(chǎn)品想要傳達(dá)出的感覺，自行發(fā)揮祸泪。
第五步吗浩，頁面走查建芙。
檢查交互流程是否做到了操作前有預(yù)期没隘、操作中有反饋、操作后能取消禁荸；邊界case的處理方案右蒲，例如輸入框輸入過長等，是否覆蓋到赶熟。
最重要的是將自己清空成小白瑰妄，思考這樣的頁面交互流程和頁面設(shè)計是否符合自己的認(rèn)知，能不能做到秒懂映砖。最好能找身邊的人問一下间坐，做一個簡單的小調(diào)研，降低出錯的概率邑退。
