創(chuàng)造視覺上更美UI的7個設(shè)計規(guī)則

平面設(shè)計、界面設(shè)計本應(yīng)該是一個化繁為簡,解決問題的工具,但是我們經(jīng)常通過設(shè)計把問題變得更加復(fù)雜,為了設(shè)計而設(shè)計。所以,25學(xué)堂整理了7條設(shè)計規(guī)則,幫助ui設(shè)計師做出更好的設(shè)計。

 

#1 極簡主義,盡可能的留白

設(shè)計師喜歡留白,但是客戶想填滿。。。

留白是構(gòu)成一個好的視覺布局重要元素,但也是最容易被忽視使用的元素。通常情況下,留白意味著浪費屏幕空間。但實際上,留白對于設(shè)計更加簡化的布局非常有用,因為這樣可以讓用戶專注他們看的內(nèi)容。

來看一個留白使用得不錯的例子:

 

#2 微交互設(shè)計

推動用戶參與網(wǎng)站/網(wǎng)絡(luò)應(yīng)用/移動應(yīng)用的方法有很多,但是經(jīng)常被忽視的一點就是“微交互”。

微交互的基本原則是:行動-反應(yīng)。在真實物理環(huán)境中,每個動作都會有相應(yīng)的反應(yīng)。所以這個也適用于設(shè)計,這樣的小交互設(shè)計能讓界面看起來更加有生機和活力。

來看一下哪些地方需要用到微交互:

1,打開/關(guān)閉

2,調(diào)整設(shè)置偏好

3,上傳和下載

4,通知

5,社交媒體分享

6,下拉菜單和隱藏菜單

7,突出顯示CTA號召性用語

修改文本的色彩代碼,文本的顏色跟著改變。

收到新郵件時,郵件計數(shù)器會微妙地增加。

 

#3 不知道怎么選擇顏色時,請使用安靜的顏色

我記得我制作的第一個UI設(shè)計方案是黑色系,從那以后,我對黑暗色調(diào)就有來一種偏好。我的大多數(shù)設(shè)計都是暗色調(diào)的。黑色能夠為設(shè)計賦予了一種其它顏色無法替代的優(yōu)雅。

有些設(shè)計方案,在開始設(shè)計之前就必須確定設(shè)計的配色方案,這里有一個訣竅,那就是使用柔和的顏色。

柔和的顏色指南

安靜的顏色讓設(shè)計師在不違背極簡主義的原則下,在頁面內(nèi)創(chuàng)建出深度。用戶可以很容易地在深度較淺的藍色之上使用柔和的藍色,讓頁面有層次感,而不需要只使用陰影的層次結(jié)構(gòu)效果。

 

#4 光是來自頂端

陰影為用戶查找界面元素提供了寶貴的線索。

設(shè)計師們最常犯的錯誤就是忘記了光線是從頂端照下來的。照亮了頂部,并在下面有投影,物體的頂部較亮,底部較暗。

我們的屏幕是平面的,但是我們投入很了精力去讓所有的內(nèi)容都能以3D的效果呈現(xiàn)出來。即使在平面設(shè)計、界面設(shè)計,我們也一直嘗試著不破壞扁平設(shè)計的原則下融入3D的元素:

 

#5 為每個頁面添加一個聚焦點

突出重點是吸引用戶注意特定設(shè)計元素的不錯策略。這可能涉及到內(nèi)容、圖像、鏈接、按鈕等方面。在大多數(shù)的設(shè)計領(lǐng)域,比如建筑設(shè)計、景觀設(shè)計、時尚設(shè)計等,都會使用這個策略,突出重點都是非常有效的。

平面設(shè)計師和攝影師廣泛使用 “三分原則”來創(chuàng)造藝術(shù)和設(shè)計上的重點內(nèi)容。

在上圖中,突出重點是通過顏色來實現(xiàn)的。

 

#6 讓用戶感覺到他們自己很聰明

設(shè)計不應(yīng)該是復(fù)雜的。當用戶能夠預(yù)測某個事物的設(shè)計行為時,他們會感到很開心,因為這讓他們認識到自己很聰明。

用戶喜歡能讓他們感到自己聰明的產(chǎn)品和服務(wù)。他們花費的寶貴注意力,時間和金錢越值得,他們就會覺得自己更聰明。用戶在與您的產(chǎn)品互動時感覺越聰明,他們就越會喜歡上您的產(chǎn)品。

下面圖片的小例子。相比左邊的鹽和胡椒瓶,用戶更喜歡右邊的。因為用戶更容易區(qū)分哪個是鹽,哪個是胡椒粉。

界面設(shè)計時,如果漢堡包圖標是用來表示來自左側(cè)的菜單,則不要用它來表示配置文件的詳細信息。

 

#7 保持一致

一致性的設(shè)計是直觀的設(shè)計。

當設(shè)計是一致時,人們可以毫無壓力的將原有認識遷移到新的環(huán)境中,并快速學(xué)習(xí)新的事物。這樣,他們可以專注于執(zhí)行任務(wù),而不是花大量的時間去學(xué)習(xí)新的UI界面的。

在整個設(shè)計系統(tǒng)中使用熟悉的設(shè)計模式是保持一致的最佳方法。如果一個網(wǎng)站有兩個頁面都是顯示博客內(nèi)容的,那么兩個頁面的設(shè)計應(yīng)該具有共通性,這樣用戶看到新的頁面時,能夠明白是什么含義。25學(xué)堂改版后,文章列表頁采用了博客排列,而設(shè)計素材資源則采用了卡片式排列,讓用戶一下就能明白哪些是文章哪些是資源。

了解和實施設(shè)計一致性的真正有用的指南請參考:https://www.uxpin.com/studio/ebooks/consistency-ui-design-creativity/

每天更新,
全站高品質(zhì)素材免費下載!