2022-4-21 博博
看了一位著名設計大師Aaron Gustafson關于UI設計的演講報告,討論和剖析了幾個自適應界面,并演示了他們如何智能地變形以滿足用戶的需求。這里我有一些心得體會分享給大家。
當我開始我的職業(yè)生涯,我還是一個簡單的網頁設計師。我在網頁設計工作了一年,從小型商業(yè)網站開始,最終轉移到更大的客戶。我發(fā)現對它并不感興趣。我對分頁模式,用戶與表單交互的方式,以及感覺到的性能,比網頁的視覺設計更感興趣。我發(fā)現我愛上了交互,體驗各種的性能。
當我看科幻電影時,我會看看界面。當我玩視頻游戲時,我會觀察菜單的布局方式。如果任何這些特質聽起來很熟悉,你也可能有一顆UI設計師的心臟。
于是我退出我的之前的設計公司,開始了我自己感興趣的項目與目標。在我的LinkedIn頁面上,我試圖總結我的新職業(yè)目標:創(chuàng)作出不僅具有視覺,交互,體驗,還應更加智能,更加方便的大膽構想。自從我愛上了我現在這份工作以來已經有三年了,我并不是把它當作工作,而是把它當作我興趣慢慢去培養(yǎng),所以我的旅程并沒有停止。我目前在一家創(chuàng)業(yè)公司,這里有我們共同的夢想與信念,我們想把東西做好,做全面,希望廣大用戶會喜歡,我每天逼著自己去思考,去學習,去看一些書籍資料,但是很多時候事與愿違!
在這篇文章中,我主要想描述一個UI設計師是什么樣子:
這些工作是什么構成的?
哪里是最好的學習資源?
你如何在你的技藝得上展現更好?
UI設計的工作
我會將用戶界面設計的工作分為四類。與客戶溝通,研究,設計和原型,并與開發(fā)人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。
溝通
客戶溝通是關于理解客戶的問題。目標是掌握客戶的業(yè)務。項目的開始通常包括很多的談話。在工作開始時,不要太多地去了解客戶的想法- 你可以設想可能的設計解決方案時,以全新的方式展現給她們看,然后接受需求,進行分析。
要成為一個好的UI設計師,你需要能夠最終考慮你的客戶的意愿。例如,您的客戶可能在航空,為他們工作最終將使你對這個行業(yè)有很多認知。所以,你會感受到:不能明智的去選擇你的工作行業(yè),也就不會成為這行業(yè)的專家。我們需要對自己有足夠的認知。
在項目期間,溝通不會停止。作為設計師,你將不斷地展示你的工作。產品的誕生需要有火花的碰撞,所以我們迭代好,不斷的進行溝通與討論。
研究
與客戶溝通,你會做很多研究。這可能包括實地研究,與客戶的研討會,分析競爭或定義一個策略 - 基本上,只是幫助你理解手頭的問題。
研究是什么?研究可以告訴你的設計選擇。這是你讀過的文章,或者蘋果剛剛發(fā)布的新東西。當你解釋為什么做出一個特定的設計選擇時,你的研究會幫助你。
研究可以非常廣泛。我經常測試新的設備用于研究目的; 或注冊新的網絡應用程序以研究其用戶界面。
設計和原型
作為設計師,你可能會花大部分時間做設計調整工作。UI設計項目可以以多種方式前進,從素描,詳細設計到編碼。
您使用的方法在很大程度上取決于項目的類型。你在設計什么?這是一個網站,還是應用程序,或者你寧愿稱它為一個應用程序嗎?它使用本地技術嗎?是重新設計還是從頭開始?
在我們公司沒有固定的過程,但大多數項目遵循相同的粗略順序:他們從草圖和線框開始,繼續(xù)詳細的視覺和交互設計,并以一個原型結束。
作為設計師,我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要,但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應用程序是相當于能夠使用鉛筆繪畫或刷子來繪畫。
話雖如此,對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設計工具,可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator,但我的大部分視覺設計工作是在這些天在PS上完成的。其他團隊成員已經切換到較新的工具,如Sketch,Affinity Designer,這些工具我們都需要了解,找到適合自己的就行。
工具是一個非常個人的選擇。只要我們能輕松地一起工作,每個人都可以自由選擇自己。為了使與客戶的討論,我們的設計更簡單,我們使用Axure制作原型。對于更高級的原型,我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。
開發(fā)者溝通
溝通設計有多種形式:詳細規(guī)格,提供資產,一起審查設計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應用程序。
傳統(tǒng)的方法是在屏幕設計旁邊交付資源。屏幕設計可用于查看設計整體看起來是什么樣子,而資產是即用型PNG和圖標的SVG,因此開發(fā)人員不必處理圖形編輯器。
在我們公司,我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設計的一致性。當我們處理一個web項目時,我們提供了詳細的HTML和CSS集合,逐條記錄,準備實施。我相信在軟件開發(fā)的每個階段都有設計眼光是實現我創(chuàng)建一流級軟件目標的唯一途徑。
Web與本機應用程序
然而,這些指南傾向于針對營銷網站進行調整,并且其中的內容并不總是導致良好的用戶界面決策。字體傾向于出于營銷原因而選擇,而不是為了易于理解。顏色可以是粗體和醒目的,它可以在廣告活動中使用,但不會在您日常使用的應用中使用。這些指南必須解釋。
有幾個UI設計的網絡指南。你可以認為網絡是不同風格的熔爐。如果你做任何感覺更像一個應用程序而不是一個網站,你需要知道廣泛使用的框架如Bootstrap和ZURB基金會。框架先打好,再開始確定事情應該如何去做,因為你不想重復做某一件事。
我比較喜歡使用Bootstrap。它為常見的UI元素(如按鈕,數據表和模態(tài))提供了合理的默認大小。
在網頁設計中,您受網絡技術能力的限制。它曾經是很難實現簡單的視覺華麗像網站上的圓角。現在很多構想都可以做了 - 你現在可以自由繪制大量的陰影,過渡,動畫甚至3D的用戶界面。
作為設計師,在瀏覽器中控制流程和設計是更加現實的。我還沒有看到許多UI設計師接管本地應用程序的UI編程,但是設計師做一個網絡應用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設計,你將有一項專業(yè)獨特的技能在你的同行,也會增加你許多優(yōu)勢。但是對我來說,這也是唯一的方式,真正了解網絡的工作原理。所以作為一名設計師,還是需要懂代碼的。
Web約束
您很快就會發(fā)現,并非所有的瀏覽器都支持您學習的所有酷技巧,這是網頁設計的現實。這是很好的遵循著名的原則,如漸進增強,你盡可能加載增強內容,但也想想如何內容降級。
最近,“切割芥末”已經變得流行。在BBC的網絡團隊的支持下,這包括區(qū)分“好”和“壞”瀏覽器,并為“壞”瀏覽器提供有限的體驗。但是,它真的只適用于內容網站。
當涉及到類似應用程序的體驗,許多人只限于支持一些領先的瀏覽器,使開發(fā)更容易??杀氖?,這讓我們回到1996年的情況,你需要一個特定的瀏覽器來查看內容。
改善你的技能
那么,你如何跟上快速移動的網絡行業(yè)的最新發(fā)展,并提高你的技能?讓我們看看幾種不同的方法提高你的技能...
平臺知識
設計師的主要部分是平臺知識。你應該知道各種操作系統(tǒng),以及如何使用它們。作為設計師,我們傾向于使用Mac,但是很容易忘記,大多數人使用Windows框來完成他們的工作。
我覺得你只有真正理解的東西,如果你自己使用它。我喜歡使用我的Mac設計,但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構建,以檢查UI中的各種更改。
我也經常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它,因為我覺得它并不是必要的。
此外,web可以被視為其自己的操作系統(tǒng)。它不斷發(fā)展,每周都會向每個瀏覽器供應商添加新功能。非常值得了解瀏覽器的技術方面,特別是關于CSS和圖形能力。你需要知道SVG和WebGL是什么,以及如何使用Web動畫API。
每個平臺隨著時間演變,作為一個用戶界面設計師,它是你的任務,保持最新。畢竟,無論你在設計什么,都不是孤立生活,而是一個更大的軟件生態(tài)系統(tǒng)的一部分。
回到基本
我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設計的網頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學者。
如果你不知道概念,如模態(tài)和可承受性,你需要讀。你應該能夠解釋Fitts的定律是什么。格式塔的鄰近法?這是UI設計的面包和黃油。
受游戲和電影的啟發(fā)
作為UI設計師,我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復雜,UI設計人員不得不解決與UI設計師在商業(yè)項目上工作相同的復雜界面問題。
游戲也可以表示趨勢。在Colin McRae Rally的菜單中發(fā)現的極簡主義讓我想起了iOS7的方向。在某種程度上,現在時尚的UI動畫設計出現在幾年和幾年前的游戲中。從skeuomorphism到裸,功能界面和“平面設計”的轉變在游戲中也很明顯。比較2006年的湮滅與2011年的天際。這兩個游戲都是同一系列的RPG,但差異是驚人的。
Marvel電影中的未來派界面如鋼鐵俠也是我的靈感。他們不是完全可用的例子,但他們確實讓我更多地關注計算作為一個整體。我們想要一個未來的屏幕,或者我們想讓屏幕消失?這可能是一個很好的問題,在一個酒吧的設計師。