Redesign——iphone中的“再”設計
Redesign——iphone中的“再”設計-移動閱讀二維碼

很久以前看過一本書,講的是一些設計師如何把已有產品、品牌進行重新設計,既保持原有特色,又煥然一新。工作中似乎充滿著“再”設計,無論是網站改版,還是外面產品的復制模仿,或是一些成功產品的跨平臺、操作系統的移植….

尤其,隨著移動app的發展和升溫,PC端的產品有逐漸向手機端移植的趨勢。如何將一款pc端產品成功移植到手機端,必然要對交互操作進行“再”設計。

  • 從pc到iphone的“再”設計

目前來說,需要移植的多為用戶量比較大,相對成熟,數據累積豐富的產品。保持原有特色和常用功能讓設計師覺得踏實。但麻煩往往也常來源于此:

網站結構層級在pc端往往很深。
Redesign——iphone中的“再”設計

但是,移動界面的信息架構往往不適合設計很深的層級。層級深容易讓用戶迷失,也不好找回主頁。

pc端因為有導航和面包屑的輔助,邏輯和軌跡也不難尋找。但是手機屏幕和操作系統限制,多于三級,用戶就不再好操作。

在iphone guildline里對于面包屑也提出盡量勿用的提示。

有人說手機交互是讓設計師最能發揮的地方。我覺得沒錯。交互設計師眼中優雅的產品往往都是“小而簡單清晰的“和重視用戶使用目的流程的。

美圖秀秀iphone我相信出自設計師之手,界面開始就清晰的表達目的和需求:拍照或是處理圖片,之后的操作也是一氣呵成。

手機如果想獲得好的體驗,最好靠像用戶一樣不斷操作來感受。也就是說,手機交互設計分析不像傳統分析從產品已有功能開始,更應該從用戶操作目的和流程開始。Iphone似乎先天領略了這個:

頂部導航采用頁面名稱+導航(title+nav)的形式。左右傾向后退和前進的跳轉,符合用戶一步一步處理的規范。也就是層級結構(sitemap)的扁平化。

除此之外,交互操作方式上,雖然觸摸屏的手勢和pc有一些操作相似的地方,比如點擊、拖拽。PC和觸摸屏方式也不盡相同。但觸摸屏不存在所謂鼠標的懸停(hover)狀態,也沒有右鍵點擊。

PC常用交互操作與Iphone操作對比

Iphone有自己的獨特手勢,比如縮放、拉大多點觸碰,長按圖標抖動后移動或刪除。

iPhone、ipad上手勢的總結圖

  • 對需求的“再”設計

“需求”對于交互,在我理解分為兩部分,用戶需求和商業需求。

用戶需求很好理解,就是用戶為什么使用這個產品,為了解決什么問題,用戶的使用場景和流程分別是什么?

比如一個用戶拍照、裝扮并分享的app。流程很簡單:

如此而來,分割這些頁面,可以通過對流程的梳理。每個頁面反復問用來解決什么問題的,會讓頁面架構邏輯變得清晰。

另一個角度來說,蘋果的確是老外的思維,單線條的。ios系統也是一步一步的。頂部為title+nav(頁面名稱和導航),導航為表示流程操作的上一步、下一步。不難發現蘋果希望流程設計像用戶行為一樣,符合用戶習慣,簡單直接。

而現實永遠充滿著無數的選擇,比如,我拍好照片難道不能只保存不分享么?
于是流程演變成:

實際上,產品會更復雜。甚至有更多選擇分流。
這就顯現ios處理這種多線任務情況的弊端——如何在處理同一個頁面下,既滿足A又滿足B呢?這就會有商業需求分析上的主次之說,哪條才是有傾向性的主線呢?

對于公司來說,分享是會贏得更多粘性、用戶的方法。從這個角度來說,分享和保存的重量,明顯分享優于保用戶個人行為的保存。那么主線就該是:拍照——>裝扮——>分享

保存可以作為分享中的輔助支流,放在屏幕中。

當然這個例子只是說明觀點,實際分析上,保存作為對用戶沒有傷害性,完全可以默認保存,之后繼續分享。

這里可以看到,商業需求就是公司戰略重點,產品利益傾向和方向。一個交互設計師如何斷定層級往往來自與他對于商業需求的解決能力。舉個簡單例子來說明:

拍拍的搜索提示,引導用戶的熱門搜索

把用戶看成懶而怕麻煩的。上面的情況尤其對于瀏覽型無目的的用戶來說,具有很強的引導和暗示,也是運營的發力點之一。

如果說design is solving problem.那么,方法永遠比困難多,設計如何解決問題和困難的方式也多樣。交互設計師如何權衡各要素的層次永遠是思考的重點。

  • 優雅的降級

用戶有在手機上使用這個功能的需要嗎?在什么情景下有呢?優先級高么?

PC端的功能未必適合于手機端。我在手機端會有ps圖片的需求么?要到什么程度呢?是睫毛的根根分明還是膚色的修飾呢?目的是什么呢?自我欣賞還是讓好友看看評價下呢?

所以,這就是涉及到pc端功能優雅的降級問題。

使用功能的目的:什么場合、情景?操作輸出物的用途、特點?分享還是自留?

功能間的PK:這個功能數據量、用戶在手機端的饑渴度

功能實現程度的考量:手勢如何完成操作?能精細到神馬程度?

 

Asking first,thinking first,design last.更有助于思考解決問題。

本文鏈接:http://www.casaleticia.com/redesign-iphone-again-design.html
本文標簽: , , , , , , , ,