1. Balsamiq

如果說要追求一種靜態(tài)手繪文藝風(fēng)格的產(chǎn)品線框圖，Balsamiq絕對是一個優(yōu)秀的選擇。這款工具中所有的組件都是手繪風(fēng)格，相信這種文藝氣息會在設(shè)計師進行界面設(shè)計的時候提供更多的靈感和啟發(fā)。作為安卓界面設(shè)計工具，Balsamiq可以算作是文藝青年的選項之一。

2. Mockplus

Mockplus主要的功能則是針對于簡單快速的設(shè)計交互，然而很多人其實并沒有發(fā)現(xiàn)，Mockplus在線框圖的部分也是支持手繪風(fēng)格的，盡管這樣的風(fēng)格會在交互進行的時候讓整個畫風(fēng)看上去很奇怪。Mokcplus的線框圖設(shè)計還是已清晰的實線為主，它更希望在向開發(fā)人員表達設(shè)計師想法的同時，保持盡可能的簡單和整潔。同時，在項目建立的第一步，用戶就可以根據(jù)自己的需要來選擇手機的模板，這個功能在安卓界面設(shè)計工具可以說是實惠又好用。

3. Adobe XD

原型和線框圖設(shè)計的市場日漸壯大，作為設(shè)計工具行業(yè)中的企業(yè)大佬Adobe已經(jīng)坐不住了。Adobe XD就是他們開始動手的最好證明。你可以向這款工具中導(dǎo)入自己在ps或者其它工具上制作好的圖片，也可以自己創(chuàng)作線框圖。不過Adobe XD的線框圖看上去相對更加簡化，并沒有想Mockplus中類似與“樹”組件之類的復(fù)雜設(shè)計。不過既然是線框圖，表達清楚就好了。

4. Sketch

說到安卓手機界面設(shè)計工具，Sketch是一款不得不提的產(chǎn)品。自從出現(xiàn)在Mac上以來，Sketch迅速的侵略了圖像設(shè)計和線框圖設(shè)計工具的市場。多插件支持的策略使得Sketch在保持自身風(fēng)格的同時兼容并蓄，支持了很多其它工具產(chǎn)品的優(yōu)秀功能。

5. PS

界面設(shè)計的重點之一是圖像的設(shè)計，而在圖像設(shè)計中，PS是你絕對繞不開的話題。因為很多時候，PS已經(jīng)不在是簡單的工具，而是公司錄用你的時候要求你必須具備的技能。不管你對PS的感覺如何，它一定是設(shè)計工具中使用人數(shù)最多的一個，即使是除去使用破解版的人數(shù)。

優(yōu)秀的安卓界面設(shè)計工具遠不止這五項，但是在我看來，這五款產(chǎn)品各具代表性，幾乎可以覆蓋目前所有工具的功能和作用，而且相對簡單實用。那么，你在使用的是哪一個？你覺得哪一個才是你認(rèn)為最好的安卓界面設(shè)計工具？

交互設(shè)計的過程是一個產(chǎn)品從抽象到具象的過程。交互設(shè)計師需要將團隊每個成員，尤其是產(chǎn)品經(jīng)理、項目經(jīng)理腦海中的不可視產(chǎn)品印象，提煉出來，形成一個具體的、可視的產(chǎn)品。因此，完成交互稿的過程就是將大家心目中的印象映射到交互稿中，滿足團隊成員（主要是產(chǎn)品經(jīng)理）對產(chǎn)品的預(yù)期。

因此，在需求討論和交互稿評審與修改的過程中，交互設(shè)計師與團隊成員的溝通，明確產(chǎn)品的特點，并逐漸修改之前的設(shè)計，直至最后完成交互稿等就顯得格為重要。

在溝通需求與完成交互稿的過程中，有以下問題要確認(rèn)并持續(xù)關(guān)注：

一、明確目標(biāo)用戶

談到目標(biāo)用戶，很多人都只是停留在“一類人”上面，而沒有對這“一類人”進行區(qū)別分析，“一類人”中也有主有次，需求也有核心需求與邊緣需求。如果沒有對用戶進行區(qū)別對待，誤將次要目標(biāo)用戶的邊緣需求作為設(shè)計重點，整個產(chǎn)品的設(shè)計就會出現(xiàn)嚴(yán)重的偏差，肯定與產(chǎn)品經(jīng)理的預(yù)期不符。

