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