當我拿到產品或者界面功能結構圖時，我首先會做以下三點考慮：
該產品定位是什麼，我希望用戶擁有什麼樣的體驗【至關重要，考慮到每一個細節問題】對界面邏輯功能分析，我需要和那些功能打交道競品分析，或者相似功能界面設計、交互分析三點思考內容，不分順序，在思考的過程中，很多時候三點是相互影響、相互滲透的
說一下自己的拿到功能結構圖的整個思考過程，主要從以下幾個方面思考。
Part one產品定位分析：
No.1 微記，通過圖片和文字為家庭成員記錄他們每一刻、每一天的生活點滴，創造全家人的共享記憶；
Part two界面功能結構分析：
四個常規tab（家庭微記、家人、家書、我的），和添加微記botton；用於用戶及時發布動態消息，包括用戶頭像，發布時間，動態內容（圖片、文字）；更加注重用戶隱私，只有點讚，不包含評論、轉發等分享行為；加入日曆功能，方便用戶及時查看當天動態；Part three相似功能分析界面分析No.1 朋友圈、qq空間
A、相同點：及時發布動態消息，包含用戶頭像，發布時間，動態內容（圖片、文字）；
B、不同點：
沒有評論、轉發的分享功能；朋友圈和qq空間更在於分享，微記更在於記錄微記對於用戶的每一條狀態更加重視，不是單純的下拉刷新，一條條動態簡單粗暴的刷過去；
No.2 日記類功能app
A、相同點：真正的回歸記錄，把重點放在用戶的每一篇、每一天生活記錄，記錄方式、
記錄目的更加明確，使用戶感受到自己每天的生活都在被記錄；
B、不同點：
日記大多在於記錄自己個人生活，微記在於記錄家庭每一個成員的生活，使他們之間達到共享的家庭狀態。關於自己的記錄內容，對於家庭成員，可以選擇公開或不公開的方式；綜上，對於微記的原型界面設計有了明確的方案
記錄方式No.1 每一條微記內容
A、微記更靠近日記的記錄的方式,每一條微記以塊狀形式，獨立呈現，包含用戶頭像、用戶暱稱、發表時間、發表內容
針對發表內容，說明一下，根據功能要求，用戶最後呈現發表狀態，共有三種
a、圖片+文字
b、純圖片
c、純文字
所以要出三種狀態原型。
No.2 多條微記的呈現形式：
上下滑動同一天不同時刻的所有家庭成員所發表的微記向左滑動，後一天不同時刻的所有家庭成員所發表的微記向右滑動，前一天不同時刻的所有家庭成員所發表的微記四個常規tab（第一本版本中，「我的」因當時特殊考慮，沒有放上去，不影響整體交互體驗效果）
之所以選擇將4個tab包括添加微記botton放在頁面的頂部，是因為：如果4個tab放在界面底部，當用戶上滑查看一天家庭成員的動態，用戶手指的滑動與界面的交互位置和4個tab放在底部的位置，會有一些重合，引發用戶誤點，影響用戶體驗。
好吧，這個想法，自己現在看起來，確實是有點「想多了」。
不過，在這裡，我要說明一下我這裡所犯的錯誤–作為互動設計師，自己在空想用戶使用產品的過程，雖然很多時候我們需要模擬用戶使用產品的場景，也許用戶的大多使用習慣，是我們在過去的經驗中、在自己的使用場景中、在書本中，是可預見的，但是有時候自信的一味的空想模擬，就會忽視很多的用戶細節，如果被忽視的細節一旦多了，那差距想必會影響整個產品的用戶體驗。
後話，自己找到幾款需要下滑查看動態，並且tab在界面底部的app，推薦自己的一些不同年齡、不同性別的朋友使用，並悄悄觀察他們的交互狀態、體驗效果，事實上，大部分的用戶，當他們手指準備點擊屏幕上滑時，大家會刻意迴避這個區域，只要標籤欄高度合理，界面交互範圍符合用戶手勢舒服的合理區域，由於上滑，造成誤點的情況幾乎沒有
關於添加微記的botton
由於把四個tab放在了頂部的最上面，考慮到視覺平衡，一開始準備將botton放在最中間，但是如果將botton放在中間，用戶點擊起來相對比較麻煩，所以，綜合考慮來看，決定將botton放在最右邊，一方面，方便用戶點擊。另一方面，微記上面需要加上當天的日期，避免整個微記界面中間擁擠的情況。
日曆botton
因為將當天日期放在了每天最新微記的上面，所以，便將日曆放在了其旁邊，同一性質，都在於根據時間查看當天微記內容
上述一段，就是我對微記第一版本的考慮。
無論是移動端界面、還是PC端界面，都需要對什麼是簡單的體驗有一個明確認識。
關於建立這種認識，我很喜歡Gildes Colborne在《簡約至上–互動設計四策略》提到的的方法，在這裡複述一下，和大家共勉，希望能給讀者帶來啟發和幫助！
我有兩種方式 來建立這種認識。
簡單而迅速的方式是用一句話把它寫出來，包括我要設計什麼，要遵循哪幾條設計規則，儘量使用最簡單的術語。然後，在面對設計功能對照表而猶豫不決時，我就會暫時停下來，問我自己：「做這個表是為了什麼？」這個描述是我判斷設計是否簡單的基準。在做一些比較小的設計（大型網絡中的一個頁面）或者在我多多少少了解到設計背景的情況下，這種方式都是很奏效的。
更好而花費時間更長的方式是描述我希望用戶擁有什麼樣的體驗。具體一點說，就是描述用戶的使用背景，以及我的設計怎麼滿足用戶在該情下的需求。在設計一些大型啊項目時（比如整個網站或者行動裝置），這種方式很適合，因為我這種方式可以讓我深入透徹地考慮到每一個細節。
下面就是微記第一稿的原型圖設計以及基本的交互效果動圖
上下滑動，查看同一天不同時刻的所有家庭成員所發表的微記向左滑動，查看後一天不同時刻的所有家庭成員所發表的微記向右滑動，查看前一天不同時刻的所有家庭成員所發表的微記微記原型圖效果（第一稿）
微記原型圖交互效果動圖（第一稿）
如果大家想看動圖的話，可以到behance看我的原稿：連結：https://www.behance.net/portfolio/editor?project_id=33050391
現在看來，很多交互上的錯誤都顯而易見。
記得，當時第一稿完成的時候，自己興致勃勃拿給公司同事「欣賞」，我原以為大家會很流暢的滑動起來，好吧，並沒有，他們中幾大部分人只是停在界面上，或者亂點一通，並沒有滑動的意思，我有問過他們，為什麼不嘗試著上下或者左右滑動一下呢？他們的回答是：
我並沒有看懂界面到底在表達什麼；我怎麼知道上下左右有內容呢；額，我應該要這麼做嗎，但是你沒有提示啊；說實話，當時的確有很深的挫敗感，然並卵，及早發現問題，那就開始解決問題。從大家給我的反饋意見和我對他們的觀察中，我做了以下總結：
第一稿錯誤的原因：
這個原因前面也有提到過，就是太盲目按照自己的想法，沒有切身從用戶體驗角度出發，先是體驗，再是設計，應該時刻放在心上，應該時刻使用戶感受到產品簡單之美；形式大於體驗，過分將重點放在自以為「與眾不同」的設計，違背了一些互動設計最基本的準則，「可見性」、「自解釋」等都沒有很好的遵守。第一稿錯誤的設計方法：
將微記狀態的塊狀結構過於大，非常不方便用戶瀏覽，用戶第一眼需要的信息量遠遠超過我給予他們的信息量；微記發表及時的時間，屬於用戶當前最需要知道的信息，卻沒有明確展示，而是放在了每篇微記的最底部；沒有足夠的提示設計，需要用戶思考；在這裡說明一下，在第二版的設計之前，期間也有無數的小版本，小想法，但大多不成熟，會很快被自己否決。
第二稿將做以下調整：
1、塊狀縮小，一屏，可以正常顯示1到3個微記內容；
關於微記內容的設計：
此前設計樣式只符合一張圖片，再多發表一張，用戶是看不到的。這裡的做法應該是讓用戶看的到，但是看不清，觸發用戶點擊；將發表時間提到微記內容的上面，增加點讚botton；2、4個tab依然放在界面頂部；
3、添加微記botton放在最右手邊，方便用戶點擊，觸發用戶點擊；
4、因為微記塊狀的縮小，所以取消左右滑屏，改為左右有一個時間導航（前一天，後一天），用於用戶點擊；
下面就是我第二版改版的設計原型圖
第二版針對第一版出現的嚴重問題，做了很多的而改進，但依然存在或多或少的問題，仍然需要不斷懷疑和提高，針對第二版的改進，我會在《產品原型設計之交互體驗的思考過程（二）》中繼續更新說明。
作者：大聖（微信號wzydml），互動設計師。
本文由 @大聖 原創發布於人人都是產品經理。未經許可，禁止轉載。
收藏已收藏 | {{ postmeta.bookmark }} 點讚已贊 | {{ postmeta.postlike }}