高手如何從零設(shè)計(jì)控制面板？

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ì)指南」第二篇！如果你對于我的第一篇文章印象不錯(cuò)的話，那么這一篇應(yīng)該也會合你胃口：

當(dā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ì)的是儀表盤界面。那么我們從基本的想法開始。

這一次，我們將會設(shè)計(jì)一個(gè)服務(wù)于醫(yī)療行業(yè)的控制面板（實(shí)際上，這個(gè)設(shè)計(jì)的初衷來源于我的姨媽，她是一名醫(yī)生，不僅要治療病人還要處理大量的文書工作），而整個(gè)設(shè)計(jì)我將會在 Sketch 中完成。

通常，我會從一個(gè)非常低保真的線框圖開始。我會創(chuàng)建一系列的矩形線框，然后將他們按照需求和大小進(jìn)行排列，直到最終滿足我的想法為止。我選擇了一些隨機(jī)的、但是相近的色彩，確保我能看清位置就可以了。

然后我針對哪些內(nèi)容在哪里顯示，進(jìn)行了基本的說明。

這就是一個(gè)非常原始的界面框架了。

日歷

鏈接

個(gè)人資料

存檔