來(lái)源:呆總丶 發(fā)布時(shí)間:2018-12-28 11:52:33 閱讀量:1006
很長(zhǎng)時(shí)間沒(méi)有在站酷發(fā)表文章了,希望這份早期經(jīng)驗(yàn)之談能給各位一點(diǎn)幫助。
一、精心設(shè)計(jì)應(yīng)用的目標(biāo)
1.要為用戶用戶解決的問(wèn)題
這個(gè)應(yīng)用與眾不同地為用戶解決了什么問(wèn)題?用戶為什么要使用這個(gè)產(chǎn)品?
2.移動(dòng)應(yīng)用和計(jì)算機(jī)的區(qū)別
移動(dòng)應(yīng)用是幫助用戶去完成計(jì)算機(jī)力所不能及的事情。
3.本書(shū)的五要素
人物:框定了應(yīng)用的受眾;
事件:框定了受眾會(huì)做的事情;
時(shí)間、地點(diǎn):講清了情境如何;
起因:描述了受眾的動(dòng)機(jī)和目的;
4.移動(dòng)用戶的三種心態(tài)
(1、我有個(gè)微任務(wù)要做
移動(dòng)應(yīng)用的使用場(chǎng)景跟計(jì)算機(jī)是有區(qū)別的,因此用戶在使用移動(dòng)應(yīng)用時(shí),更適合于使用短時(shí)間就能完成的任務(wù),或是短時(shí)間就能輕松娛樂(lè)的游戲等等;在這樣的應(yīng)用中,首要任務(wù)就是優(yōu)化設(shè)計(jì)和操作流程,加速任務(wù)完成,簡(jiǎn)化任務(wù)難度。
其實(shí)這里還可以包括打車應(yīng)用,比如滴滴、Uber等APP,都是移動(dòng)應(yīng)用中區(qū)別于計(jì)算機(jī)的APP。這些APP是計(jì)算機(jī)沒(méi)辦法做到的,總不可能拿著一臺(tái)電腦去定位打車吧?這種事情我是沒(méi)法想象的。
(2、我想看看附近的情況
利用iPhone等手機(jī)的傳感器,來(lái)幫助用戶在PC端不能完成的事情。例如微信查看附近的人,或者搖一搖,腦補(bǔ)下電腦有了定位功能后,然后拿著電腦在甩的畫(huà)面(真是無(wú)法想象)。
(3、我有些無(wú)聊
用戶會(huì)利用休閑時(shí)間來(lái)玩游戲或一些娛樂(lè)應(yīng)用以便來(lái)打發(fā),這時(shí)候就要研究用戶需要的功能,如何讓用戶在無(wú)聊的時(shí)候能夠?qū)δ愕漠a(chǎn)品有興趣去探索。
在我們使用游戲或娛樂(lè)類的APP時(shí),經(jīng)常會(huì)遇到一些問(wèn)題,就是時(shí)間。有時(shí)候其實(shí)就是等公交、等外賣等等等等等...就是想玩一把輕松又不費(fèi)腦的小游戲放松下,或者是刷下微博看下朋友圈。而這些都是用戶樂(lè)于去使用的,因?yàn)樗鼈兒?jiǎn)單且花費(fèi)的時(shí)間短。
有時(shí)候用戶就是這么無(wú)聊,然而就這種無(wú)聊的心態(tài),也是一種學(xué)問(wèn)(就像我之前說(shuō)的,做人真煩)。
5.理清方向
友好易用的用戶體驗(yàn)要設(shè)計(jì)師合理斟酌每一條觸動(dòng)人心的功能點(diǎn);并在設(shè)計(jì)過(guò)程中要想得多,做得少。意為功能可以列出很多,但是真正用上的卻很少。而且要挑選大部分用戶大多數(shù)時(shí)間都會(huì)使用的功能,摒棄小眾群體的邊緣需求。
在我們平時(shí)的產(chǎn)品迭代工作中,產(chǎn)品經(jīng)理收到商戶的需求總是一股腦的就扔過(guò)來(lái),我有時(shí)候真是想說(shuō):你特么,真帥(其實(shí)我怕)。
6.iPhone應(yīng)用相比H5頁(yè)面的優(yōu)勢(shì)
其實(shí)這塊書(shū)上說(shuō)的是在手機(jī)瀏覽器里面瀏覽網(wǎng)頁(yè)與APP做比較,但是我因?yàn)閭€(gè)人的工作原因,所以把這里替換成H5,修改了一點(diǎn)內(nèi)容,畢竟書(shū)看來(lái)是給自己用的嘛~哈哈哈。
(1.高效
同樣是移動(dòng)端展示,App的速度要比H5要快上很多,方便用戶去使用。
(其實(shí)這里不能以偏概全,有時(shí)候H5界面反而會(huì)更方便,這里只能說(shuō)相比于H5界面,App的使用在多功能的目的性下確實(shí)會(huì)...會(huì)怎么樣呢?自己去YY)
(2.更好的展示
雖然內(nèi)容可以完全一致,但是在展示上,App可以使用更多的空間來(lái)更好的展示,這是H5界面不具備的,優(yōu)美且動(dòng)感。
(3.本地緩存
很多新聞?lì)惢驎?shū)籍類的應(yīng)用,可以在手機(jī)上緩存或下載,以備在沒(méi)網(wǎng)絡(luò)的狀態(tài)下閱讀。但是H5界面需要實(shí)時(shí)利用網(wǎng)絡(luò)來(lái)瀏覽,這方面會(huì)對(duì)在動(dòng)車上或地鐵上的用戶帶來(lái)不便。畢竟出門沒(méi)流量,誰(shuí)會(huì)去下載一些文章或音樂(lè)。
7.總結(jié)
1.利用“五要素”,發(fā)掘應(yīng)用觸動(dòng)人心的先決條件;
2.使用移動(dòng)設(shè)備要考慮三種移動(dòng)用戶的心態(tài);
3.不斷更新內(nèi)容和打造社區(qū);
4.想得多,做的精,提倡夠用就好的思想;
5.做網(wǎng)站的附屬應(yīng)用時(shí),要考慮在原有的基礎(chǔ)上做改進(jìn),而不是照搬。
二、為尺寸和觸摸設(shè)計(jì)
1.尺寸與觸摸
在設(shè)計(jì)過(guò)程中,iPhone在4的時(shí)代里,44像素是標(biāo)準(zhǔn)的控件尺寸,但是發(fā)展到5和6的時(shí)候,兩倍像素更符合當(dāng)下的設(shè)計(jì),所以88會(huì)成為更標(biāo)準(zhǔn)的尺寸;但是在正常情況下,我已經(jīng)看到很多人直接用100像素來(lái)設(shè)計(jì),也很合適。
在設(shè)計(jì)的過(guò)程中,不要讓界面顯得太擁擠,標(biāo)簽欄最多放下5個(gè)Icon,是為了避免用戶有誤操作,從而產(chǎn)生挫敗感。就好像我們平時(shí)使用的App,其實(shí)5個(gè)也是很少見(jiàn),大多數(shù)情況下都是四個(gè),比如支付寶、微信、QQ等。
2.優(yōu)秀的iPhone應(yīng)用,包含以下特點(diǎn)(總結(jié))
· 將重要信息放在頂部,重要操作放在底部;
· 基于一倍尺寸下的44像素的設(shè)計(jì)韻律來(lái)設(shè)計(jì);
· 屏幕盡量不要有滾動(dòng),在一屏之內(nèi)展示完(一般適用于實(shí)用工具類軟件);
· 不要在屏幕上擺放太多的元素
· 應(yīng)用盡量要簡(jiǎn)單,將高級(jí)工具隱藏;
三、導(dǎo)航模型
1.iPhone 的三種導(dǎo)航模式
(1.平鋪?lái)?yè)面:類似于卡片翻轉(zhuǎn)頁(yè)面,它沒(méi)有信息層級(jí),也沒(méi)有組織結(jié)構(gòu);
· 在平鋪?lái)?yè)面中,可以用單頁(yè)面前后翻轉(zhuǎn)的形式定義一種交互,即前面是展示,點(diǎn)擊之后翻轉(zhuǎn)到背面用來(lái)設(shè)置;
· 平鋪模式能更好的讓頁(yè)面進(jìn)行編輯,如果頁(yè)面數(shù)量隨時(shí)都會(huì)變化,且當(dāng)中的導(dǎo)航和順序都固定,那么平鋪非常實(shí)用;
· 在平鋪?lái)?yè)面中,更加不能使用屏幕滾動(dòng);
—— 平鋪?lái)?yè)面的分頁(yè)控件,也就是小圓點(diǎn),在頁(yè)面數(shù)量非常多的情況下,要如何展示?因此需要控制數(shù)量。
—— 頁(yè)面非常多的情況還有出現(xiàn)的一個(gè)問(wèn)題,即如何快速跳轉(zhuǎn)至想要去的頁(yè)面?點(diǎn)擊編輯按鈕,將頁(yè)面縮小去瀏覽。
(2.標(biāo)簽欄:在屏幕底部有幾個(gè)按鈕控件用來(lái)點(diǎn)擊,現(xiàn)在的大部分App都會(huì)有這個(gè)欄,這塊前面已經(jīng)說(shuō)到過(guò)。
· 一次點(diǎn)擊就可到達(dá)想要去的界面;
· 清晰表現(xiàn)目前所在頁(yè)面的功能;
——標(biāo)簽欄的功能不能超過(guò)5個(gè),否則會(huì)顯示為更多,增加了用戶的認(rèn)知負(fù)擔(dān);
(3.樹(shù)形結(jié)構(gòu):有明顯的層級(jí)關(guān)系;
· 對(duì)大量的功能和項(xiàng)目能很好的劃分;
· 對(duì)用戶來(lái)說(shuō)容易理解;
· 在交互上而言,直觀且舒適;
——如果要回到主功能,而現(xiàn)在處于子子子...功能,就要連續(xù)返回,操作上不直觀;不過(guò)對(duì)于微信來(lái)說(shuō),層級(jí)比較淺,就還好。
2.總結(jié)
1.遵循普通原則,有時(shí)候別人看起來(lái)不一定就很普通;
2.理解三種模式的優(yōu)缺點(diǎn),進(jìn)行相應(yīng)的選擇或組合使用;
3.在動(dòng)手之前,先在板上或紙上畫(huà)出流程草圖,暫時(shí)先別考慮細(xì)節(jié),而是考慮大局;
4.原型丑點(diǎn)沒(méi)關(guān)系,只要能理清思路就行。
四、iPhone的標(biāo)準(zhǔn)控件
1.導(dǎo)航欄
導(dǎo)航欄的左邊唯一只能放后退或返回按鈕,其他一律禁止(此為用戶習(xí)慣);
注意:導(dǎo)航功能必須清晰,不要放多余的控件,保持干凈;
兩種特殊導(dǎo)航:
(1.在導(dǎo)航欄同時(shí)顯示提示文字及標(biāo)題,用戶對(duì)標(biāo)題不了解時(shí),可對(duì)標(biāo)題進(jìn)行詮釋,或者對(duì)一種狀態(tài)的解釋。
比如QQ聊天窗口:這里在名字下方顯示了好友的登錄狀態(tài)。
(這聊天記錄是我的隱私)
(2.對(duì)于長(zhǎng)篇內(nèi)容的界面,隱藏導(dǎo)航欄,通過(guò)某操作來(lái)顯示,或?qū)?dǎo)航進(jìn)行半透明處理可以更好的顯示內(nèi)容。
比如 pinterest:不僅隱藏了導(dǎo)航欄,還對(duì)標(biāo)簽欄做了半透明設(shè)置,讓用戶更好的查看圖片和標(biāo)題。
2.工具欄
工具欄是對(duì)一個(gè)頁(yè)面進(jìn)行相應(yīng)操作的一種屬性,跟標(biāo)簽欄有本質(zhì)的區(qū)別,標(biāo)簽欄是不同種類之間的切換。
工具欄的圖標(biāo)和導(dǎo)航的欄的圖標(biāo)可以一致,但是跟標(biāo)簽欄的圖標(biāo)不能一致。
這類修圖的軟件,就是很典型的把工具欄作為重點(diǎn),來(lái)設(shè)計(jì)。
3.搜索欄
對(duì)于一般的App來(lái)說(shuō),搜索欄是必須存在的,它該和工具欄以及標(biāo)簽欄保持一致的色調(diào)或風(fēng)格;
搜索欄的存在會(huì)導(dǎo)致在瀏覽某些頁(yè)面時(shí)非常的不方便,可以通過(guò)進(jìn)入頁(yè)面時(shí),搜索欄存在,而滑動(dòng)頁(yè)面搜索欄即上滑消失,跟隨屏幕的滾動(dòng);
搜索欄的作用非常重要,因此會(huì)有很多關(guān)于搜索欄的交互:
用戶在搜索時(shí),會(huì)出現(xiàn)范圍選擇欄,可以讓用戶選擇搜索結(jié)果范圍;
同時(shí),搜索欄可以有實(shí)時(shí)搜索狀態(tài),在用戶沒(méi)輸完關(guān)鍵字時(shí),就更新關(guān)鍵詞讓用戶選擇,當(dāng)然,也有很多用戶對(duì)這塊并不會(huì)多慮,他們也接受輸入完成的關(guān)鍵詞。
這類APP還是比較多的,比如某寶,這里就不截圖了,相信大家對(duì)這塊還是比較了解的。
(路人甲:誰(shuí)說(shuō)的,我特么就不了解。 呆總:你真棒?。?nbsp;
4.表格
表格分為兩類:
(1.索引列表
索引列表將列表的內(nèi)容以類別來(lái)區(qū)分,標(biāo)題用一條粗線來(lái)作為每個(gè)類別的開(kāi)始,并跟隨屏幕滑動(dòng)黏在頂部,直到滑動(dòng)到另一個(gè)類別;
通訊錄的字幕排序分組,是索引列表中最成功的應(yīng)用?;蛘咭恍〢pp中的城市定位,在選擇城市的時(shí)候也有這類分組。
(2.分組列表
分組列表不像索引列表這么輕松的就能到達(dá)指定組,所以不適合展示冗長(zhǎng)內(nèi)容的列表;
它可添加頁(yè)頭頁(yè)腳(當(dāng)然也可以不加)來(lái)作為組的說(shuō)明;(可能我手機(jī)里面的App太少的緣故,沒(méi)找到這類界面)
表格編輯可刪除表格中的某些內(nèi)容,iPhone官方的步驟是,點(diǎn)擊編輯->選擇->刪除,而另一種滑動(dòng),可以少一個(gè)步驟,更快的刪除你想要?jiǎng)h除的內(nèi)容,微信就是采用這種方式。
但是這種方式不適合刪除多條內(nèi)容的應(yīng)用,這里可以選擇使用復(fù)選框來(lái)做。像這種云盤的復(fù)選框,可以批量操作。
5.總結(jié)
1.在設(shè)計(jì)過(guò)程中,多用標(biāo)準(zhǔn)控件,一致性將增加可靠性;
2.屏幕上除了導(dǎo)航欄和標(biāo)簽欄或?qū)Ш綑谕?,不要放其他欄,搜索欄不要固定在屏幕上?nbsp;
3.多用表格視圖,表格視圖是iPhone最好用的的控件;
4.認(rèn)真為文本輸入框選擇鍵盤;
6.減少設(shè)置中的配置項(xiàng),最好不要將配置項(xiàng)放入設(shè)置;
五、APP的第一印象
1.icon 的設(shè)計(jì)
(1.Icon的設(shè)計(jì)要清晰,容易理解。在用戶看到的第一眼,就應(yīng)該能了解你的應(yīng)用的作用,千萬(wàn)不要在icon上面加一些奇怪且多余的文字來(lái)說(shuō)明APP的作用,這樣做不僅多余,而且會(huì)降低用戶對(duì)APP的好感。
(2.取名字對(duì)于一個(gè)icon而言,雖然也是必要的,但并不是最重要的。在取名字的過(guò)程中必須要精簡(jiǎn),且讓用戶容易記住,雖然它不像圖標(biāo)一樣可以帶給用戶強(qiáng)烈的感官刺激。
(3.對(duì)于圖標(biāo)的尺寸來(lái)說(shuō),在設(shè)計(jì)圖標(biāo)的時(shí)候要嚴(yán)格遵守。icon上面的投影等等不需要在設(shè)計(jì)的時(shí)候加上,因?yàn)锳pp Store上會(huì)自動(dòng)生成。
2.啟動(dòng)圖像
啟動(dòng)圖像的運(yùn)用,如果不恰當(dāng)?shù)脑挘瑫?huì)讓用戶反感,并不喜歡使用你的產(chǎn)品。而通過(guò)一些技巧使啟動(dòng)頁(yè)面和產(chǎn)品融合,不讓用戶感覺(jué)到你為了品牌的宣傳而設(shè)計(jì),會(huì)更好的減少用戶的感知時(shí)間?;蛘哒娴臏p少啟動(dòng)頁(yè)的時(shí)間,QQ在這方面做得還是很好的,即美觀又不失風(fēng)度。
近期有很多APP都開(kāi)始在啟動(dòng)頁(yè)加上跳過(guò)按鈕,用戶可以根據(jù)自己的意愿去點(diǎn)擊是否要跳過(guò),這種設(shè)計(jì)既能加入廣告對(duì)得起廣告商,又可以保證用戶不被打擾。唯一的不足就是用戶需要操作,但是這算是合理操作。
并在啟動(dòng)圖像結(jié)束之后,為首次使用產(chǎn)品的用戶提供指示說(shuō)明,也就是引導(dǎo)。對(duì)于首次進(jìn)入App的用戶來(lái)說(shuō),引導(dǎo)如果做得好,也并不是多余的,懂我意思么~哈哈。
3.總結(jié)
1.應(yīng)用的圖標(biāo)要清晰明了,描述應(yīng)用的功能、界面、名稱或品牌。
2.名稱短才好。
3.把啟動(dòng)圖像做出假的應(yīng)用背景,這樣可以減少啟動(dòng)的感知時(shí)間。
六、手勢(shì)操作
1.總結(jié)
這章其實(shí)就是在說(shuō)iPhone的手勢(shì),但是本書(shū)的年代比價(jià)久,不像現(xiàn)在6S有這么多手勢(shì),包括touch功能在當(dāng)時(shí)也不存在,因此講的都很淺。這里就做幾個(gè)總結(jié)就過(guò)了。
1.手勢(shì)來(lái)源于經(jīng)驗(yàn),人們都會(huì)根據(jù)日常在現(xiàn)實(shí)生活中或鼠標(biāo)點(diǎn)擊的過(guò)程中所獲得的認(rèn)知來(lái)對(duì)移動(dòng)設(shè)備做相同操作。
2.在設(shè)計(jì)的過(guò)程中,要非常的細(xì)心觀察用戶在操作界面時(shí)所做的相應(yīng)操作,哪些是失敗或耗時(shí)的,這就是需要改進(jìn)的地方。
3.如果設(shè)計(jì)的應(yīng)用中存在隱藏性很強(qiáng)的手勢(shì),就應(yīng)該有介紹或引導(dǎo)來(lái)告訴用戶怎么使用。
4.本章中說(shuō)了搖動(dòng)手勢(shì)的幾個(gè)問(wèn)題,除了某些娛樂(lè)的新奇用法或撤銷的手始中,盡量不要使用搖動(dòng)手勢(shì)。
5.給某些手勢(shì)加點(diǎn)難度,避免誤操作,如解鎖的滑動(dòng),避免用戶放在口袋里自動(dòng)就解鎖誤撥號(hào)了。
6.手勢(shì)需要有視覺(jué)或生效的反饋。
七、警告、打斷和更新
1.警告框
相信不止一次的出現(xiàn)過(guò)關(guān)于警告框的問(wèn)題了,看過(guò)很多相關(guān)文章,每個(gè)人都有自己的看法,就算寫(xiě)明是相關(guān)機(jī)構(gòu)考證的一些例子都不足以說(shuō)明一些問(wèn)題,因?yàn)槎颊f(shuō)的太淺顯了。而對(duì)于這章,作者還是很詳細(xì)的說(shuō)了關(guān)于他對(duì)警告框的看法以及應(yīng)用方式。
警告框出現(xiàn)的場(chǎng)景:
(1.應(yīng)用不能繼續(xù)進(jìn)行下去了。
當(dāng)你在使用一個(gè)App完成某個(gè)任務(wù)的過(guò)程中,應(yīng)用突然不能進(jìn)行了,即可彈出。
(2.能幫個(gè)忙么?
在飛行模式下,正要下載一個(gè)數(shù)據(jù),警告框就會(huì)彈出,告訴你是否關(guān)閉飛行模式。這樣的設(shè)計(jì)不僅起到了作為警告框的作用,還幫助用戶去做選擇,這種設(shè)計(jì)才是好的交互模式。
(3.請(qǐng)授權(quán)
有些操作可能會(huì)令用戶猶豫或后悔,因此警告框的出現(xiàn)會(huì)讓他們慎重。很多時(shí)候在一些反饋過(guò)程中,為了達(dá)到用戶的滿意,應(yīng)該詢問(wèn)用戶的意見(jiàn),而不是擅做主張。當(dāng)然,這里說(shuō)的是相對(duì)重要的信息。
警告框不該出現(xiàn)的場(chǎng)景:
(1.彈出歡迎消息
再好的警告框,它的潛臺(tái)詞都是“有錯(cuò)誤發(fā)生”。因此無(wú)論你有什么新奇的想法,引導(dǎo)提示和幫助都不要用這種方式來(lái)做,免得用戶誤會(huì)。
(2.App Store打分
相信大家經(jīng)??吹竭@種彈框,真是讓我煩的想刪了它。這里作者在很多年以前就說(shuō)了,不要彈出這種破東西讓用戶打分。不要只關(guān)注自己的應(yīng)用,也要考慮用戶的心情。如果實(shí)在想要人打分,就在關(guān)于我們里面設(shè)置個(gè)鏈接,愿意打分的人自然就會(huì)去,不愿意的,你怎么彈都沒(méi)用,因?yàn)橛脩粢呀?jīng)把你刪了。
(3.小問(wèn)題
不要輕易的彈出警告框,用戶看多了,就會(huì)出現(xiàn)“狼來(lái)了”的故事重演。相信我,你是最棒的(這句話我亂加的)。
2.通知框
和警告框一樣,通知框也會(huì)在用戶完成任務(wù)的時(shí)候突然彈出打斷用戶的工作流。所以在設(shè)計(jì)時(shí),應(yīng)對(duì)其進(jìn)行相應(yīng)的控制。
(1.提空詳細(xì)的內(nèi)容控制
讓大家可以詳細(xì)設(shè)置他們想收到的消息。社交類的讓用戶訂閱部分推送通知。體育類的讓用戶選擇喜歡球隊(duì)的消息推動(dòng)。
(2.確保要有安靜狀態(tài)
有些應(yīng)用半夜在用戶睡覺(jué)的時(shí)候突然來(lái)個(gè)推送,聲音還特別響(是你你爽么)。因此在特定時(shí)間應(yīng)關(guān)閉推送。
(3.讓聲音可選
天氣類應(yīng)用Umbrella在推送消息時(shí),會(huì)根據(jù)天氣來(lái)推送相對(duì)應(yīng)聲音。當(dāng)然也可以選擇關(guān)閉聲音。
3.菊花和進(jìn)度條
這里還簡(jiǎn)單介紹了菊花(不是你想的那個(gè))和進(jìn)度條。他們都代表了時(shí)間,所以要把它們運(yùn)用好是非常重要的。比如它們可以替代進(jìn)程結(jié)束的提示框等。不需要用戶去再看煩人的彈框。
4.總結(jié)
1.在應(yīng)用不能進(jìn)行的緊急情況下,或者應(yīng)用需要授權(quán)的時(shí)候,才能使用警告框。
2.在警告框中,淡定的把事情說(shuō)清楚,別亂以及別亂來(lái)。
3.推送通知發(fā)出的消息總是喜歡用“喊”的,其實(shí)應(yīng)該確切地讓用戶選擇哪些是他們想要的。
4.不要隨便使用計(jì)數(shù)的標(biāo)記。(這里沒(méi)細(xì)說(shuō),書(shū)中也是簡(jiǎn)單介紹下,但是我這里寫(xiě)出來(lái),感興趣的自己去了解下為什么)
5.用菊花轉(zhuǎn)和進(jìn)度條來(lái)告訴用戶,應(yīng)用正在運(yùn)行。
在線
客服
服務(wù)時(shí)間:周一至周日 08:30-18:00
選擇下列產(chǎn)品馬上在線溝通:
客服
熱線
7*24小時(shí)客服服務(wù)熱線
關(guān)注
微信
關(guān)注官方微信