陳經(jīng)理
宮經(jīng)理
設計是一件用戶(hù)驅動(dòng)很強的工作。隨著(zhù)用戶(hù)越來(lái)越偏好更簡(jiǎn)潔的交互界面,如何剔除多余的元素,保留最基礎最重要的元素是極簡(jiǎn)設計的關(guān)鍵。極簡(jiǎn)設計形式和功能完美結合。它最大的優(yōu)點(diǎn)是極簡(jiǎn)的表現形式,簡(jiǎn)潔的線(xiàn)條,大方的留白,簡(jiǎn)約的圖形化元素,就算是很復雜的內容,在這樣的設計下也會(huì )顯得很簡(jiǎn)潔和干練。當然,如果能有效的利用這些元素。
蘇州源碼信息科技有限公司專(zhuān)注于網(wǎng)站建設、手機網(wǎng)站定制、微信應用開(kāi)發(fā)運營(yíng)、阿里、天貓、淘寶店鋪裝修運營(yíng),品牌設計印刷等,為企業(yè)提供全球化互聯(lián)網(wǎng)解決方案。服務(wù)熱線(xiàn):0512-66099588。
極簡(jiǎn)設計必須要簡(jiǎn)潔明了和一致的可用性 。你的交互系統應該通過(guò)清晰的視覺(jué)傳達(Clear Visual Communication) 來(lái)解決用戶(hù)的問(wèn)題。這也是為什么具備簡(jiǎn)潔設計和高可用性的應用如此讓人深刻。即便只是一個(gè)通過(guò)極簡(jiǎn)設計的導航,都能夠提供很強的交互功能。要做到這一點(diǎn),你需要注意有以下幾個(gè)方面:
1、簡(jiǎn)單的配色方案能夠提高用戶(hù)體驗,那么相應的,過(guò)多的色彩則會(huì )帶給用戶(hù)負面的影響。針對于初學(xué)者,有一些預先定義的標準顏色方案能夠讓你輕松創(chuàng )建新的顏色方案。
2、單配色方案。 單配色方案由特定色彩的不同的色調,陰影或顏色深淺所構成。他們的原理是通過(guò)修改特定顏色的飽和度和亮度,可以生成多種協(xié)調的顏色,這種顏色方案比較簡(jiǎn)潔和優(yōu)雅,不會(huì )給眼睛產(chǎn)生太大負擔。藍色的單配色方案近似色彩配色方案。近似色彩配色方案的思路是從色輪上取三個(gè)相鄰的顏色來(lái)做為配色。全手勢操作的應用 Clear 使用了近似色彩配色方案,它使用不同顏色來(lái)區分任務(wù)的優(yōu)先級或者高亮關(guān)鍵的任務(wù)。(頂端的任務(wù)使用最鮮艷的顏色,而底部的任務(wù)則使用明亮精致的顏色)漸變的黃色和橙色也是近似色彩配色方案的一個(gè)例子。
iOS 平臺的 Clear 應用
| 模糊效果
模糊效果出現在極簡(jiǎn)UI設計中是一件非常符合邏輯的事情,它能夠增加 UI 的層次感。如果你的 UI 擁有多個(gè)層級,使用模糊效果能夠讓用戶(hù)清晰的了解到 UI 的前后層級的關(guān)系。這也給了設計師一個(gè)完美的機會(huì )來(lái)設計多樣化的菜單和層級效果。
雅虎天氣顯示了一張當前位置的風(fēng)景圖片,如果需要查看天氣的詳細信息,你只需要向上滑動(dòng)便會(huì )馬上顯示出來(lái)。與在原先的頁(yè)面上疊加一層相比,這種方式在增加了詳細信息的易于獲取的情況下還保存了上一張圖片作為模糊背景后,幫助用戶(hù)在操作之后有更為直觀(guān)的反饋。而且交互方式極為自然,你可以很方便的就返回到上一層。
iOS 上的雅虎天氣
一個(gè)應用中只使用一種字體
在一個(gè)應用中使用多種字體會(huì )看起來(lái)很散亂和馬虎。減少屏幕上字體的類(lèi)型數量可以增強排版的效果。當你在設計應用的時(shí)候你可以通過(guò)更改字體的字重,樣式,尺寸和大小來(lái)優(yōu)化布局效果,而不是更換字體。
通常來(lái)說(shuō),一個(gè)應用中只使用一種字體
當你在為APP選擇字體的時(shí)候,選擇平臺的默認字體可能是最安全穩妥的選擇:蘋(píng)果使用 San Francisco Family 字體來(lái)提供全平臺一致的閱讀體驗(在iOS 9 中簡(jiǎn)稱(chēng)為 SF-UI)。Roboto和 Noto 分別是 Android 和 Chrome 的默認字體。減少屏幕上使用的字體類(lèi)型能夠獲得較好的排版效果。
數據的視覺(jué)焦點(diǎn)
你應該使用大號字體和醒目的顏色來(lái)讓特定的數據成為視覺(jué)的焦點(diǎn)。使用中性的顏色(黑白灰)來(lái)展示普通的內容,而一些具備操作功能的部分則使用強對比的顏色來(lái)吸引用戶(hù)注意,從而給給予用戶(hù)正確的指導和操作。
明亮的色調+中性的色調是最容易搭配的方案,同時(shí)也是視覺(jué)上最引人注意的方案之一。
被放大的字體和顯眼的色彩能夠很好的吸引用戶(hù)的注意力,而不需要多余的文字提示。與此同時(shí)還提供了簡(jiǎn)潔易用的信息收集體驗。在屏幕特定的區域使用放大的字體和彈出的顏色能有效吸引用戶(hù)注意力。
使用留白代替線(xiàn)條來(lái)區分元素
設計師通常使用線(xiàn)條和分割線(xiàn)來(lái)給屏幕劃分區域和功能類(lèi)別,但是增加太多這些元素會(huì ) UI 界面過(guò)于臃腫。更少的線(xiàn)條和分割線(xiàn)能夠讓我們的頁(yè)面看起來(lái)更加的干凈,現代化和功能突出。我們可以使用間距,留白和色塊來(lái)區分不同的元素。谷歌日歷就是一個(gè)很好的例子,它使用投影將兩個(gè)內容不同的區塊清晰地拉開(kāi)層次,而不是用線(xiàn)段來(lái)簡(jiǎn)單地分割。間隔不僅提供了清晰的視覺(jué)也增加了日歷應用的易用性。
圖標:線(xiàn)條和填充
我們使用圖標用來(lái)表達某種功能或者內容,圖標作為一種視覺(jué)語(yǔ)言,它應該是簡(jiǎn)約易于識別和理解的。iOS 7 后許多極簡(jiǎn)設計的 UI 都使用線(xiàn)條或者填充的圖標。來(lái)看看同一個(gè)圖標分別使用線(xiàn)條和填充的效果。我們來(lái)看看底部菜單欄的圖標。該圖標在應用中通常是作為導航的存在,所以指示當前用戶(hù)所在區域是很重要的,我們通常使用高亮圖標來(lái)表示當前用戶(hù)所選中的區域。這個(gè)時(shí)候,灰色的線(xiàn)性圖標表示為未選中的狀態(tài)。這樣一來(lái)我們的底部菜單欄就很直觀(guān)了。
總結
簡(jiǎn)約的 UI 和設計技術(shù)是完成優(yōu)秀設計的關(guān)鍵,但是極簡(jiǎn)設計的本身不是設計的目的。我們最終的目標是要簡(jiǎn)約 UI 的同時(shí)需要保證功能的完整性和高可用性。簡(jiǎn)單的流程,清晰的視覺(jué)傳達和與設計的結合來(lái)打造無(wú)縫的交互體驗才是最重要的。