關於「觸動人心」的設計理念
很長時間沒有在站酷發表文章了，希望這份早期經驗之談能給各位一點幫助。
一、精心設計應用的目標
1.要為使用者使用者解決的問題
這個應用與眾不同地為使用者解決了什麼問題？使用者為什麼要使用這個產品？
2.移動應用和計算機的區別
移動應用是幫助使用者去完成計算機力所不能及的事情。
3.本書的五要素
人物：框定了應用的受眾；
事件：框定了受眾會做的事情；
時間、地點：講清了情境如何；
起因：描述了受眾的動機和目的；
4.移動使用者的三種心態
（1、我有個微任務要做
移動應用的使用場景跟計算機是有區別的，因此使用者在使用移動應用時，更適合於使用短時間就能完成的任務，或是短時間就能輕鬆娛樂的遊戲等等；在這樣的應用中，首要任務就是優化設計和操作流程，加速任務完成，簡化任務難度。
其實這裡還可以包括打車應用，比如滴滴、Uber等APP，都是移動應用中區別於計算機的APP。這些APP是計算機沒辦法做到的，總不可能拿著一臺電腦去定位打車吧？這種事情我是沒法想象的。
（2、我想看看附近的情況
利用iPhone等手機的感測器，來幫助使用者在PC端不能完成的事情。例如微信檢視附近的人，或者搖一搖，腦補下電腦有了定位功能後，然後拿著電腦在甩的畫面（真是無法想象）。
（3、我有些無聊
使用者會利用休閒時間來玩遊戲或一些娛樂應用以便來打發，這時候就要研究使用者需要的功能，如何讓使用者在無聊的時候能夠對你的產品有興趣去探索。
在我們使用遊戲或娛樂類的APP時，經常會遇到一些問題，就是時間。有時候其實就是等公交、等外賣等等等等等...就是想玩一把輕鬆又不費腦的小遊戲放松下，或者是刷下微博看下朋友圈。而這些都是使用者樂於去使用的，因為它們簡單且花費的時間短。
有時候使用者就是這麼無聊，然而就這種無聊的心態，也是一種學問（就像我之前說的，做人真煩）。
5.理清方向
友好易用的使用者體驗要設計師合理斟酌每一條觸動人心的功能點；並在設計過程中要想得多，做得少。意為功能可以列出很多，但是真正用上的卻很少。而且要挑選大部分使用者大多數時間都會使用的功能，摒棄小眾群體的邊緣需求。
在我們平時的產品迭代工作中，產品經理收到商戶的需求總是一股腦的就扔過來，我有時候真是想說：你特麼，真帥（其實我怕）。
6.iPhone應用相比H5頁面的優勢
其實這塊書上說的是在手機瀏覽器裡面瀏覽網頁與APP做比較，但是我因為個人的工作原因，所以把這裡替換成H5，修改了一點內容，畢竟書看來是給自己用的嘛~哈哈哈。
（1.高效
同樣是移動端展示，App的速度要比H5要快上很多，方便使用者去使用。
（其實這裡不能以偏概全，有時候H5介面反而會更方便，這裡只能說相比於H5介面，App的使用在多功能的目的性下確實會...會怎麼樣呢？自己去YY）
（2.更好的展示
雖然內容可以完全一致，但是在展示上，App可以使用更多的空間來更好的展示，這是H5介面不具備的，優美且動感。
（3.本地快取
很多新聞類或書籍類的應用，可以在手機上快取或下載，以備在沒網路的狀態下閱讀。但是H5介面需要實時利用網路來瀏覽，這方面會對在動車上或地鐵上的使用者帶來不便。畢竟出門沒流量，誰會去下載一些文章或音樂。
7.總結
1.利用“五要素”，發掘應用觸動人心的先決條件；
2.使用移動裝置要考慮三種移動使用者的心態；
3.不斷更新內容和打造社群；
4.想得多，做的精，提倡夠用就好的思想；
5.做網站的附屬應用時，要考慮在原有的基礎上做改進，而不是照搬。
二、為尺寸和觸控設計
1.尺寸與觸控
在設計過程中，iPhone在4的時代裡，44畫素是標準的控制元件尺寸，但是發展到5和6的時候，兩倍畫素更符合當下的設計，所以88會成為更標準的尺寸；但是在正常情況下，我已經看到很多人直接用100畫素來設計，也很合適。
在設計的過程中，不要讓介面顯得太擁擠，標籤欄最多放下5個Icon，是為了避免使用者有誤操作，從而產生挫敗感。就好像我們平時使用的App，其實5個也是很少見，大多數情況下都是四個，比如支付寶、微信、QQ等。
2.優秀的iPhone應用，包含以下特點（總結）
· 將重要資訊放在頂部，重要操作放在底部；
· 基於一倍尺寸下的44畫素的設計韻律來設計；
· 螢幕儘量不要有滾動，在一屏之內展示完（一般適用於實用工具類軟體）；
· 不要在螢幕上擺放太多的元素
· 應用盡量要簡單，將高階工具隱藏；
三、導航模型
1.iPhone 的三種導航模式
（1.平鋪頁面：類似於卡片翻轉頁面，它沒有信息層級，也沒有組織結構；
· 在平鋪頁面中，可以用單頁面前後翻轉的形式定義一種互動，即前面是展示，點選之後翻轉到背面用來設定；
· 平鋪模式能更好的讓頁面進行編輯，如果頁面數量隨時都會變化，且當中的導航和順序都固定，那麼平鋪非常實用；
· 在平鋪頁面中，更加不能使用螢幕滾動；
—— 平鋪頁面的分頁控制元件，也就是小圓點，在頁面數量非常多的情況下，要如何展示？因此需要控制數量。
—— 頁面非常多的情況還有出現的一個問題，即如何快速跳轉至想要去的頁面？點選編輯按鈕，將頁面縮小去瀏覽。
（2.標籤欄：在螢幕底部有幾個按鈕控制元件用來點選，現在的大部分App都會有這個欄，這塊前面已經說到過。
· 一次點選就可到達想要去的介面；
· 清晰表現目前所在頁面的功能；
——標籤欄的功能不能超過5個，否則會顯示為更多，增加了使用者的認知負擔；
（3.樹形結構：有明顯的層級關係；
· 對大量的功能和專案能很好的劃分；
· 對使用者來說容易理解；
· 在互動上而言，直觀且舒適；
——如果要回到主功能，而現在處於子子子...功能，就要連續返回，操作上不直觀；不過對於微信來說，層級比較淺，就還好。
2.總結
1.遵循普通原則，有時候別人看起來不一定就很普通；
2.理解三種模式的優缺點，進行相應的選擇或組合使用；
3.在動手之前，先在板上或紙上畫出流程草圖，暫時先別考慮細節，而是考慮大局；
4.原型醜點沒關係，只要能理清思路就行。
四、iPhone的標準控制元件
1.導航欄
導航欄的左邊唯一隻能放後退或返回按鈕，其他一律禁止（此為使用者習慣）；
注意：導航功能必須清晰，不要放多餘的控制元件，保持乾淨；
兩種特殊導航：
（1.在導航欄同時顯示提示文字及標題，使用者對標題不瞭解時，可對標題進行詮釋，或者對一種狀態的解釋。
比如QQ聊天視窗：這裡在名字下方顯示了好友的登入狀態。
（這聊天記錄是我的隱私）
（2.對於長篇內容的介面，隱藏導航欄，通過某操作來顯示，或對導航進行半透明處理可以更好的顯示內容。
比如 pinterest：不僅隱藏了導航欄，還對標籤欄做了半透明設定，讓使用者更好的檢視圖片和標題。
2.工具欄
工具欄是對一個頁面進行相應操作的一種屬性，跟標籤欄有本質的區別，標籤欄是不同種類之間的切換。
工具欄的圖示和導航的欄的圖示可以一致，但是跟標籤欄的圖示不能一致。
這類修圖的軟體，就是很典型的把工具欄作為重點，來設計。
3.搜尋欄
對於一般的App來說，搜尋欄是必須存在的，它該和工具欄以及標籤欄保持一致的色調或風格；
搜尋欄的存在會導致在瀏覽某些頁面時非常的不方便，可以通過進入頁面時，搜尋欄存在，而滑動頁面搜尋欄即上滑消失，跟隨螢幕的滾動；
搜尋欄的作用非常重要，因此會有很多關於搜尋欄的互動：
使用者在搜尋時，會出現範圍選擇欄，可以讓使用者選擇搜尋結果範圍；
同時，搜尋欄可以有實時搜尋狀態，在使用者沒輸完關鍵字時，就更新關鍵詞讓使用者選擇，當然，也有很多使用者對這塊並不會多慮，他們也接受輸入完成的關鍵詞。
這類APP還是比較多的，比如某寶，這裡就不截圖了，相信大家對這塊還是比較瞭解的。
（路人甲：誰說的，我特麼就不瞭解。 呆總：你真棒！）
4.表格
表格分為兩類：
（1.索引列表
索引列表將列表的內容以類別來區分，標題用一條粗線來作為每個類別的開始，並跟隨螢幕滑動黏在頂部，直到滑動到另一個類別；
通訊錄的字幕排序分組，是索引列表中最成功的應用。或者一些App中的城市定位，在選擇城市的時候也有這類分組。
（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.應用不能繼續進行下去了。
當你在使用一個App完成某個任務的過程中，應用突然不能進行了，即可彈出。
（2.能幫個忙麼？
在飛航模式下，正要下載一個數據，警告框就會彈出，告訴你是否關閉飛航模式。這樣的設計不僅起到了作為警告框的作用，還幫助使用者去做選擇，這種設計才是好的互動模式。
（3.請授權
有些操作可能會令使用者猶豫或後悔，因此警告框的出現會讓他們慎重。很多時候在一些反饋過程中，為了達到使用者的滿意，應該詢問使用者的意見，而不是擅做主張。當然，這裡說的是相對重要的資訊。
警告框不該出現的場景：
（1.彈出歡迎訊息
再好的警告框，它的潛臺詞都是“有錯誤發生”。因此無論你有什麼新奇的想法，引導提示和幫助都不要用這種方式來做，免得使用者誤會。
（2.App Store打分
相信大家經常看到這種彈框，真是讓我煩的想刪了它。這裡作者在很多年以前就說了，不要彈出這種破東西讓使用者打分。不要只關注自己的應用，也要考慮使用者的心情。如果實在想要人打分，就在關於我們裡面設定個連結，願意打分的人自然就會去，不願意的，你怎麼彈都沒用，因為使用者已經把你刪了。
（3.小問題
不要輕易的彈出警告框，使用者看多了，就會出現“狼來了”的故事重演。相信我，你是最棒的（這句話我亂加的）。
2.通知框
和警告框一樣，通知框也會在使用者完成任務的時候突然彈出打斷使用者的工作流。所以在設計時，應對其進行相應的控制。
（1.提空詳細的內容控制
讓大家可以詳細設定他們想收到的訊息。社交類的讓使用者訂閱部分推送通知。體育類的讓使用者選擇喜歡球隊的訊息推動。
（2.確保要有安靜狀態
有些應用半夜在使用者睡覺的時候突然來個推送，聲音還特別響（是你你爽麼）。因此在特定時間應關閉推送。
（3.讓聲音可選
天氣類應用Umbrella在推送訊息時，會根據天氣來推送相對應聲音。當然也可以選擇關閉聲音。
3.菊花和進度條
這裡還簡單介紹了菊花（不是你想的那個）和進度條。他們都代表了時間，所以要把它們運用好是非常重要的。比如它們可以替代程序結束的提示框等。不需要使用者去再看煩人的彈框。
4.總結
1.在應用不能進行的緊急情況下，或者應用需要授權的時候，才能使用警告框。
2.在警告框中，淡定的把事情說清楚，別亂以及別亂來。
3.推送通知發出的訊息總是喜歡用“喊”的，其實應該確切地讓使用者選擇哪些是他們想要的。
4.不要隨便使用計數的標記。（這裡沒細說，書中也是簡單介紹下，但是我這裡寫出來，感興趣的自己去了解下為什麼）
5.用菊花轉和進度條來告訴使用者，應用正在執行。
謝謝你的閱讀：）