非常干貨系列之UI設(shè)計師高階技巧

UI設(shè)計的工作

將用戶界面設(shè)計的工作分為四類。與客戶溝通，研究，設(shè)計和原型，并與開發(fā)人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。

溝通

客戶溝通是關(guān)于理解客戶的問題。目標(biāo)是掌握客戶的業(yè)務(wù)。項目的開始通常包括很多的談話。在工作開始時，不要太多地去了解客戶的想法- 你可以設(shè)想可能的設(shè)計解決方案時，以全新的方式展現(xiàn)給她們看，然后接受需求，進行分析。

要成為一個好的UI設(shè)計師，你需要能夠最終考慮你的客戶的意愿。例如，您的客戶可能在航空，為他們工作最終將使你對這個行業(yè)有很多認知。所以，你會感受到：不能明智的去選擇你的工作行業(yè)，也就不會成為這行業(yè)的專家。我們需要對自己有足夠的認知。

在項目期間，溝通不會停止。作為設(shè)計師，你將不斷地展示你的工作。產(chǎn)品的誕生需要有火花的碰撞，所以我們迭代好，不斷的進行溝通與討論。

 

研究

與客戶溝通，你會做很多研究。這可能包括實地研究，與客戶的研討會，分析競爭或定義一個策略 - 基本上，只是幫助你理解手頭的問題。

研究是什么？研究可以告訴你的設(shè)計選擇。這是你讀過的文章，或者蘋果剛剛發(fā)布的新東西。當(dāng)你解釋為什么做出一個特定的設(shè)計選擇時，你的研究會幫助你。

研究可以非常廣泛。我經(jīng)常測試新的設(shè)備用于研究目的; 或注冊新的網(wǎng)絡(luò)應(yīng)用程序以研究其用戶界面。

設(shè)計和原型

作為設(shè)計師，你可能會花大部分時間做設(shè)計調(diào)整工作。UI設(shè)計項目可以以多種方式前進，從素描，詳細設(shè)計到編碼。

您使用的方法在很大程度上取決于項目的類型。你在設(shè)計什么？這是一個網(wǎng)站，還是應(yīng)用程序，或者你寧愿稱它為一個應(yīng)用程序嗎？它使用本地技術(shù)嗎？是重新設(shè)計還是從頭開始？

在我們公司沒有固定的過程，但大多數(shù)項目遵循相同的粗略順序：他們從草圖和線框開始，繼續(xù)詳細的視覺和交互設(shè)計，并以一個原型結(jié)束。

作為設(shè)計師，我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要，但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應(yīng)用程序是相當(dāng)于能夠使用鉛筆繪畫或刷子來繪畫。

話雖如此，對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設(shè)計工具，可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator，但我的大部分視覺設(shè)計工作是在這些天在PS上完成的。其他團隊成員已經(jīng)切換到較新的工具，如Sketch,Affinity Designer,這些工具我們都需要了解，找到適合自己的就行。

工具是一個非常個人的選擇。只要我們能輕松地一起工作，每個人都可以自由選擇自己。為了使與客戶的討論，我們的設(shè)計更簡單，我們使用Axure制作原型。對于更高級的原型，我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。

開發(fā)者溝通

溝通設(shè)計有多種形式：詳細規(guī)格，提供資產(chǎn)，一起審查設(shè)計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應(yīng)用程序。

傳統(tǒng)的方法是在屏幕設(shè)計旁邊交付資源。屏幕設(shè)計可用于查看設(shè)計整體看起來是什么樣子，而資產(chǎn)是即用型PNG和圖標(biāo)的SVG，因此開發(fā)人員不必處理圖形編輯器。

在我們公司，我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設(shè)計的一致性。當(dāng)我們處理一個web項目時，我們提供了詳細的HTML和CSS集合，逐條記錄，準(zhǔn)備實施。我相信在軟件開發(fā)的每個階段都有設(shè)計眼光是實現(xiàn)我創(chuàng)建一流級軟件目標(biāo)的唯一途徑。

Web與本機應(yīng)用程序

然而，這些指南傾向于針對營銷網(wǎng)站進行調(diào)整，并且其中的內(nèi)容并不總是導(dǎo)致良好的用戶界面決策。字體傾向于出于營銷原因而選擇，而不是為了易于理解。顏色可以是粗體和醒目的，它可以在廣告活動中使用，但不會在您日常使用的應(yīng)用中使用。這些指南必須解釋。

