如何構建交互模式(選自《iOS用戶體驗設計》)

一個工作流可以產生大量的交互模式，在功能上每種模型都可以很相似，但在用戶體驗上差異就會很大了。如何通過具有特色的交互方式創建超越同類用戶體驗的應用就顯得至關重要了。

工作流的定義是所有交互設計活動的基礎。我們就是在定義工作流的過程中確定用戶與應用的交互方式。你可以根據想要實現的目標，在多種不同的層次上對其進行定義。在有些情況下，你只需要抽象地定義工作流，而不必關注其功能細節和具體的交互方式。這對確定功能集和一般流程之間的關系是很有價值的。而在另一些情況下，你則需要定義用戶可能會碰到的所有交互、事件以及狀態變化的邏輯，以清晰地勾勒出整個應用程序的操作方式。

亞馬遜購買《iOS用戶體驗設計》

為了進行交互建模，你需要更為詳細的工作流，而不是抽象且高層次的工作流，但也不需要過于詳細。交互模式的詳細程度取決于應用的性質。下面詳細剖析如何構建交互模式：

如前所述，交互建模是對應用的整體交互行為進行定義，并規范如何運用或規劃這些交互行為來為用戶創建具有一致性的、易于理解的交互模式。《iOS用戶體驗設計》第2章介紹了作為iOS用戶體驗基礎的概念模型和空間模型。分層平面和空間模型這兩種概念共同組成了iOS的基本交互模式。可以看到，如果你能夠合理運用這些概念，它們就能發揮出巨大的力量。（參見圖1-1）

圖1-1 iPhone中體驗到的iOS空間模型

Default Plane 默認層
Underlying Plane 隱含層
Superimposed Plane 疊加層

在開始交互建模時，你需要以一種抽象的方式進行思考。你不需要考慮具體的功能和內容，而要考慮應用所可能采用的各種不同的交互行為，由此來了解如何使用它們來控制界面上的元素。iOS為我們提供了大量的可選方案，比如，縮放、拖移、輕掃、滑動和滾動，等等。無論是單獨使用還是結合使用，這些手勢都可以用來創造出有趣的效果和截然不同的交互方式。

“hi，小米，明天一起去園博會哇？”
場景1：“好阿，等等…我查下天氣。… 見鬼！明天下雨，只能改天了。”
“….（好失落）”
場景2：“好阿，等等…我查下天氣。… 太好了！明天陽光燦爛，走著！”
“走著！！”
不要誤會，這里不是社交平臺，也不是約會場合，以上兩種不同場景所帶來的不同心情，在你查看天氣情況時是否也遇到過？為什么越來越多的產品都融入了情感化的設計，其實產品的使用者，也就是我們都是情感化的動物（高級動物），在使用任何產品時我們都會有相應的心理訴求，如果你沒發現的話，那只是你還不善于觀察自己。

譯者注：在電子商務中，我們發現用戶在支付環節的流失率非常高，支付流程的用戶體驗是至關重要的環節。本文介紹了一些移動端支付流程的方法，怎樣讓我們的支付流程更加易用。業余時間翻譯了這篇文章跟大家共享，若大家發現任何錯誤，歡迎隨時給予糾正。

原文地址：designing-a-better-mobile-checkout-process

數據顯示越來越多的用戶具有使用智能手機進行付款的傾向。“ 這些用戶愿意在移動設備上完成購買嗎？ ”這個問題得到了迅速回答。2012年，美國移動電子商務銷售額飆升81%,形成了250億美元的市場。

值得注意的是，這些成交貢獻只有一部分來自于app。根據調查顯示，61％-81％的用戶更傾向于在移動端的網頁上來完成購物的各種操作：研究商品和價格，查看商品詳情，參加促銷活動，下單和支付等。比起功能相互獨立的app，他們更傾向于在瀏覽器中來進行購物（來獲得瀏覽與支付環節之間的無縫體驗）。

讓我們深入看一些移動端結賬流程的例子。

1、 只保留重要信息

我們也許都回答過很多令人討厭的問題，比如“你是怎么知道我們的？”這樣的問題可能是對商家有用，對消費者來說沒有任何作用。然后這些消費者需要付出辛苦賺來的錢，他們也更有權力決定是否關閉這個頁面。

