「佳作翻譯」非科班如何做好UI設計的7大規則(Part 1)
前言
今天這篇文章是來自西雅圖的獨立UI/UX設計師Erik D. Kennedy,他在使用者體驗和視覺設計方面有很豐富的經驗。
同時他還運營了一個設計網站,Learn UI Design,他會在上面分享自己學習的心得,也會發布一些視訊教程。有興趣的朋友可以關注一波。
因為是英文佳作,小編能力有限,所以找了英語專業的小夥伴來幫忙,如果有發現什麼紕漏,emmmm,我們改......
在閱讀文章前,你必須要知道,這份設計指南並非適合所有的人。那誰需要看我們這些設計指南呢?
· 初學設計的入門學生。
· 希望直接可以設計美觀頁面的開發人員。
· 希望有更好使用者體驗的使用者體驗設計師。
那在這份指南中你將會獲得什麼呢?
首先,我是一名沒有UI視覺技能的使用者體驗設計師。我喜歡設計使用者體驗,但是在我意識到需要去學習“如何讓介面看起來更好”之前,我花費一個專案週期90%的時間去瘋狂的學習,拼命搜尋谷歌,瀏覽Pinterest和Dribbble,以便從中複製。
而以下這些規則都是那段時間我所學到的經驗:
1、光來自天空
2、黑與白第一
3、加倍你的留白
4、瞭解在影象上疊加文字的方法
5、使文字彈出和不彈出
6、只使用好的字型
7、像藝術家一樣竊取
那接下來就讓我們一一展開來討論吧。
規則1:光來自天空
人類大腦通過陰影解析到我們正在看什麼使用者介面元素。
這可能是我們理解UI設計最重要但經常被忽略的規則。我們都知道光來自天空,已經習慣了光的照射方式,以至於從下面來的光會看起來更加怪異。
WoooOOOooo(國外設計師也愛瓊瑤啊)
當光線來自天空時,它照亮了物體的頂部並在它們下面投下陰影。物體的頂部較亮,底部較暗。
UI也是如此。就像面部特徵中,所有底面上都有小陰影一樣,在您可以找到的幾乎每個UI元素的下側都有陰影。
我們的螢幕是平的,但是我們在設計過程中儘量讓元素看起來更立體。 即使在現在扁平化當道的潮流下,我們也能在很多優秀作品的細節中,看到這條規則存在的意義。
就拿按鈕來說,即使使用這個相對“扁平”的按鈕,仍然有一些與光有關的細節:
· 未按下的按鈕(頂部)具有深色邊框;
· 未按下的按鈕頂部比底部略亮;
· 未按下的按鈕投射出一個微妙的陰影;
· 按下的按鈕底部比頂部更暗,整體也呈現暗色調,因為我們的手遮擋略光線。
iOS 6有點過時了,但它在輕鬆行為方面做了很好的案例研究
這是iOS系統設定模組的 - “請勿打擾”和“通知”。 細節處的光效非常豐富。
· 插入控制面板的上脣投下一個小陰影;
· “ON”滑塊軌道是凹形的,底部反射更多光線;
· 滑動滑塊,看到它們頂部周圍的明亮邊框?這代表它是垂直於光源的表面,因此接 收大量光線,從而將大量光線反射到您的眼睛中;
· 分隔器凹口被遮擋在遠離太陽的角度,反之亦然。
分割線缺口處的特寫鏡頭
在上面提到了“扁平化設計”,那具體如何解釋扁平和光效的關係呢?
在ios7開始的設計潮流中,“扁平化設計”在科技界引起轟動。
的確,它確實是平的,沒有模擬的凸起或者凹痕,只有純色的線條和形狀。
可是在不久之後,“半扁平化設計”的概念就興起,它仍然很乾淨、很簡單,但是你會發現,在一些設計元素的細節上,都有陰影的體現。
OS X Yosemite— 帶有光影細節的扁平化設計
同時,谷歌推出的“Material Design”設計語言,這種統一的視覺語言,其核心就是尋求模擬物理世界的物品,在它的設計規範中也提到了如何使用不用的陰影來傳達不同的深度。
這就是我所看到的和我所理解的,對使用者最為友好對一種表現方式。它使用現實世界的微妙細節表現來傳達資訊。
我想,“Flatty”就是以後UI設計的發展方向,純扁平化和擬物都已經是過去的事情了。
規則2:黑與白第一
第一步:在為設計做配色之前,先把畫面進行灰度設計。簡化了視覺設計中最為複雜的元素,迫使設計師專注於元素間距和頁面佈局。
就像現在的互動設計都是“移動優先”,這就意味著,先從更難的問題開始解決(小小移動裝置螢幕上的互動),然後採用類似解決方案來解決更容易的問題(大螢幕上pc裝置的互動)。
類似在視覺設計中的規則:首先設計黑色和白色。 也就是我們在沒有顏色的幫助下,去使用各種方式來達到產品的美觀性和易用性,最後在新增顏色。
Haraldur Thorleifsson的灰度線框看起來和完成的網站一樣好
這也是讓產品看起來“乾淨”和“簡單”的可靠辦法。過多的顏色往往很容易搞砸設計。 而“黑與白第一”迫使你首先關注間距、尺寸和佈局等內容,這些才是簡約設計的主要關注點。
優雅的灰度
而在某些情況下,“黑與白第一”看起來並不有用。我們在設計具有強烈特定態度的作品的時候,如“運動型”、“華麗畫面”、“卡通設計”等,這些都是需要非常好的去使用顏色來表達產品。
Julien Renvoye(上)和Cosmin Capitanu(下)的華麗和充滿活力的設計
第二步:接下來,就是如何去新增顏色。
最簡單的方案就是隻使用一種顏色。
在灰度的頁面上只新增一種顏色可簡單有效的吸引眼球。
你也可以邁出一步,使用灰度+兩種顏色,或灰度+單色調的多種顏色來傳達設計思想。
如何過你還不清楚什麼是色調?這裡有一篇非常好的關於色調的入門讀物 ofollow,noindex" target="_blank">《甲方竟敢說你的配色醜! 我來教你懟回去(三)》 可以看看。
來自Smashing Magazine的單色金色主題
來自Smashing Magazine的單色藍色主題
通過修改單個色調的飽和度和亮度,可以生成多種顏色,但它並不會讓人眼前一亮。
而使用來自一個或兩個基色調的多種顏色,是在保證設計不混亂的情況去,去強調和中和元素最可靠的方法。
Kerem Suer的倒數計時器
規則3:加倍你的留白
如果想讓你的頁面看起來是被設計過的,那就通過大量的頁面留白來增加元素之間的喘息空間。
在“規則2-黑與白第一”中,設計師在設計顏色之前就考慮間距和佈局,這是一件好事。那麼,現在就開始討論間距和佈局吧。
如果你有編寫HTML的經驗,在熟悉的HTML預設佈局的頁面上,一切都被堆砌到螢幕的頂部。字型很小,線條之間沒有空間,段落之間的空間也不夠。
這些從審美的角度來說,實在太糟糕了。
還是那句話, 如果想要讓頁面看起來具有設計感,那就加大頁面的喘息空間,哪怕是過大的留白也比毫無留白來的好。
如果你和我之前一樣,習慣於使用預設的格式去編輯頁面,現在就應該認識到哪些壞習慣了。
我們把留白作為頁面的設計元素,所有的內容都以空格開頭,知道有其它的元素替換它。
節奏感是設計頁面的一個重要原因。
從一個空白頁面也就開始意味著從留白開始。從一開始就想到的邊距和間距,用你所新增的元素有意識的去一個一個替換空白。
這是Piotr Kwiatkowski的音樂播放器概念
請特別主意左邊的選單
選單項之間的垂直空間是文字高度的兩倍,文字為12px字型,其字高和上下間距相同。
在看看列表標題
標題“PLAYLISTS”和它下面的下劃線之間有15px的空白,這不僅僅是字型本身的字高,也就是說清單之間的留白達到了25px。
頂部導航欄中有更多空間。 “搜尋所有音樂”文字是條形高度的20%。圖示的比例相似。
右側邊欄顯示文字行之間的寬鬆間距,都是設計師有意識的去做的,並且展現出了很好的效果。就美學而言,這些都足以和最好的音樂UI競爭。
慷慨的留白可以使一些最混亂的介面看起來更簡潔。
Forum design concept by Matt Sisto
Wikipedia design concept by Aurélien Salomon
最後重要的事情重複一遍:
在你的線之間放置空白; 在元素之間放置空白; 在元素組之間放置空白; 整體分析什麼才是最重要的。
小結
好了,以上就是第 1 部分,感謝你們看到了這裡。
接下來在第二部分中,我們會討論最後的 4 條規則:
··瞭解在影象上疊加文字的方法
··使文字彈出和不彈出
··只使用好的字型
··像藝術家一樣竊取
如果你覺得這些對你有幫助,可以關注下我們第2部分的分享。