ui設(shè)計流程有哪些

　　最近總是收到同學(xué)們問UI設(shè)計流程有哪些?針對這問題我找了已經(jīng)在AAA教育畢業(yè)的師哥師姐詳盡的了解了一下，以典型項目入手，詳細的和同學(xué)們分析一下UI設(shè)計流程，方法和工具，希望同學(xué)們喜歡。
 

一、收集規(guī)格和要求
 

　　盡管許多經(jīng)驗不足的設(shè)計師經(jīng)常忽略它，但這也許是整個工作中最重要的方面。這個階段幾乎對項目起著成敗的作用。范圍清晰且定義明確通?？梢源_保流程順暢，并使您作為項目經(jīng)理可以知道您與客戶位于同一頁面上。在您的首次啟動會議上，我會問所有關(guān)于產(chǎn)品功能，流量，目標(biāo)人群，競爭等的問題。
 

　　作為UI設(shè)計師，您可能會認為您唯一關(guān)心的是最終產(chǎn)品的設(shè)計，這對于某些專門的設(shè)計角色可能是正確的。個人很想將自己視為設(shè)計顧問和項目經(jīng)理。我認為，我的角色需要理解業(yè)務(wù)目標(biāo)并調(diào)整我的設(shè)計專業(yè)知識，以在給定的時間范圍和預(yù)算內(nèi)推動實現(xiàn)這些目標(biāo)。
 

　　這一步顯然需要大量的溝通與客戶。對我來說，它通常涉及許多頭腦風(fēng)暴會議，Skype小組電話，素描想法等。此階段的交付品是一個簡單的PDF“ MVP概述”，概述了應(yīng)用程序/產(chǎn)品的規(guī)格并記錄了所有頭腦風(fēng)暴的發(fā)現(xiàn)和草圖。

　　構(gòu)思草圖樣本


　　MVP預(yù)覽樣本

二、奠定基礎(chǔ)
 

　　一千英里的旅程始于一步，這是我最喜歡的過程之一!一旦明確了項目將涉及的內(nèi)容，現(xiàn)在就該使用一些不錯的舊式生產(chǎn)力技巧，并將更大的目標(biāo)分解為更小的任務(wù)。為此，我喜歡使用Trello。如果您像我一樣是個人發(fā)展和生產(chǎn)力的怪胎，那么您將愛上這個階段!
 

　　在開始使用Trello進行任務(wù)管理之前，我總是要確保打開我的時間跟蹤軟件。我絕對喜歡為此使用Toggl!

　　這滿足了我對數(shù)據(jù)分析的渴望!這對我來說非常重要 ，因為它有兩個作用：
 

　　正確，準(zhǔn)確地向客戶收費，適當(dāng)分配時間，例如，如果我要引用一個Web項目的15個收費小時，我當(dāng)然不想花10個小時在市場研究上，而要用盡時間或更糟(可以說)，不得不著急并提供低質(zhì)量的工作。
 

　　現(xiàn)在，進入Trello。當(dāng)我作為UI / UX設(shè)計師使用Trello進行任務(wù)管理和任務(wù)分配。借助基于卡的系統(tǒng)，它使我們的團隊能夠使用類似于SCRUM的管理流程，從而實現(xiàn)快速生產(chǎn)和幾乎即時的反饋。

三、研究與最佳做法
 

　　這個階段非常簡單。這里的目標(biāo)如下：
 

　　研究具有相似功能和目標(biāo)用戶的產(chǎn)品
 

　　確定潛在競爭對手，他們在做錯/正確的事情?
 

　　建立最佳實踐

　　根據(jù)一般經(jīng)驗，我會嘗試花費盡可能多的時間瀏覽各大手機商店如App Store，下載并嘗試各種應(yīng)用程序。這不僅使我與行業(yè)趨勢和流行趨勢保持了聯(lián)系，而且還使人們對通用做法，有效的方法和無效的方法等具有批判性的眼光。
 

　　免費的用戶反饋?是的，請!
 