目標(biāo)用戶是我們對所有用戶的統(tǒng)稱，目標(biāo)用戶中又可以細(xì)分為不同的角色，不同的角色所具有的權(quán)限、所關(guān)注的頁面重點元素是不一樣的。例如，對于一個移動應(yīng)用APP的運營數(shù)據(jù)的展示，就會出現(xiàn)不同角色目標(biāo)用戶，可細(xì)分為運營人員、開發(fā)人員、管理層等等。不同的角色關(guān)注點也是不一樣的，運營人員關(guān)注的是每一天的數(shù)據(jù)以及活動對APP的用戶增長、活躍度的影響等等；開發(fā)人員更多的關(guān)注是產(chǎn)品的性能，以及用戶的體驗等等；而管理層會更多的關(guān)注用戶總量，效益等等。因此，在設(shè)計產(chǎn)品頁面時，要兼顧到所有的用戶，滿足不同角色的需求，但要以主要用戶為主。若出現(xiàn)嚴(yán)重的沖突時，設(shè)計要偏向于產(chǎn)品的主要用戶。

明確目標(biāo)用戶的目的在于確定目標(biāo)用戶的不同角色，以及他們所關(guān)注的信息重點，進一步明確主要的目標(biāo)用戶與次要用戶。真正剝離出主要用戶的核心需求，聚焦主要用戶的需求痛點，并進行設(shè)計，才能完成真正符合用戶需求的產(chǎn)品設(shè)計。

另外，明確目標(biāo)用戶，還可以獲得其他方面的輔助信息。例如，目標(biāo)用戶的身體特征、心理期望、所使用的設(shè)備參數(shù)等等，用好這些信息，也能完成有亮點的交互設(shè)計。

二、使用場景

產(chǎn)品的使用場景對產(chǎn)品的交互方式有很大的影響。細(xì)化產(chǎn)品的使用場景能夠在特殊環(huán)境下給用戶極致的用戶體驗。這方面大家都知道的案例，是網(wǎng)易云音樂的跑步FM模式。雖然網(wǎng)易云音樂是音樂應(yīng)用的較晚入局者，但是其憑借跑步FM模式圈了眾多擁躉，引來其他音樂應(yīng)用紛紛效仿。

跑步FM（來源網(wǎng)絡(luò)）

使用場景是用戶體驗產(chǎn)品的重要因素。對于同一個需求，在不同的場景下有不同的解決方案。

三、 業(yè)務(wù)邏輯

在這個人人都是產(chǎn)品經(jīng)理的年代，交互設(shè)計也是很多人都能做的。但是，能做不代表能夠做好。對于產(chǎn)品經(jīng)理提出的需求，最佳的解決方案就呈現(xiàn)在用戶對產(chǎn)品的操作過程中，即產(chǎn)品的業(yè)務(wù)邏輯。

業(yè)務(wù)邏輯，簡單來說就是在怎么做事（how to do）。比如你想買一件衣服，從搜索、到確定付款、再到售后服務(wù)，在整個目標(biāo)活動下的整個動作流程，可以說是業(yè)務(wù)邏輯。

理清業(yè)務(wù)邏輯有助于實事求是的整理出產(chǎn)品的功能流程，避免陷入先入為主以及自以為的誤區(qū)。俗話說，隔行如隔山。對于不同的行業(yè)，其所具有的行業(yè)規(guī)則、術(shù)語、硬件設(shè)備信息、技術(shù)實現(xiàn)邏輯等都是不同的。充分了解產(chǎn)品的業(yè)務(wù)邏輯，不僅僅能夠更好的理解產(chǎn)品背后的需求，同時能夠更好的與團隊成員、甚至是甲方更好的溝通，也能更好的完成交互設(shè)計。

四、頁面重點元素

一個頁面往往面對成千上萬的用戶，所以會有很多頁面元素以及功能入口。但是，一位用戶打開一個頁面，卻往往只關(guān)注頁面中的一個功能，或者一小塊區(qū)域，即頁面重點元素（重點功能）。在多數(shù)情況下，用戶進入一個頁面是奔著一個目標(biāo)。因此，明確頁面的重點元素（重點功能），將其作為頁面交互設(shè)計的著重表達，突出重點元素，弱化次要元素，使頁面元素布局詳略得當(dāng)，能夠更好的滿足用戶的需求，提高產(chǎn)品的用戶體驗。

