設計 – 小狗情人 http://www.xmelon.cn HEDU寵物日志 Fri, 21 Apr 2017 07:24:37 +0000 zh-CN hourly 1 https://wordpress.org/?v=5.9.10 http://www.xmelon.cn/wp-content/uploads/2022/01/hdlogo-2.png 設計 – 小狗情人 http://www.xmelon.cn 32 32 5款最好的安卓界面設計工具推薦 http://www.xmelon.cn/xgyl/2017/04/21/216.html Fri, 21 Apr 2017 07:24:37 +0000 http://demo.wpcom.cn/justnews/?p=216 蘋果手機最近幾年市場占有的份額急速的增加,但是安卓手機仍然是大多數(shù)品牌手機系統(tǒng)的首選。每款產(chǎn)品的安卓手機界面設計,也是這款產(chǎn)品設計的重中之重。其實,手機的界面設計,在線框圖設計之時就已經(jīng)決定了。那么,現(xiàn)在市場上有哪些值得關(guān)注的手機界面線框圖設計工具呢?

1. Balsamiq

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

2. Mockplus

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

3. Adobe XD

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

4. Sketch

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

5. PS

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

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

]]>
在交互設計過程中,你需要持續(xù)關(guān)注的五個問題 http://www.xmelon.cn/xgyl/2017/04/18/200.html Tue, 18 Apr 2017 06:54:48 +0000 http://demo.wpcom.cn/justnews/?p=200 在從事交互設計工作的時候,我們心中總是會有類似于這樣的疑問,比如說:工作從哪里開始;在過程中要注意哪些問題;針對過程中的問題,應該如何解決;最終的交互設計成果,應該以什么樣的形式展現(xiàn)等。

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

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

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

9o2FkeiUtiDQyWkbVUcs

一、明確目標用戶

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

PCMNwVB1xmlTTVZyyht5

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

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

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

二、使用場景

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

CbjbSyOGHmPZ9xbo5Es3

跑步FM(來源網(wǎng)絡)

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

三、 業(yè)務邏輯

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

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

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

四、頁面重點元素

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

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

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

5YG4fWudNeypo2xWjOJK

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

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

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

zADMxlsasPBFXAq5bcz2

M1HQApitJBIv5B4ckjrv

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

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

]]>
10個步驟,了解新手入門過程的設計原則 http://www.xmelon.cn/xgyl/2017/04/17/160.html Mon, 17 Apr 2017 14:54:20 +0000 http://demo.wpcom.cn/justnews/?p=160 1. 關(guān)注用戶目標

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

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

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

樂高的飛行體驗路徑

Jessica Tien的手機采購體驗路徑

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

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

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

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

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

4. 逐一介紹功能

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

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

Youtube僅在專用標簽中引入直播流功能。

5. 提供交互性

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

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

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

6. 解釋你為何需要它

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

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

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

7. 允許用戶直接體驗

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

8. 為不同目標的用戶量身定制新手入門

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

Evernote通過簡單地詢問用戶來識別用戶目標。

9. 利用空白頁面


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

10. 與用戶1對1地對話

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

總結(jié)

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

]]>