萬盛學電腦網

 萬盛學電腦網 >> 圖文處理 >> Adobe Illustrator教程 >> UI設計新手?7條實用法則幫你迅速進階!

UI設計新手?7條實用法則幫你迅速進階!

   首先,明確一點,這篇文章並不是為所有人准備的,而是有特定的目標讀者:

  想要在開發產品時設計出好看UI的開發者。

  想要讓自己作品集更出彩的UX設計師,或者是想要做出更精美的UI和UX的設計師。

  如果你是學藝術的學生或者已經是UI設計師了,你可能覺得這篇文章很無聊,而且觀點都是錯的。沒關系,你的批評沒錯,把這個網頁關了,去忙別的事吧。

  那麼從這篇文章中到底能學到什麼呢?我曾是一名不懂UI的UX設計師。我非常熱愛UX設計,但是後來我發現,做出精美的界面是多麼的必要:

  我以前的作品集看起來一團糟,顯得我的作品和思考過程很差勁。

  我做UX咨詢的客戶更喜歡有能力呈現作品的人,而不是只會畫一堆方塊和箭頭的人。

  我能為一些早期的創業公司工作嗎?還是一邊兒呆著吧。

  我當然也有借口:

  我沒有美術基礎,我主修工程專業,所以我做出難看的東西也無可厚非。

  最終,我還是學了app設計,不斷地分析案例,厚著臉皮臨摹成功的作品。假設我在1個UI項目上花10個小時的時間,其中只有1個小時是有效的,其它9個小時都是在失敗中不斷地學習,玩命的在Google、Pinterest或者Dribble上找值得借鑒的東西。

  下面這些“法則”都是我從失敗中總結出來的。所以,我需要提醒新人:我現在擅長UI,主要得益於我經常分析,並不是突然開悟,理解了什麼是美,什麼是平衡。

  這篇文章不講理論,只談應用。我不會講什麼黃金分割、色彩理論,只有實站中總結出的經驗和教訓。就好像,柔道源於日本幾個世紀以來的尚武精神和哲學理念。上柔道課時,不僅能學到打斗,還會學到很多關於能量、氣息與和諧之類的東西。而以色列格斗術(Krav Maga)則完全不同。這種格斗術是納粹壓迫下猶太人發明的。其中根本沒有“藝術”,在以色列格斗術的課堂上,你學到就是怎樣用一根筆或者本書襲擊別人的眼睛。

  這篇文章就是產品設計領域的以色列格斗術。

  以下是我要講的法則:

  光線來自天空

  黑白優先

  增加空白空間

  學會在圖片上呈現文字(第2部分)

  做好強調和淡化(第2部分)

  只用合適的字體(第2部分)

  善於借鑒優秀的作品(第2部分)

  我們來一起看看這些法則。

  法則1:光線來自天空

  陰影能夠告訴人腦我們到底在看什麼樣的UI元素。

  這可能是學習UI設計時,最容易忽略卻又極為重要的一點了:光線來自天空。光線總是從天空(上方)來的,從下面照上來的光看起來會非常詭異。

  當光線從天上照下來的時候,物品的上端會偏亮,而下方會出現陰影。上半部分顏色淺一些,而下半部分深一些。

UI設計新手?7條實用法則幫你迅速進階!   三聯

  從下面打一束光到人臉上是不是看起來很滲人?UI設計也是同理。我們的屏幕是平的,但是我們可以通過一些藝術手法讓它看起來是3D的,在每個元素的下方加一些陰影。

