1. 程式人生 > >超讚!幫你打造極簡風APP UI 的實用設計技巧

超讚!幫你打造極簡風APP UI 的實用設計技巧

隨著使用者對UI的喜好開始偏向簡約,設計師有必要將整個UI簡化剝離至基本狀態,因為保留關鍵元素才是成功的鑰匙。從某種意義上說,極簡主義的設計是形式和功能的完美結合。它最大的優勢在於形式上的清晰直觀——簡潔的線條,大量的留白,優雅簡約的圖形元素,賦予整個設計以簡約乾淨的感受。即使是最龐雜的內容,在這樣的設計之下都顯得直觀而幹練,當然,如果設計的足夠高效的話。

極簡風的APP設計通常要具備幾個特徵:簡潔,清晰,一致,並且可用。你的APP的互動體系應當通過清晰的視覺傳達方式幫使用者定位並解決問題。要做好這一點,並不容易,因此,一個集優雅極簡的設計和優秀的易用性於一身的應用,一定會給人留下深刻的印象。要做到這一點,你可以從下面幾點著手:

簡單的配色方案

考慮到太多的色彩可能會給使用者以負面影響,所以儘量簡化配色方案,提升使用者體驗。有許多預設的配色規範和配色方案可供參考,可以以此為基礎建立新的解決方案,並且這種思路尤其適合初學者:

·單色配色:單色配色方案通常是由特定色彩的不同深淺、不同色調所構成。通過調整這一色彩的飽和度、明暗來生成協調的配色方案。

1-rbrbh20EHL_Ue_IDxl_0A.jpeg

0-w_FvxwQG_6Px2vGE.jpg

·類似色配色:色輪上彼此相鄰的色彩是類似色,它們能在色彩上營造出協調而連續的感覺。雖然這種配色不是那麼好把控的,但是有訣竅,就是注意選取有感染力的色調作為核心,這樣可以最大化利用整個方案。一套類似色的配色方案通常是在色輪的同一區域內選取色彩搭配而成。

0-GmWqCn_trRfbguAX-1.jpg

1-Y03ERRYZ_gHCw7cEnLmr2w.png

模糊效果

模糊效果出現在極簡化UI設計中是一件非常符合邏輯的事情,因為它先天就能夠強化UI的層次感。多層次的UI結構中,模糊效果使得使用者能更容易分辨前後層級的差異和前後關係。而模糊效果同時也賦予了UI設計師探索不同選單和佈局設計的可能性。

雅虎天氣APP 中,每個不同的城市都會有一張漂亮精緻的照片,只需一個點選你就能看到看到關於這個地點的更詳細的關鍵資訊。相比於用一個全新的介面來遮蓋漂亮的背景,雅虎的設計師讓背景模糊虛化,以保留UI的使用場景,不會讓使用者有跳出介面的感覺,而模糊的背景和前景的內容又構成了良好的對比度。這樣的互動更加直觀微妙,主介面和詳細資訊之間的聯絡又足夠緊密,邏輯清晰。

1-v6JG6G4UCwdS7XbXp0pZXA.jpeg

一個APP,一種字型

1469591770722646.png

幾種不同的字型在一個APP中混用,會讓你的APP顯得散漫而馬虎。減少螢幕上字型型別的數量,可以強化排版的效果。當你設計APP的時候,儘量試圖通過控制同一字型的字重、樣式、尺寸和色彩來營造不同的佈局體驗,而非換不同的字型。

當你在為你的APP選擇字型的時候,選擇平臺的預設字型可能是最安全穩妥的選擇:

·蘋果公司目前在全平臺上使用的是San Francisco字型,iOS 9 上將這種字型標記為 SF-UI。

·Roboto 和 Noto 則是Google Android 和 Chrome 上的預設字型。

1-h9TgxM4LubkjVDIhEG5U4g.png

聚焦資料

你應當使用大字型和醒目的色彩來讓特定的資料成為視覺的焦點。普通的資料和內容使用中性的黑白灰來展現,而關鍵的資料則使用強對比的色彩,起到行為召喚的作用,這樣可以讓使用者的注意力更加集中。

明亮的色調+中性的色調是最容易搭配的方案,同時也是視覺上最引人注意的方案。

QQ截圖20160727115700.png

被放大的字型和更加顯眼的色彩無疑在整個介面中更加具有視覺吸引力,無需更多的提示,使用者就知道眼睛應該看哪裡。

1469591839694664.gif

通過空間分隔元素,而非線條

設計師常常會用線條來分割區塊,表明界限,劃分螢幕功能區域。但是當介面元素多起來之後,這些邊界、襯線、分隔線會讓整個介面擁擠不堪。

