編者按:這是 UI 設(shè)計師 Diana Malewicz 的第二篇 UI 設(shè)計分享。這一次,她要設(shè)計的是一個控制面板的界面,如何控制不同UI元素的平衡,如何從零開始構(gòu)建,相當值得學(xué)習(xí)~
歡迎來到我的「UI設(shè)計指南」第二篇!如果你對于我的第一篇文章印象不錯的話,那么這一篇應(yīng)該也會合你胃口:
如何設(shè)計更加友好和一致性的app界面?
當然,請注意一點,我創(chuàng)建 UI 界面的過程中,繞過了通常 UI 和產(chǎn)品設(shè)計應(yīng)該有的「用戶調(diào)研」——「用戶研究」——「體驗分析」這樣的前置步驟,而是直接開始創(chuàng)建干凈、一致的 UI 界面。在真實的設(shè)計項目當中,開頭的這些步驟是無法忽略的!
這一次我們要設(shè)計的是儀表盤界面。那么我們從基本的想法開始。
這一次,我們將會設(shè)計一個服務(wù)于醫(yī)療行業(yè)的控制面板(實際上,這個設(shè)計的初衷來源于我的姨媽,她是一名醫(yī)生,不僅要治療病人還要處理大量的文書工作),而整個設(shè)計我將會在 Sketch 中完成。
通常,我會從一個非常低保真的線框圖開始。我會創(chuàng)建一系列的矩形線框,然后將他們按照需求和大小進行排列,直到最終滿足我的想法為止。我選擇了一些隨機的、但是相近的色彩,確保我能看清位置就可以了。
然后我針對哪些內(nèi)容在哪里顯示,進行了基本的說明。
這就是一個非常原始的界面框架了。
在下一步當中,我將會開始選取字體、配色和樣式,就像我的上一篇文章一樣,我們將會創(chuàng)建一系列小的設(shè)計系統(tǒng)或者說樣式表,供我取用和調(diào)試。
對于這個控制面板,我選擇的是「Sofia Pro」作為主要的現(xiàn)實字體,并且只有這一個字體。
實際上,想要創(chuàng)建一套漂亮的 UI 界面,并不需要很多字體。
我更喜歡使用 1~2 種字體來進行設(shè)計(標題和正文各一種)。
Sofia Pro 非常漂亮,給人感覺非常雅致舒適,氣質(zhì)上和 Futura 有點像,易讀性也不錯。如果你有 Adobe 創(chuàng)意云服務(wù),那么可以直接調(diào)用。
不需要使用太多字體,而要盡量使用字體的粗細對比,大小對比來營造視覺層次,這樣其實是夠用的。
就像上圖所示,我僅僅使用了4種不同的大小(52p/32p/24p/18p),兩種不同的字重(Bold 和 Medium)。我還使用了3種不同的主要配色——鮮艷的藍色(強調(diào)色),深藍色(常規(guī)文本),淺藍色(詳細信息用這個顏色,但是它實際上是深藍色將不透明度調(diào)整到 30%之后的效果)。。
如果在選擇字體尺寸大小的時候碰到問題,可以試試按照黃金比例來進行選取,效果也不錯。
在配色這件事情上,我很少會采用色輪或者預(yù)制的配色方案,我比較喜歡手工取色。但是如果你在取色這件事情上,經(jīng)驗并不豐富,那么預(yù)制的配色方案是非常有用的。
了解色彩心理學(xué),對于配色是非常有用的。不同的行業(yè)在配色選取上有哪些習(xí)慣和傾向,這些東西是非常有必要了解的。
考慮到我們正在創(chuàng)建一個針對醫(yī)療保健行業(yè)的控制面板,所以我們選用綠色和藍色是非常合理的,一方面是藍色和綠色是契合行業(yè)的,另一方面是它們本身足夠討人喜歡,讓人感到舒適、專業(yè)和信任。
我在為這個項目選擇的主色調(diào)的時候,挑選一個鮮艷大膽的藍色,然后降低不透明度,微調(diào)出了第二個藍色,用作背景。我盡可能在同一色相中挑選配色。此外,我還調(diào)整了飽和度,獲得了另外一種藍色,也可以通過調(diào)整不透明度來用作背景配色。最后,我會選擇自己最喜歡的顏色,也就是純白。
除此之外,我們還需要使用一些強調(diào)色來對配色進行區(qū)分。我僅僅通過稍稍修改色相(H)的參數(shù)來進行選擇,就可以挑選出很不錯的強調(diào)色。
選好字體和配色之后,我們需要為 UI 元素來創(chuàng)建樣式(容器、圖標、按鈕等)。
其實只需要為數(shù)不多的幾種樣式進行設(shè)計,就可以創(chuàng)建出引人入勝的界面,你可以根據(jù)元素的重要性和作用進行合理的混搭。
你可以看看我下面的元素所使用的參數(shù),都不復(fù)雜。
如你所見,我真正創(chuàng)建出來的樣式其實只有5種,其中的樣式明顯是針對不同的目的的(比如容器和按鈕)。值得說明的是,這些樣式都是針對主要的交互和 CTA元素來設(shè)計的,并且只用于主要的元素和交互。
在創(chuàng)建陰影的時候,務(wù)必記得使用和配色同色相的陰影,但是記得降低不透明度。
在選取圖標的時候,一致性始終是最重要、最關(guān)鍵的部分。所以,我決定在整個控制面板中統(tǒng)一使用線性圖標。
此外,還記得我在上一篇文章當中針對用戶頭像進行的配色優(yōu)化嘛?在可用性上可以說是非常無意義的設(shè)計,但是非常令人愉悅!在這里我也做了!
現(xiàn)在,這個控制面板所涉及到的絕大多數(shù)的內(nèi)容我都有了,因此我開始重新排列元素,直到我滿意。這個部分真的沒有取巧的地方,唯一能做的就是進行盡可能多的嘗試,結(jié)合一部分普世的需求,然后就是對不同排版進行嘗試,不同的對齊方式,細節(jié)的處理等等等等,直到我們看起來用起來感覺不錯為止。
不過,在馴服混亂、尋求秩序的過程中,我依然是有一些有價值的建議:
記住元素和元素之間應(yīng)該保持相同/相似的邊距或者間距。即使此時我們不討論網(wǎng)格和布局,但是至少要確保主要的內(nèi)容在視覺比例上的協(xié)調(diào)一致。
不必過度擔(dān)心留白。留白是界面最好的朋友。它可以賦予任何界面以呼吸感,讓它看起來整潔。
將主色使用在一些處于選定狀態(tài)的元素,從另一個角度上來說,主色應(yīng)該應(yīng)用在令人矚目的元素和交互上。
使用不同的陰影來制造縱深感。但是請記住,每次都只讓一部分元素擁有陰影,這樣才能制造出層次差異,其他的則保持平整。
每個元素或者容器都應(yīng)該擁有一致的邊緣,比如按鈕都應(yīng)該擁有相同的弧度,卡片邊緣的弧度也應(yīng)當一致。
記住按鈕上的標簽文本應(yīng)該居中。
保持容器內(nèi)元素的邊距是相同的。
如果想讓界面變得足夠平滑友好,可以提高圓角的弧度,讓它越接近氣泡色感覺,這樣給人的感覺就越友好!
我們快要完成了,這是最后一步!這將會讓我們的控制面板顯得更加美觀和友好。
Sketch 其實是創(chuàng)建插畫的理想工具。我曾經(jīng)用過很長時間的 AI,并且非常討厭它。事實證明,我在 AI 中可以實現(xiàn)的效果幾乎都可以在 Sketch 中做出來!
就像上圖當中,你可以通過基礎(chǔ)形狀很快創(chuàng)建出醫(yī)生的插畫。對于這張插畫,我選取了一種非常流行的樣式,其中的陰影和高光其實都非常簡單,但是加入了富有趣味的對比線條。
首先,你可以使用橢圓和線條來快速拼接出基本的輪廓,進行插畫繪制的時候,始終從最基本的圖形入手,確實是非常有幫助的!在接下來的步驟當中,你可以添加不同的細節(jié)。在最后一步當中,添加線條狀的深色陰影,增加白色的線條來呈現(xiàn)高光。
這真的是超級簡單,但是很能出效果,即使你不是插畫師也可以做到!
我強烈建議你也進行類似的 UI 設(shè)計練習(xí)!這種練習(xí)方式不僅出效果,而且能夠很好地磨練自己的技能,嘗試新鮮的設(shè)計技法,并且填充自己的作品集。新鮮的嘗試甚至可以算得上是某種意義上的「娛樂」!如果將一部分 UI 元素突出呈現(xiàn)并超出原本的界面范圍,借助陰影來強化層次,則能讓這個 UI 更適合展示!
更多后臺管理相關(guān)的模板:
原文地址:https://uxdesign.cc/how-to-design-a-sleek-dashboard-ui-a90ba41f0af1
全站高品質(zhì)素材免費下載!