　　但是，如果您沒有時間像我一樣整日(應(yīng)該是)用戶測試Pokemon Go，我仍然強烈建議您瀏覽應(yīng)用商店中與您正在使用的產(chǎn)品類似的產(chǎn)品。這會給你一個不錯的想法和建議，避免不必要的設(shè)計，你甚至可以檢出的用戶反饋，以確保您不會重蹈覆轍。
 

　　由于別人的過失，明智的人會自己糾正，一旦您終于準(zhǔn)備好拿起筆和紙開始素描，就不要了!盡管您可能有開始實施的渴望，但了解實現(xiàn)功能的最佳方法是什么(尤其是為什么)是非常重要的。
 

　　為此，UI模式是最好的!
 

　　通過不僅列出解決常見設(shè)計問題的不同方法，而且合理化如何，何時以及為什么應(yīng)使用此類解決方案，目的是創(chuàng)建一個工具，以幫助結(jié)束功能辯論，從而清楚地了解我們?yōu)槭裁?，正在做我們正在做的事情，以及為什么我們不做我們未做的事情?mdash; UI模式

　　好的，您現(xiàn)在終于可以開始草繪和制作原型了。讓我們進入下一個階段!
 

四、低保真原型(UX)
 

　　雖然沒有什么比筆和紙的草圖，也有很多你可以用它來開發(fā)你的低保真線框的產(chǎn)品除了給你的草圖。
 

　　筆和紙素描樣
 

　　您可以選擇以下幾種：
 

　　視覺雜亂無章，的Photoshop，UXPin，　當(dāng)然有很多不同的。除了Photoshop，我還親自使用過InVision，Omnigraffle和Balsamiq。
 

　　不同的服務(wù)使您可以根據(jù)自己的目標(biāo)完成不同的事情。我喜歡InVision，因為它是免費的，具有可單擊的原型，您可以將其導(dǎo)出并在移動設(shè)備上查看，并且它允許用戶向原型添加注釋和反饋，這使其成為遠程協(xié)作的出色工具。試試看，找出最適合您自己需求的。
 

　　
Balsamiq線框

　　Photoshop低保真線框

　　InVision可點擊的原型
 

五、高保真原型(UI)
 

　　到漂亮的東西!如果你是一個可視化設(shè)計器在心臟多了一個產(chǎn)品設(shè)計師，你知道這是你一直在等待這整個時間的時刻......但在此之前，我們需要得到一些靈感!我保證很快就會用Photoshop / Sketch弄濕了。
 

　　對于視覺靈感而言，經(jīng)典作品始終是個不錯的選擇。Behance和Dribbble展示了來自世界頂級設(shè)計師的一些真正令人驚嘆的作品。這些藝術(shù)家通常會擴展可用性的界限，以制作UI杰作。我們已經(jīng)完成了可用性研究，因此我們不必擔(dān)心會受到我們無法實現(xiàn)的啟發(fā)。

運球
 

行為


 

　　如果您在特定屏幕上有一個創(chuàng)意塊，并且需要有關(guān)如何處理移動應(yīng)用程序中特定情況的特定指導(dǎo)，我也強烈建議您使用移動模式。這個很棒的網(wǎng)站提供了一些用于特定類型屏幕的，最常用的應(yīng)用程序(Facebook，Twitter，Instagram等)中良好UI的示例。
 

　　Mobile Patterns真正酷的地方是，屏幕是根據(jù)屏幕類型的層次結(jié)構(gòu)聚合的。這意味著您只能查找Newsfeed屏幕，并在制作應(yīng)用程序之前分析各種應(yīng)用程序設(shè)計師如何處理Newsfeed屏幕。
 

　　世界上最大的房間就是改善的空間
 

　　我希望您喜歡深入了解我的流程和工作流程。這是并且將永遠是正在進行的工作。您的工作流程/流程越完善，您將能夠向其提供高質(zhì)量工作的客戶越多。您還可以將更多的精力放在工作的創(chuàng)造性方面，而不會忽略產(chǎn)品的基本業(yè)務(wù)和可用性方面。
 

　　如果您對工作流程，使用的工具以及可幫助您克服創(chuàng)造性障礙的過程有任何疑問或故事，請在評論中與他們分享，我很想聽聽您的想法!