精簡分割線會給你一個乾淨、現代且功能突出的介面。想要分割、區分不同的元素,方法有很多,比如使用色塊,控制間距,新增色彩和內容,等等等等。谷歌日曆就是一個相當好的例子,適度的陰影,明快而易於聚焦的色塊,充滿呼吸感的間距,讓不同的區塊、內容都清晰的分隔在螢幕上不同的地方。

1-YwENuvE2vsi512dwsND5ag.png

圖示:線條和填充

圖示是UI設計中的重要元素,也是視覺傳達的主要手段之一。圖示應當是簡約的,作為視覺元素它應當能讓使用者立即、快速的分辨出來。iOS 7 之後的iOS系統就開始走上簡約的設計路線了,其中圖示大多使用了線條和填充式的設計:

1-q4lDSWO0aKUux47R-85CWA.jpeg

iOS 的時鐘圖示的兩種樣式

看看介面底部的Tab選單欄,它作為應用內導航使用的時候,通常是常駐於底部,所以當用戶進入某個功能模組的時候,需要高亮某個圖示,讓使用者明白他們所在的地方。這個時候,灰色的線性圖標表示為未選中的狀態,而填充上鮮豔藍色的圖示則用來表示選中的狀態。這樣一來,這些圖示的可用性就顯得相當不錯了。

1469591890456440.png

結語

簡約的UI設計配合目前的新技術,是創造良好設計和優秀產品的手段。極簡的設計本身並不是設計的目的,打造簡單而更加富於功能性的UI才是終極的目標。用直觀的流程,清晰的視覺來構造一個無縫的互動體驗,這是極簡風APP的價值所在。

zz  http://www.cocoachina.com/design/20160727/17212.html

相關推薦

打造APP UI實用設計技巧

隨著使用者對UI的喜好開始偏向簡約,設計師有必要將整個UI簡化剝離至基本狀態,因為保留關鍵元素才是成功的鑰匙。從某種意義上說,極簡主義的設計是形式和功能的完美結合。它最大的優勢在於形式上的清晰直觀——簡潔的線條,大量的留白,優雅簡約的圖形元素,賦予整個設計以簡約乾淨的感受

七個要素打造現象級手遊優化程度堪比《QQ飛車》

實現 頻率 測試案例 ova 自己的 iso guide 工程師 關註 歡迎大家前往騰訊雲+社區,獲取更多騰訊海量技術實踐幹貨哦~ 本文由WeTest質量開放平臺團隊 發表於雲+社區專欄 作者:申江濤,騰訊互娛客戶端工程師 商業轉載請聯系騰訊WeTest獲得授權,非商業

快來用Python的搭建的AI老婆吧

夏天太熱,又不想出門,就讓我們用的Python來搭建屬於自己的〜可以對話的AI老婆吧〜   本文擬使用Python的開發語言實現類

不容錯過的5款實用網頁開發和設計工具

現如今,越來越多的移動和桌面端應用開始應用HTML、JS和CSS進行開發,對於網頁開發和設計更是如此。目前這種局面也催生了更多新的網頁技術,包括React.js、Angular以及Node.js這樣的庫。此外,隨著需求及專案的進一步細化,開發者社群幾乎每天都會出現新的庫和開發

Metronic – 基於 Bootstrap 的響應式後臺管理模板

  Metronic 是一套精美的響應式後臺管理模板,基於強大的 Twitter Bootstrap 框架實現。Metronic 擁有簡潔優雅的 Metro UI 風格介面,6 種顏色可選,76 個模板頁面,包括圖表、表格、地圖、訊息中心、監控面板等後臺管理專案所需的各種元件。 您可能感興趣的相關文章

獨家連載 | 詳細走進單層感知器與線性神經網路

第03章-單層感知器與線性神經網路 3.1生物神經網路 人工神經網路ANN的設計實際上是從生物體的神經網路結構獲得的靈感。生物神經網路一般是指生物的大腦神經元,細胞,觸電等組成的網路,用於產生生物的意識,幫助生物進行思考和行動。 神經細胞構是構成神經系統的基本單元,簡稱為神經元。

最全如何快速增加新浪微博粉絲數如何迅速提高微博粉絲數量?

不少人現在都在玩微博,但是總是感嘆粉絲太少,發出去的微博根本沒有任何的互動和點評,因此心灰意冷,總是想方設法的去加粉絲,早期微博上通常大家一味地靠加關注再偷偷取消這樣的蠻幹和小兒科,早就為行家所不齒,而且據說新浪的微博技術已經有針對性地對此類行為掌控和懲罰。       其

直觀理解深度學習的卷積操作,