頁面重點元素，是在與產(chǎn)品經(jīng)理溝通與對業(yè)務(wù)需求詳盡了解之后確定的。在制作交互稿之前，需要完成信息架構(gòu)與功能流程，功能流程中所涉及的功能就是頁面的重點元素。或者，詢問產(chǎn)品經(jīng)理，這個頁面是干什么用的。通常情況下，產(chǎn)品經(jīng)理只會說出一個功能，即重點元素。

如圖，個人信息、賬單預(yù)覽以及安全信息是頁面的重點元素，因此在頁面布局上進行了特異處理，與下面的已開通服務(wù)列表形成視覺上重點與次要元素的對比，包括增大元素面積、圖形化處理、色彩特異處理等。

五、 數(shù)據(jù)量

數(shù)據(jù)量是頁面中變動量最大的元素。不同的數(shù)據(jù)量對頁面的顯示、功能、布局都有很大的影響。當(dāng)數(shù)據(jù)為空時，頁面就是特殊頁面，需要考慮是頁面錯誤，還是數(shù)據(jù)為零，并針對不同的情況進行恰當(dāng)?shù)奶崾荆划?dāng)頁面數(shù)據(jù)量過少時，要考慮頁面太空的視覺影響；當(dāng)頁面數(shù)據(jù)量太多時，要考慮分頁、篩選、搜索等功能的添加，以滿足用戶查看數(shù)據(jù)的需求。

如圖，數(shù)據(jù)量的多少在頁面設(shè)計上的差異：

以上所講述的交互設(shè)計過程中的相關(guān)問題，都會最終影響到產(chǎn)品最后上線后的效果。因此，設(shè)計人員對于設(shè)計過程中的問題不斷考量，就可以盡最大努力將問題在開發(fā)之前就解決掉。

交互設(shè)計的工作是構(gòu)建一個和諧、高效、統(tǒng)一的產(chǎn)品體系，所有的思考、設(shè)計都應(yīng)該以提高整個產(chǎn)品體系的用戶體驗為前提。因此，認(rèn)真對待交互設(shè)計過程中的每一個設(shè)計環(huán)節(jié)、每一個問題，是提高交互稿質(zhì)量的基石。過程中的問題很多，需要我們持續(xù)關(guān)注并解決。

我們從一個簡單的問題開始：我們用戶的主要目標(biāo)是什么？為什么他們使用我們的應(yīng)用程序？（例如：Whatsapp的目的是將用戶與他們的朋友連接起來。）用戶為了實現(xiàn)自己的目標(biāo)，他們通常需要完成一些額外的、無關(guān)的任務(wù)（這里指新手引導(dǎo)），甚至?xí)?dǎo)致我們遠離真正的目標(biāo)。所以，這些入門步驟應(yīng)限制在最低限度以內(nèi)。

2. 創(chuàng)建旅客地圖

接下來是創(chuàng)建一個用戶實現(xiàn)目標(biāo)必須采取的路徑。這里要專注于“首次打開應(yīng)用”、“創(chuàng)建配置文件”或“選擇您的第一個聯(lián)系人”等關(guān)鍵時刻，以及最后一步且是最重要的一步——用戶實現(xiàn)其目標(biāo)的時刻。

樂高的飛行體驗路徑

Jessica Tien的手機采購體驗路徑

3. 剔除無用的內(nèi)容

每個步驟，都應(yīng)將用戶的輸入成本降至最低，并詳細(xì)解釋為什么需要那些必填信息。除此以外其他一切內(nèi)容都應(yīng)該可以在之后展現(xiàn)。在這一步中，我們只應(yīng)關(guān)注用戶目標(biāo)，只要用戶完成入門就能返回到應(yīng)用程序。用戶的目標(biāo)不是在其個人資料中添加頭像，或填寫其位置或創(chuàng)建個人資料等等。

盡可能晚一些讓用戶創(chuàng)建賬戶，注冊通常只是為了能將我們已有的數(shù)據(jù)鏈接到配置文件，并使其在各種設(shè)備中同步使用。但是為什么用戶需要創(chuàng)建一個空白的帳戶呢？（一開始本身就沒有數(shù)據(jù)不需要配置不需要同步）

Appear.in 允許用戶直接進入視頻通話，沒有任何障礙（如不得不注冊或選擇一個名稱）

頭像、位置、身高等詳細(xì)信息在新手入門時并不重要。也許這些信息可能是有用的，但在用戶初次使用時它們沒有必要占據(jù)一個重要任務(wù)環(huán)節(jié)。

4. 逐一介紹功能

