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