阜陽(yáng)網(wǎng)站建設(伴我科技)教你如何打造一個(gè)極簡(jiǎn)風(fēng)APP UI
2016-08-10 / 人氣 8
隨著(zhù)用戶(hù)對UI的喜好開(kāi)始偏向簡(jiǎn)約,設計師有必要將整個(gè)UI簡(jiǎn)化剝離至基本狀態(tài),因為保留關(guān)鍵元素才是成功的鑰匙。
從某種意義上說(shuō),極簡(jiǎn)主義的設計是形式和功能的完美結合。它最大的優(yōu)勢在于形式上的清晰直觀(guān)——簡(jiǎn)潔的線(xiàn)條,大量的留白,優(yōu)雅簡(jiǎn)約的圖形元素,賦予整個(gè)設計以簡(jiǎn)約干凈的感受。
極簡(jiǎn)風(fēng)的APP設計通常要具備幾個(gè)特征:簡(jiǎn)潔,清晰,一致,并且可用。你的APP的交互體系應當通過(guò)清晰的視覺(jué)傳達方式幫用戶(hù)定位并解決問(wèn)題。
要做好這一點(diǎn),并不容易,因此,一個(gè)集優(yōu)雅極簡(jiǎn)的設計和優(yōu)秀的易用性于一身的應用,一定會(huì )給人留下深刻的印象。要做到這一點(diǎn),上海網(wǎng)站建設建議你可以從下面幾點(diǎn)著(zhù)手:
簡(jiǎn)單的配色方案 色彩
考慮到太多的色彩可能會(huì )給用戶(hù)以負面影響,所以盡量簡(jiǎn)化配色方案,提升用戶(hù)體驗。
有許多預設的配色規范和配色方案可供參考,可以以此為基礎創(chuàng )建新的解決方案,并且這種思路尤其適合初學(xué)者:
單色配色:?jiǎn)紊渖桨竿ǔJ怯商囟ㄉ实牟煌顪\、不同色調所構成。通過(guò)調整這一色彩的飽和度、明暗來(lái)生成協(xié)調的配色方案。
類(lèi)似色配色:色輪上彼此相鄰的色彩是類(lèi)似色,它們能在色彩上營(yíng)造出協(xié)調而連續的感覺(jué)。
雖然這種配色不是那么好把控的,但是有訣竅,就是注意選取有感染力的色調作為核心,這樣可以最大化利用整個(gè)方案。
一套類(lèi)似色的配色方案通常是在色輪的同一區域內選取色彩搭配而成。
模糊效果 頁(yè)面展示
模糊效果出現在極簡(jiǎn)化UI設計中是一件非常符合邏輯的事情,因為它先天就能夠強化UI的層次感。
多層次的UI結構中,模糊效果使得用戶(hù)能更容易分辨前后層級的差異和前后關(guān)系。而模糊效果同時(shí)也賦予了UI設計師探索不同菜單和布局設計的可能性。
雅虎天氣APP 中,每個(gè)不同的城市都會(huì )有一張漂亮精致的照片,只需一個(gè)點(diǎn)擊你就能看到看到關(guān)于這個(gè)地點(diǎn)的更詳細的關(guān)鍵信息。
相比于用一個(gè)全新的界面來(lái)遮蓋漂亮的背景,雅虎的設計師讓背景模糊虛化,以保留UI的使用場(chǎng)景,不會(huì )讓用戶(hù)有跳出界面的感覺(jué),而模糊的背景和前景的內容又構成了良好的對比度。
這樣的交互更加直觀(guān)微妙,主界面和詳細信息之間的聯(lián)系又足夠緊密,邏輯清晰。
字體效果 一個(gè)app一種字體
幾種不同的字體在一個(gè)APP中混用,會(huì )讓你的APP顯得散漫而馬虎。減少屏幕上字體類(lèi)型的數量,可以強化排版的效果。
當你設計APP的時(shí)候,盡量試圖通過(guò)控制同一字體的字重、樣式、尺寸和色彩來(lái)營(yíng)造不同的布局體驗,而非換不同的字體。
當你在為你的APP選擇字體的時(shí)候,選擇平臺的默認字體可能是最安全穩妥的選擇:
·蘋(píng)果公司目前在全平臺上使用的是San Francisco字體,iOS 9 上將這種字體標記為 SF-UI。
·Roboto 和 Noto 則是Google Android 和 Chrome 上的默認字體。
聚焦數據 視覺(jué)焦點(diǎn)
你應當使用大字體和醒目的色彩來(lái)讓特定的數據成為視覺(jué)的焦點(diǎn)。普通的數據和內容使用中性的黑白灰來(lái)展現,而關(guān)鍵的數據則使用強對比的色彩,起到行為召喚的作用,這樣可以讓用戶(hù)的注意力更加集中。
明亮的色調+中性的色調是最容易搭配的方案,同時(shí)也是視覺(jué)上最引人注意的方案。
被放大的字體和更加顯眼的色彩無(wú)疑在整個(gè)界面中更加具有視覺(jué)吸引力,無(wú)需更多的提示,用戶(hù)就知道眼睛應該看哪里。
通過(guò)空間分割元素 而非線(xiàn)條
設計師常常會(huì )用線(xiàn)條來(lái)分割區塊,表明界限,劃分屏幕功能區域。但是當界面元素多起來(lái)之后,這些邊界、襯線(xiàn)、分隔線(xiàn)會(huì )讓整個(gè)界面擁擠不堪。
精簡(jiǎn)分割線(xiàn)會(huì )給你一個(gè)干凈、現代且功能突出的界面。
想要分割、區分不同的元素,方法有很多,比如使用色塊,控制間距,添加色彩和內容,等等等等。
谷歌日歷就是一個(gè)相當好的例子,適度的陰影,明快而易于聚焦的色塊,充滿(mǎn)呼吸感的間距,讓不同的區塊、內容都清晰的分隔在屏幕上不同的地方。
圖標 線(xiàn)條和填充
圖標是UI設計中的重要元素,也是視覺(jué)傳達的主要手段之一。圖標應當是簡(jiǎn)約的,作為視覺(jué)元素它應當能讓用戶(hù)立即、快速的分辨出來(lái)。
iOS 7 之后的iOS系統就開(kāi)始走上簡(jiǎn)約的設計路線(xiàn)了,其中圖標大多使用了線(xiàn)條和填充式的設計:
iOS 的時(shí)鐘圖標的兩種樣式
看看界面底部的Tab菜單欄,它作為應用內導航使用的時(shí)候,通常是常駐于底部,所以當用戶(hù)進(jìn)入某個(gè)功能模塊的時(shí)候,需要高亮某個(gè)圖標,讓用戶(hù)明白他們所在的地方。
這個(gè)時(shí)候,灰色的線(xiàn)性圖標表示為未選中的狀態(tài),而填充上鮮艷藍色的圖標則用來(lái)表示選中的狀態(tài)。這樣一來(lái),這些圖標的可用性就顯得相當不錯了。
簡(jiǎn)約的UI設計配合目前的新技術(shù),是創(chuàng )造良好設計和優(yōu)秀產(chǎn)品的手段。極簡(jiǎn)的設計本身并不是設計的目的,打造簡(jiǎn)單而更加富于功能性的UI才是終極的目標。用直觀(guān)的流程,清晰的視覺(jué)來(lái)構造一個(gè)無(wú)縫的交互體驗,這是極簡(jiǎn)風(fēng)APP的價(jià)值所在。