大多數(shù)時候用戶專注于一個功能，但如果我們想要介紹更多功能該怎么辦？讓我們來看看Medium應(yīng)用：我們的主要目標(biāo)是閱讀文章，但另一方面Medium也允許我們?nèi)プ珜懳恼?，我們不想向僅對消費內(nèi)容感興趣的用戶解釋如何撰寫文章。在這種情況下，我們應(yīng)該創(chuàng)建一個應(yīng)用規(guī)則——定義出我們正在面對的用戶對象，并給出恰當(dāng)?shù)闹甘尽?/p>

Medium只有在您嘗試撰寫文章時才會介紹書寫功能。

Youtube僅在專用標(biāo)簽中引入直播流功能。

5. 提供交互性

我看到過太多的新手入門完全脫離應(yīng)用程序本身的案例。靜態(tài)文本是介紹功能和解釋我們應(yīng)用規(guī)則最不吸引人的方式。相反，我們要嘗試?yán)脩?yīng)用程序的機制本身，使用已設(shè)計好的界面解決方案會是一個好方法。

Slack使用其機器人功能來介紹應(yīng)用功能并自動填入個人信息。

Trello以簡單的方式使用卡片介紹功能

6. 解釋你為何需要它

沒有人喜歡浪費時間填寫長表單和閱讀入門指示，不幸的是，在某些情況下這些是不可避免的。為了緩解用戶的抵觸情緒，我們需要讓用戶知道哪些明確信息是必填的，一個好的解釋將能夠降低用戶直接關(guān)閉該應(yīng)用程序的可能性。

GetResponse清楚地展示了輸入的文本是用于什么。

Apple有清楚的信息告知用戶為什么生日信息是重要的。

7. 允許用戶直接體驗

不要強迫任何東西，有些用戶喜歡自己探索，應(yīng)確?？偸怯幸粋€“跳過”按鈕可見。這樣能讓探索型用戶玩得開心，同時也有助于已經(jīng)知道此應(yīng)用程序的用戶直接進入使用界面。

8. 為不同目標(biāo)的用戶量身定制新手入門

這一步是游戲設(shè)計師所熟知的，某些功能專屬于高級用戶，應(yīng)該只展示給他們（這并不意味著它們不能被其他所有人使用）。因此，用戶將有一個不太陡峭的、更長的學(xué)習(xí)曲線，不會受可選展示的內(nèi)容影響。

Evernote通過簡單地詢問用戶來識別用戶目標(biāo)。

9. 利用空白頁面

如果應(yīng)用程序以空白的方式開始，可以嘗試使用它來幫助用戶了解你的工具。一個好的建議是展示受大眾用戶歡迎的內(nèi)容或創(chuàng)建一些樣本數(shù)據(jù)。

10. 與用戶1對1地對話

最后但并非最不重要的：與您的用戶談話！經(jīng)常談話。沒有比1對1對話更好的信息來源方式。你會驚訝于他們?nèi)绾问褂媚愕膽?yīng)用程序，以及在應(yīng)用程序中他們的問題有多么不同。

總結(jié)

做新手入門是一件困難且微妙的事情，請花點時間嘗試我文章中描述的原則，并確?？紤]用戶。你發(fā)現(xiàn)的很多問題也許難以解決，但是可以繼續(xù)努力獲得更好的產(chǎn)品體驗！迭代中修復(fù)問題是每個設(shè)計過程的必經(jīng)環(huán)節(jié)。每一個階段你都會看到改進，這是我們做產(chǎn)品最大的動機。

“最近不少小伙伴來問我，怎么讓自己的作品有『全棧設(shè)計感』？老實說，這個問題比較大，需要從『全棧設(shè)計』或『UXD用戶體驗設(shè)計』的概念說起。

可概念的解釋容易枯燥，所以在這里，我先分享8個實用的基礎(chǔ)思路。希望小伙伴們能思考一下，我們在日常設(shè)計中很常見又容易被忽略的問題?！?/p>

1、色彩舒適度

我們都說“一見鐘情”，人眼首先看到的，是事物的顏色，其次才是形狀。所以，“色彩舒適度”決定了作品是否能在第一時間吸引用戶，我們需要避免：

• 雜七雜八/亂糟糟的色彩
• 顏色沒有主次之分
• 沒有視覺舒適度的飽和度
• 明暗度不搭調(diào)等

2、文字的主次

先問自己，你要通過作品傳達的主要信息和思想是什么？無論你的設(shè)計是酷炫復(fù)雜，還是簡潔清爽，只展現(xiàn)信息遠遠不夠——文字的主次，決定了你要傳達的信息的主次。所以，我們要避免：