p5

  就拿這個按鈕舉例,這是一個相對“扁平化”(flat)的按鈕,但依然可以看出一些光線變化的細節:

  沒有按下去的按鈕底部邊緣更暗,因為沒有光線照到那裡。

  沒有按下去的按鈕上半部分比下半部分稍微亮一些。這是在模仿一個略有弧度的表面(見側視圖)。

  沒有按下去的按鈕下方有一些細微的陰影,在放大圖中看得更清楚。

  按下去的按鈕整體顏色都更暗了,但下半部分的顏色依然比上面深。這是因為按鈕在屏幕的平面上,光線不容易照到。也有人說,在現實中,按下去的按鈕顏色更深,因為手遮擋住了光線。

  這麼一個簡單的按鈕就有4種不同的光線變化。實際上,我們可以把這種原則運用到各處。

  iOS 6有點過時了,但還是學習光線不錯的案例。這張圖是iOS 6“勿擾模式”和“通知”的設置,看看上面有多少種不同的光線變化。

  控制面板的上邊緣有一小塊陰影。

  “開啟”滑動槽上部也有陰影。

  “開啟”滑動槽的下半部分,反射了一些光線。

  按鈕是突出的,上邊緣較亮,因為是與光源垂直的,接收了大量光線,折射到你的眼睛中。

  因為光線角度的問題,分割線處出現了陰影。

  通常會內嵌的元素:

  文字輸入框

  按下的按鈕

  滑動槽

  單選框(未選擇的)

  復選框

  通常會外凸的元素

  未按下的按鈕

  滑動按鈕

  下拉控件

  卡片

  選擇後的單選按鈕

  彈出消息

  等等,現在不是追求扁平化的設計嗎?

  iOS 7引發了科技界對於“扁平化設計”(flat design)的追求。也就是說圖標是平的,不再模仿實物而外凸或內凹,只有線條和單一顏色的形狀。

  我很喜歡這種干淨、簡潔的風格,但是我認為這種趨勢不會長久。通過細微的變化模擬出3D的效果非常自然,不會被完全取代的。

  在不久的將來,我們很可能會看到半扁平的UI(這也是我推薦你使用的設計風格)我把它稱為“flatty design”,依然非常干淨簡潔,但是也有一些陰影,有輕點、滑動、按下操作的提示。

  現在,Google也在各個產品上推行他們的Material Design,提供一種統一的視覺設計語言。Material Design的設計指導為我們展示了它如何運用陰影表現不同的層次。

  越來越多的設計師開始學習Material Design,咱也不能落伍咯!

  《超全面總結!深聊MATERIAL DESIGN引領的設計趨勢》

  《學霸的自學筆記!Material Design設計規范學習心得》

  這也是我所認同的類型。用現實世界的元素來傳遞信息,關鍵在於:細微。你不能說它沒有模仿現實世界,但也絕不是2006年的網頁風格,沒有紋理,沒有梯度,更沒有光澤。

  我認為“flatty”是未來的方向。扁平化?早晚會過時的。

  法則2:黑白優先

  在上色前用灰度模式設計可以簡化大量的工作,讓你更加關注空間和元素布局。

  UX設計師現在都喜歡“移動優先”的概念,這就意味著你要先考慮好在手機上如何顯示頁面,然後才考慮在超清的Retina屏幕上的顯示效果。

  這種限制非常好,能夠幫你理清思路。先解決一些棘手的問題(在小屏幕上顯示)。然後再解決簡單的問題(在大屏幕上的可用性)。

  我希望你先用黑色和白色設計,先把復雜的問題解決了。在不借助顏色幫助的情況下把app做得美觀易用。最後再有目的地上色。

  這種方法能保持app“干淨”、“簡潔”。加入過多的顏色很容易毀掉簡潔性。“黑白優先”會促使你關注空間、尺寸和布局這些更重要的問題。先來看一些經典的用灰度模式設計的頁面。

  “黑白優先”法則並不適用於所有情況,比如運動、卡通等有著鮮明特色的設計就需要好好地運用各種顏色。不過,大部分app並沒有這樣鮮明的特點,只要保持干淨和整潔就好,絢麗的顏色被公認是很難設計的,所以,還是先用黑色和白色來吧。

  第二步:如何上色

  上色最簡單的方法就是只加一種顏色。

copyright © 萬盛學電腦網 all rights reserved