2020-6-8 資深UI設(shè)計(jì)者
編者按:這是 UI 設(shè)計(jì)師 Diana Malewicz 的第二篇 UI 設(shè)計(jì)分享。這一次,她要設(shè)計(jì)的是一個(gè)控制面板的界面,如何控制不同UI元素的平衡,如何從零開始構(gòu)建,相當(dāng)值得學(xué)習(xí)~
歡迎來到我的「UI設(shè)計(jì)指南」第二篇!如果你對(duì)于我的第一篇文章印象不錯(cuò)的話,那么這一篇應(yīng)該也會(huì)合你胃口:
當(dāng)然,請(qǐng)注意一點(diǎn),我創(chuàng)建 UI 界面的過程中,繞過了通常 UI 和產(chǎn)品設(shè)計(jì)應(yīng)該有的「用戶調(diào)研」——「用戶研究」——「體驗(yàn)分析」這樣的前置步驟,而是直接開始創(chuàng)建干凈、一致的 UI 界面。在真實(shí)的設(shè)計(jì)項(xiàng)目當(dāng)中,開頭的這些步驟是無法忽略的!
這一次我們要設(shè)計(jì)的是儀表盤界面。那么我們從基本的想法開始。
這一次,我們將會(huì)設(shè)計(jì)一個(gè)服務(wù)于醫(yī)療行業(yè)的控制面板(實(shí)際上,這個(gè)設(shè)計(jì)的初衷來源于我的姨媽,她是一名醫(yī)生,不僅要治療病人還要處理大量的文書工作),而整個(gè)設(shè)計(jì)我將會(huì)在 Sketch 中完成。
通常,我會(huì)從一個(gè)非常低保真的線框圖開始。我會(huì)創(chuàng)建一系列的矩形線框,然后將他們按照需求和大小進(jìn)行排列,直到最終滿足我的想法為止。我選擇了一些隨機(jī)的、但是相近的色彩,確保我能看清位置就可以了。
然后我針對(duì)哪些內(nèi)容在哪里顯示,進(jìn)行了基本的說明。
這就是一個(gè)非常原始的界面框架了。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.jghy.net