有幾個UI設(shè)計的網(wǎng)絡(luò)指南。你可以認為網(wǎng)絡(luò)是不同風(fēng)格的熔爐。如果你做任何感覺更像一個應(yīng)用程序而不是一個網(wǎng)站，你需要知道廣泛使用的框架如Bootstrap和ZURB基金會?？蚣芟却蚝?，再開始確定事情應(yīng)該如何去做，因為你不想重復(fù)做某一件事。

我比較喜歡使用Bootstrap。它為常見的UI元素（如按鈕，數(shù)據(jù)表和模態(tài)）提供了合理的默認大小。

在網(wǎng)頁設(shè)計中，您受網(wǎng)絡(luò)技術(shù)能力的限制。它曾經(jīng)是很難實現(xiàn)簡單的視覺華麗像網(wǎng)站上的圓角。現(xiàn)在很多構(gòu)想都可以做了 - 你現(xiàn)在可以自由繪制大量的陰影，過渡，動畫甚至3D的用戶界面。

作為設(shè)計師，在瀏覽器中控制流程和設(shè)計是更加現(xiàn)實的。我還沒有看到許多UI設(shè)計師接管本地應(yīng)用程序的UI編程，但是設(shè)計師做一個網(wǎng)絡(luò)應(yīng)用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設(shè)計，你將有一項專業(yè)獨特的技能在你的同行，也會增加你許多優(yōu)勢。但是對我來說，這也是唯一的方式，真正了解網(wǎng)絡(luò)的工作原理。所以作為一名設(shè)計師，還是需要懂代碼的。

Web約束

您很快就會發(fā)現(xiàn)，并非所有的瀏覽器都支持您學(xué)習(xí)的所有酷技巧，這是網(wǎng)頁設(shè)計的現(xiàn)實。這是很好的遵循著名的原則，如漸進增強，你盡可能加載增強內(nèi)容，但也想想如何內(nèi)容降級。

最近，“切割芥末”已經(jīng)變得流行。在BBC的網(wǎng)絡(luò)團隊的支持下，這包括區(qū)分“好”和“壞”瀏覽器，并為“壞”瀏覽器提供有限的體驗。但是，它真的只適用于內(nèi)容網(wǎng)站。

當(dāng)涉及到類似應(yīng)用程序的體驗，許多人只限于支持一些領(lǐng)先的瀏覽器，使開發(fā)更容易。可悲的是，這讓我們回到1996年的情況，你需要一個特定的瀏覽器來查看內(nèi)容。

 

改善你的技能

那么，你如何跟上快速移動的網(wǎng)絡(luò)行業(yè)的最新發(fā)展，并提高你的技能？讓我們看看幾種不同的方法提高你的技能...

平臺知識

設(shè)計師的主要部分是平臺知識。你應(yīng)該知道各種操作系統(tǒng)，以及如何使用它們。作為設(shè)計師，我們傾向于使用Mac，但是很容易忘記，大多數(shù)人使用Windows框來完成他們的工作。

我覺得你只有真正理解的東西，如果你自己使用它。我喜歡使用我的Mac設(shè)計，但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構(gòu)建，以檢查UI中的各種更改。

我也經(jīng)常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它，因為我覺得它并不是必要的。

此外，web可以被視為其自己的操作系統(tǒng)。它不斷發(fā)展，每周都會向每個瀏覽器供應(yīng)商添加新功能。非常值得了解瀏覽器的技術(shù)方面，特別是關(guān)于CSS和圖形能力。你需要知道SVG和WebGL是什么，以及如何使用Web動畫API。

每個平臺隨著時間演變，作為一個用戶界面設(shè)計師，它是你的任務(wù)，保持最新。畢竟，無論你在設(shè)計什么，都不是孤立生活，而是一個更大的軟件生態(tài)系統(tǒng)的一部分。

回到基本

我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設(shè)計的網(wǎng)頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學(xué)者。

如果你不知道概念，如模態(tài)和可承受性，你需要讀。你應(yīng)該能夠解釋Fitts的定律是什么。格式塔的鄰近法？這是UI設(shè)計的面包和黃油。

受游戲和電影的啟發(fā)

作為UI設(shè)計師，我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復(fù)雜，UI設(shè)計人員不得不解決與UI設(shè)計師在商業(yè)項目上工作相同的復(fù)雜界面問題。

回到基本

我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設(shè)計的網(wǎng)頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學(xué)者。

如果你不知道概念，如模態(tài)和可承受性，你需要讀。你應(yīng)該能夠解釋Fitts的定律是什么。格式塔的鄰近法？這是UI設(shè)計的面包和黃油。

受游戲和電影的啟發(fā)

作為UI設(shè)計師，我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復(fù)雜，UI設(shè)計人員不得不解決與UI設(shè)計師在商業(yè)項目上工作相同的復(fù)雜界面問題。