雖然這些問題在網頁上不那么重要，但是在移動端卻是致命的。讓我們來看兩個例子

在手機產品的設計過程中，由于手機界面的承載能力有限，產品功能的不斷膨脹，必須要在用戶打開應用之后告知他某些新奇的功能，引導他完成某些主要任 務流程，讓用戶不至于迷失在陌生應用中不知所措。幫助用戶快速掌握應用的使用方法，體驗到應用的樂趣，新手引導成了一個必須考慮的設計環節。

用戶引導的直接目標是幫助用戶更好的使用產品，終極目標是提升用戶滿意度。雖然，大多數情況下，我們可以通過合理的設計，盡可能的簡化功能，讓用戶 無需引導和幫助，就可以完成必要的任務。但是實際上，手機產品的限制和對強大功能的追求，導致這個目標很難達到，因此越來越多的應用開始使用用戶引導來幫 助用戶快速熟悉產品。

隨著蘋果iPad的推出，電子雜志類行的應用大受好評，電子閱讀需求量不斷增長。傳統紙質出版物的良好的視覺效果，互聯網巨大的信息資源庫，將這兩者集合在一起就會誕生非常好的雜志客戶端應用。這種雜志型客戶端應用的最佳代表就是Flipboard。

2010年iPad最佳應用是Flipboard。集合了Facebook和Twitter的推動內容，輔以格式排版，讓用戶得到了無限量的優秀資源以及良好的閱讀體驗。

藍藍注：此文有些圖片沒有顯示全， 下載此文及圖片請點http://www.li-bodun.cn/what%20to%20do%20APP%20ui%20design.docx

用戶在面對移動應用時，心態有三大特征：第一是微任務，我不會拿手機寫一篇論，不會從頭到尾看一部電影，使用是隨時隨地的；第二是查看周遭，也就是我所處的環境。我可能會打開手機，看有什么好的館子，有什么好的電影，打折團購等等；第三個是無聊，很多移動用戶更多情況是無聊的，打開手機，從左到右的翻，翻到最后再把手機關掉。

針對這三種特征的心態，我們怎么樣去面對？第一，應用最好是小而準，不要大而全。越全的功能應用，只能代表著這個應用在各方面的都很平庸；第二個要滿足用戶的情景需求；第三個要幫助用戶去消磨時間。

雖然 iOS 7的界面設計引來不少吐槽口水，但李的觀點是“蘋果的缺點一般都不會出現在大方向上，即便有缺點也只是在某些個別的零件上。”這篇文章我將站在一個設計師的角度談 iOS 7 的界面設計。

　　在談 iOS 7 的界面之前，我先說說我對“扁平化”的認識。 iOS 7 發布之前大家都在猜測蘋果會不會把界面改成“扁平化”風格?什么是“扁平化”的界面設計風格?去掉材質機理去掉投影漸變，整個界面看起來扁扁的平平的就是“扁平化”的設計風格嗎?如果是這樣理解“扁平化”三個字的話，那大家怎么理解“知識扁平化”這個詞?

　　我認為“扁平化”的界面設計風格，真正意義上指的是界面設計上信息層級的扁平化，而不單純只是視覺效果的扁和平。WP 系統的“扁平化”設計把很多信息變得模塊化，并且壓縮信息展示層級，很多原本藏的比較深的信息可以在首界面上直觀呈現。

　　如果只是扁扁平平的視覺設計風格的話，我們壓根不需要把界面設計孤立出來看。廣告界的平面設計，書籍裝幀的封面設計等等，在很久很久以前就已經實現所謂的“扁平化”了。況且我們最開始用的電子產品，在顯示器還是馬賽克的時候，那不就是最平的“扁平化”嗎?實際這種極簡式的點線面構成式的現代主義設計風格起源于建筑設計，并早已經在廣告設計，服裝設計，工業設計等領域普及了。

　　所以“扁平化”在界面設計界壓根就是一個可有可無或早已有之的概念，完全沒必要大肆渲染，只是IT 界的設計一直比其他領域的設計理念落后很多。

蘋果在2013年的WWDC上正式發布了全新的iOS 7操作系統，相比iOS 6，新版的iOS 7在界面上做了重新的設計，更加的炫酷，同時界面見的切換也多了許多，一起先來看看蘋果官方為我們提供的iOS 7官方設計圖吧。