上周我上了一次微課,后來很多朋友說希望能夠對課程內容進行回顧,為此,我特意將微課內容做一個簡單整理,希望對大家有用。
大家好,感謝大家在百忙中來參加本次微課,非常榮幸能在這里跟大家一起探討下《移動UI設計師的快速成長》這個話題。我先自我介紹一下,我叫黃方聞,現在從事交互設計工作,也是最近上市的《動靜之美——Sketch移動UI與交互動效設計詳解》一書的作者。
我們本次課程試圖解決以下三個問題:
1、入行UI設計的推薦路徑;
2、交互動效設計的學習思路;
3、簡歷和面試技巧分享。
之所以選擇跟大家探討上述話題也是希望大家在聽完本次課程后,首先可以對UI設計和動效設計有一個大致的了解,然后能為大家提供一些書寫簡歷以及投遞簡歷的小技巧,幫助大家找到一份不錯的工作。
那么我們首先來看第一個問題。
第一個問題是關于入行UI設計的推薦路徑,也就是說一個完全零基礎的同學,如何快速成長為一名優秀的UI設計師。在回答這個問題之前,我們需要思考以下的四個問題:
1、你是否真正了解什么是UI?
2、作為一名UI設計師應具備哪些技能?
3、設計思維應如何培養?
4、我們對設計工具應有何種態度?
我們先來看第一個問題,什么是UI?我個人對UI有著以下的一句話的定義:用戶所見的一切,和用戶所預期的一切。
大家知道,UI的英文全稱是User Interface,即用戶界面,那么什么是用戶界面?我們來看以下的幾個案例。
這兩套界面相信大家都非常熟悉,這是在今年下半年會推出的iOS10系統以及Android N的系統界面,通過對比我們可以發現兩個系統在設計語言上的不同。
接下來看這樣一組圖。
這是四個APP的界面,第一個微信,社交類產品;第二個是螞蜂窩,旅行類產品;第三個是京東,電商類產品;第四個是53 Paper,藝術類產品??梢钥闯霾煌愋偷漠a品設計風格差異非常大,但是仔細看又會有相同邏輯的部分。
接下來看第三張圖片。
第三張圖是一個虛擬項目的設計圖,來自互聯網。這有可能是未來UI的發展方向,實際上這張圖是一個AR和VR的結合,或者我們稱之為是一個MR產品的設計圖。
經過以上的可以看到,無論是系統層還是產品應用本身,還是未來的AR或者VR的產品,所有展現在用戶面前的界面,都是UI設計師所要設計的。那么我們再回到最開始的那個定義:用戶所見的一切,和用戶所預期的一切。再細分下來,可以看到,所謂的用戶所見的一切,即用戶界面,我們應該思考的是我們所設計的界面是否可用、易用和好用;而用戶所預期的一切,則是指設計規范層面的,我們所設計出來的界面是否符合用戶的預期。
我們所說的用戶體驗,實際上就是一個匹配用戶預期的過程,現階段我們的設計很幸運的是可控的,我們可以有具體的尺寸,具體的設計規范可供參考,而未來一旦AR或者VR普及,所呈現在用戶面前的界面是不可控的,每個人看到的內容不一樣,每個人操作不一樣導致每個內容的擺放位置和呈現形式也不一樣,那這就對我們去把握用戶預期有著非常高的要求。
如何更好地匹配預期,我們來看下圖。
這是喬布斯在2007年iPhone一代發布會上所講到的,每個革命性的用戶界面都帶來了革命性的產品,要理解這句話,先看下圖。
這是Windows Mobile的操作界面,這也是一個觸屏界面,現在看來我們會可能嘲笑這樣的一個界面,但是在iPhone出來前,大家就是用著這樣的界面,因為當時是電阻屏的設備,普遍采用的觸控筆,所以無論把按鈕選項做成多么小,用戶總能點擊到。
再來看下圖。
這是使用了3D touch技術后的iOS系統界面,可以看到該界面是將背景模糊,然后彈出一個菜單,隨著3D touch技術的發展,可以看到在今年發布的iOS10系統上,越來越多的情況使用了大量的背景模糊效果,又或者稱之為毛玻璃效果。
我們來分析上面兩個界面的差異,會發現很多時候界面的設計會受到當前設備的局限,所以說,我認為一個優秀的UI設計師,去充分了解我們所設計產品的界面所運行的硬件設備是非常有必要的,在了解完硬件后,再去熟悉使用在該硬件上的最新的技術,這樣能讓我們盡可能的利用好這些新技術,設計出超用戶預期的界面。
除了硬件外,我們還應該熟知當前平臺的手勢、用戶的操作習慣、該平臺的規范等等。
那么呈現在用戶面前的界面,是否越好看就越好?扁平化和擬物化到底哪個是趨勢哪個更好呢?這也是很多朋友問得比較多的一個問題。
我首先想要說的是擬物化和扁平化的問題,首先大家看下圖。
這是iOS6和iOS10的界面,iOS6是最后一代采用擬物化設計的iOS系統。大家知道,iPhone一代是在2007年發布的,發布的時候,iPhone屬于一個非常創新的產品,大部分用戶根本沒見過這個產品,而蘋果針對iPhone的目標用戶定義為3——80歲的用戶,并且要求用戶在不看說明書的情況下便知道如何使用——事實上從第一代iPhone開始,就沒有提供紙質的說明書,只提供了一個快速上手指南。
要達到這一目標,最好的辦法就是讓界面盡可能的接近真實物體,比如一個電話,一個時鐘,一個指南針,相機、地圖等等,這樣用戶看到這個圖標便知道這里是與什么相關的功能。在iOS6以前的界面,采用滑動鎖屏,用戶拖動那個扭從左到右,模擬的非常真實,用戶也不會疑惑。所以說擬物化是具有非常優秀的教育和引導新用戶的作用的,越與現實生活接近,則越能降低新用戶的學習成本。
但是經過6年的發展,大部分用戶對iPhone已經非常熟悉,這時候擬物化的一些局限性也凸顯出來——比如滑動解鎖,只能拖動那個鈕進行滑動,不能全屏滑動——因為要全屏滑動需要在全部屏幕上做滿滑動的鈕,這樣顯然不現實;另外還有比如快捷工具,如現在iOS系統從下往上拉出來的工具界面,在擬物化的時候,因為現實生活中沒有這樣的載體,所以也不好設計。這時候,蘋果將其做成扁平化,可以全屏滑動解鎖了,可以做出工具欄了。
這時候無論你設計多么簡約,用戶也不會困擾,因為大家對于這樣的體系已經足夠熟悉——這個是擬物化轉為扁平的一個先決條件。
了解完這個我們再來看是否一個界面設計的越好看越好。其實唯一的答案是,對于UI設計來說,如果只有唯一的評判標準,一定不是好看,而應該是好用。在擬物化時代,你設計的界面越真實,用戶學習成本越低,這樣的界面越好;而在扁平化時代,強調內容為王,如果你設計的界面已經干擾到用戶對內容本身的獲取,這樣的界面便是失敗的。我們需要了解的是,所有的UI設計,應該都是為了更好的用戶體驗去服務的。
那么對于剛入行的朋友來說,如何快速的匹配用戶預期,如何保證設計出來的東西至少是可用的,這時候最好的辦法是對設計規范有所了解。
我們知道對于移動UI來說,有兩份設計規范是必須要了解的——《iOS人機交互指南》和《Material Design設計規范》,很多時候我們說到設計規范就是簡單元素的尺寸、位置這些內容,但是實際上我們來看下圖:
這是iOS最新的設計規范,可以看到在該規范中,詳細介紹了設計原則、iOS10的新技術、界面元素、交互、特征等等內容,這些龐大知識的整體才構成一個完整的設計規范,閱讀完這些內容,大家才能不僅明白要怎么做,更能理解為什么要這么做。
以上的兩份設計規范因為時間問題,在此不做展開說明,為了方便大家閱讀,我在網上為大家找了兩份中文設計規范,大家可以自行下載閱讀。鏈接:http://pan.baidu.com/s/1qYGOD7Q密碼: x8q8。
再來看第二個問題,作為一名UI設計師應具備哪些技能?我一句話概括是,設計能力是基礎,但不是唯一。
要理解這句話,首先需要明白的是,UI設計是一個理性和感性的結合,作為一名UI設計師,設計能力是非常重要的,我們需要理解,扁平化設計、極簡設計一定不等于簡單設計,相反的其實對設計能力是有著非常高要求的,對于UI設計師來說,好的審美意識、優秀的設計能力,認真的設計態度都是非常重要的,但是除了這些之外,還應該具備對用戶心理的預期能力、目標用戶分析能力、全局觀、敏捷設計能力。
上圖是Dribbble和Behance,相信大家都非常熟悉,但是如果大家仔細去分析兩個網站的不同,會發現Dribbble上限制了一個作品的尺寸,而Behance上經??梢钥吹胶芏嗤暾淖髌?。
當我們尋求創意,想要學習優秀的設計的時候,大多數情況下我們會優先考慮Dribbble,因為上面太多大神,我們可以在上面觀賞到非常非常多優秀的視覺設計作品,但是大家是否知道Dribbble的定位,是一個設計師的創意分享網站,我們知道設計師的思維經常是天馬行空的,而在日常工作中,我們經常會優先考慮產品是否能落地的問題,這個產品是否能提供好的用戶體驗的問題,這時候視覺就不再先行了。
一個很常見的例子:菜單的選擇。Material Design推出后,吸引了大量的設計師,我相信很多人都會非常喜歡側滑菜單(抽屜菜單),因為會讓界面顯得特別的優雅美觀,但是有數據表明,側滑菜單執行效率低于底部的Tab菜單??赡芪覀冊谧鲎髌芳鲆粋€視覺作品時,會選擇側滑菜單,但是真正落地時,又會回到底部Tab菜單。
所以很多情況下,光有設計能力是不夠的,視覺不等于好的用戶體驗,但是好的用戶體驗一定具備好的視覺效果。另外UI設計師的全局觀很重要,一套界面下來往往有幾十個甚至上百個,是否有一套成體系的設計思路,讓所有的界面保持視覺一致,相同元素功能一致。敏捷設計能力同樣重要,現在互聯網競爭越來越積累,唯快不破,對開發速度的要求越來越高,能否跟得上產品迭代進度也是非常重要的,所以Sketch這類能提高設計效率的優秀軟件也越來越受到歡迎和重視。
再來看第三個問題,設計思維應如何培養?
沒有任何捷徑,但需要找到最佳路徑。
成為一名優秀的UI設計師是沒有捷徑可走的,但是需要找到一條最佳的路徑。所謂的沒有捷徑,是UI設計水平的提升和其他設計水平提升一樣,需要盡可能多的看優秀作品,盡可能多的臨摹優秀作品,盡可能多的進行思考,從而轉化為自己的東西。但是UI設計不同于其他設計的是,UI設計服務的對象是用戶,是大眾用戶,可能插畫師有自己的風格是件非常好的事情,可能攝影師有自己的風格是非常棒的事情,但是UI設計師有自己的風格不一定是好事情,這句話的意思就是說,我們去臨摹去看的時候,不要憑自己的喜好進行欣賞,而是要從客觀的角度進行分析和思考,所謂的客觀的角度,是去思考市面上那些有巨大用戶的,成功的產品的界面設計,而非全部是小眾的幾乎沒有用戶的產品,注意是說的非全部,就是說不是完全不行,但是需要均衡一下。
到了第四個問題就非常好解決了,我們對設計工具應持有何種態度?
我的觀點始終是,設計工具的選擇,是最后,而非最初。
我經常被問得最多的問題就是,我應該從什么軟件開始學習?PS?Sketch?實際上,所有的軟件本質上都是一個工具,一個優秀的畫家給他最爛的筆,也會比完全不會畫畫的人畫得好太多,同樣我們即使精通了所有的軟件,不具備UI設計思維,不知道我們要做什么,最后也什么都做不出來。但是當我們知道要做什么的時候,帶著目標性去尋找工具,則自然會明白自己應如何選擇。
加入你要處理位圖,PS是最好的選擇,但是如果你是要做UI界面,Sketch會能給你更多更好的幫助。我不建議大家面對一個軟件就抱著從一而終的想法,我們應盡可能多的了解各個軟件的優勢和不足,再針對實際情況選擇最適合自己的軟件。
但是需要注意的是,可能不同軟件都能實現相同的效果,如下圖所示。
對于這樣的一個界面,我們在PS中的設計思路和在Sketch中的設計思路應該是不同的,在Sketch中繪制這樣的一個圖表可能半分鐘就繪制完成了,但是如果在Sketch中采用和PS相同的設計思路進行設計,可能花的時間不比PS少,要達到不同軟件有不同設計思路,要求我們對該軟件有非常深入的了解,在我的新書中有為大家總結Sketch非常多的小技巧,希望能給大家耳目一新的感覺,也能為大家節省不少時間。
本次微課的前半部分內容就是這些,后面的內容會在下一篇中為大家整理出來,最后向大家介紹下我的新書:《動靜之美——Sketch移動UI與交互動效設計詳解》,這是一本UI與動效設計理論知識和軟件實例操作相結合的教程,書中按照實際工作流程,介紹了移動UI的原型、界面、圖標和動效的設計,超詳細的講解了Sketch、Keynote、Principle和Pixate四大軟件的使用,并隨書附贈近600分鐘教學視頻。
本書現已在當當、京東、亞馬遜和天貓等各大平臺全面上市,歡迎選購,謝謝支持。