• 字體混亂
• 文字大小、文字粗細(xì)、間距行距缺乏“主次邏輯”

3、信息可讀性

有了文字基礎(chǔ)，你需要處理好每個模塊的布局、色塊、插圖、背景等元素，讓你的信息有較強的可讀性。

別被你個人的愛好牽著走：我喜歡酷炫，我喜歡簡潔，我喜歡優(yōu)雅，我喜歡逗逼……如果你的作品連最基本的信息都沒法傳達，那任何風(fēng)格都只是口頭吹噓。

4、UI識別性

這一點在圖標(biāo)上“味道”非常濃，不論你設(shè)計的是扁平化、擬物化還是梵高風(fēng)格，不一定非要讓用戶在3秒內(nèi)看出圖標(biāo)的意思，但一定要讓用戶在欣賞這個圖標(biāo)美感的同時，“心里知道”這個圖標(biāo)要傳達的是什么。

一個網(wǎng)站banner的設(shè)計，一個頁面的導(dǎo)航設(shè)計，也要考慮UI識別性。多問問自己：

·你想傳達的圖像內(nèi)涵是什么？

·你設(shè)計圖形的意圖是什么？

5、交互性與用戶體驗

當(dāng)你的作品基本符合以上4個要求時，就要解決如何使用的問題了。不論是網(wǎng)站設(shè)計、APP設(shè)計或者游戲設(shè)計，都要讓用戶快速上手，能玩、能用，甚至用得簡單、玩得簡單。

這樣，無論你創(chuàng)作出了銀河系都沒有的酷炫交互，還是借鑒了地球上瀕臨滅絕的土逼設(shè)計，只要你的作品能夠達到“方便好用”的優(yōu)良品質(zhì)，就能讓用戶High起來。

6、思想、生活的傳達

“人如其畫”，你對工作和感情的態(tài)度什么樣，你的作品就是什么樣。千萬別小看一個作品的力量，它是傳達你真實自我的一個媒介。

所以說，在設(shè)計中融入你的思想和生活，說難，也容易。多想想：

·你是否把你最粗心最讓人厭倦的一面暴露到作品中？

·你是否把你最細(xì)致最耐人尋味的一面?zhèn)鬟_給了用戶？

7、微小的細(xì)節(jié)和微小的創(chuàng)意

“看入眼中，深入骨髓”，能戳中用戶的設(shè)計，一定是把細(xì)節(jié)做到了極致。這些細(xì)節(jié)包括并不限于：

·一段線條

·一個小漸變

·一個字體的選擇

·一塊畫布的大小

·色彩飽和度的細(xì)微差別等

這些小細(xì)節(jié)，雖然不是人人都能說得出，但每個用戶都能感覺到；它能讓你登上人生巔峰，也可能讓你萬劫不復(fù)。

此外，打磨細(xì)節(jié)的時候，你會誕生一些微小的創(chuàng)意；小創(chuàng)意創(chuàng)造大創(chuàng)意。

8、生活中表現(xiàn)手法的引用

想想我們生活中習(xí)以為常的視覺體驗，我們能從中獲得哪些啟發(fā)？

• 一個簡單的視差
• 一個簡單的墜落
• 一個簡單的玻璃破碎
• 一個簡單的樹葉飄落
• 一張紙簡單的角度擺設(shè)
• 一盆植物簡單的遠近拍攝……

引用生活中的表現(xiàn)手法，說起來簡單，做起來最難。這個世界上有天才設(shè)計師，不費吹灰之力就可以“顛倒眾生”；但更多的，是我們這些喜歡設(shè)計癡迷設(shè)計的人，一點點積攢經(jīng)驗值、一步步闖關(guān)打怪，直到做出自己第一套滿意的代表作。

“其實，打造作品的『全棧設(shè)計感』，前提還是需要我們對設(shè)計有正確的理解和實踐。否則，一味追求天花亂墜的概念或創(chuàng)意，很容易讓我們走偏，甚至走失。

我們也看到，最近一年，擁有‘UI+交互+用戶體驗+跨界設(shè)計’綜合能力的設(shè)計師，開始代表整個行業(yè)，成為高薪高福利的明星。

無論其稱呼是『全棧設(shè)計師』，還是『UXD用戶體驗設(shè)計師』，追本溯源，都需要我們從最基本的設(shè)計理念開始，用心學(xué)習(xí)、盡情探索。”