翻譯 | 於志鵬  趙朋飛       校對 |  翟修川       整理 |  凡江 轉自 | AI研習社 近幾年隨著功能強大的深度學習框架的出現,在深度學習模型中搭建卷積神經網路變得十分容易,甚至只需要一行程式碼就可以完成。 但是理解卷積,特別是對第一次接

編譯器和直譯器的異同,瞬間明白了

菜鳥經常將編譯器和直譯器弄混淆,無奈之下,於是向高手請教。   高手說: “   直譯器是一條一條的解釋執行源語言。比如php,postscritp,javascript就是典型的解釋性語言。     編譯器是把原始碼整個編譯成目的碼,執行時不在需要編譯器,直接在支

推薦4款個人珍藏的IDEA外掛寫出不那麼差的程式碼

@[toc] 目前的話,我(Guide哥)是在 Github 開源了兩個輪子,一個簡易的 RPC 框架,一個輕量級的 HTTP 框架。程式碼結構清晰,實現優雅(這個自誇就很不要臉),感興趣的小夥伴可以看一下。 ![](https://img2020.cnblogs.com/other/1843652/20

邏輯表達式的設計和查詢

and pan gif varchar express sof display 不能 soft 在數據庫開發中,對兩個關系表進行連接查詢,能夠直接做“邏輯或”的查詢,而對於邏輯與和邏輯非的查詢,則稍復雜點,需要編寫額外的代碼來實現。在關系型數據庫中,

天氣app

最近在學習Android,這裡就用這個極簡天氣app練練手吧。 製作思路: UI佈局 城市選擇 對應城市天氣資料獲取與處理 重新整理UI 先看看效果吧(前面有點遲鈍): 我點選右上角的城市管理按鈕後進入城市選擇(裡面的城市是隨便寫的哦),確認後返

詳細 Nginx 教程,傻瓜一看也會

什麼是Nginx? Nginx (engine x) 是一款輕量級的Web 伺服器 、反向代理伺服器及電子郵件(IMAP/POP3)代理伺服器。 什麼是反向代理? 反向代理(Reverse Proxy)方式是指以代理伺服器來接受internet上的連線請求,然後將請求轉發給內部網路上的伺服器,並將從

推薦3個實用性棒的在線工具,關鍵時刻能大忙

網站 導圖 blog 大小 圖像壓縮 線下 分享圖片 med images 小視頻下載 一個可以在線下載視頻的工具,通過復制視頻網頁鏈接可以直接在頁面上免廣告觀看,或者將視頻下載到本地,幫助用戶收藏喜歡的視頻內容。 Goimg 一個基於瀏覽器版的在線圖像壓縮工具,讓圖片在

如何使產品不平庸?簡單3步找出產品亮點

關鍵詞 吸引力 創造力 競爭力 汽車 需求分析本身就是一個創新的過程。創新不是胡思亂想,而是在不斷發現問題和解決問題的過程中,發生、發展並成長起來的。僅僅完成了功能,但沒有亮點的產品是不是很平庸?原創的產品必須有亮點。平庸的產品不但無法使各方打起精神,有吸引力,而且平庸也是沒有競爭力的表現

的眼睛推開“玻璃窗”,全世界都看“這裏”

都是 進行 nba 中間 獲得 自己的 感覺 美的 工作 眼鏡是心靈之窗,然而。伴隨當今生活的快節奏發展,我們在生活中和工作中,用眼的過度,很多人開始帶上的厚重的眼睛,給心靈之窗蒙上了一層玻璃,世界從此變得失真。據不完全統計,在我國,青少年有視力障礙者高達2.7億,其中90

狂曬C++疑問,專家解答,還有更美的事麽?

ota ie8 doc rip docs tor oci pad mcs 644欄XN9境JZhttp://huiyi.docin.com/sina_6367439551 4漣35L12寫EUK洶嚼http://tushu.docin.com/yqj24471 C謨q猶

微信破解WiFi密碼如何操作?一招查看密碼

搜索框 方法 技術分享 mage com alt 有時 破解 程序 對用手機用戶來說我們使用最多的軟件莫過於騰訊的微信了!對於使用最為廣泛的軟件來說,如果能夠幫助我們解決網絡問題那無疑是最好的,因為有時你們破解wifi還要下載一大堆破解軟件。現在直接通過微信就能破解WIFI

僅需七步,找出最具盈利能力的商業模式

原因 做了 width 還要 朝九晚五 制作視頻 top 需要 jpg   本文作者開辦線上課堂,教大家如何在網上賺錢開辟出屬於自己的事業。他給課程的定價最低為 5000 美金,最高是 2 萬 5 千美金(取決於不同的課程類型)。2015 年的利潤已經超過了 150 萬美金