當我拿到產(chǎn)品或者界面功能結(jié)構(gòu)圖時，我首先會做以下三點考慮：

1. 該產(chǎn)品定位是什么，我希望用戶擁有什么樣的體驗【至關(guān)重要，考慮到每一個細節(jié)問題】
2. 對界面邏輯功能分析，我需要和那些功能打交道
3. 競品分析，或者相似功能界面設計、交互分析

三點思考內(nèi)容，不分順序，在思考的過程中，很多時候三點是相互影響、相互滲透的

說一下自己的拿到功能結(jié)構(gòu)圖的整個思考過程，主要從以下幾個方面思考。

Part? ?one

產(chǎn)品定位分析：

No.1 ?微記，通過圖片和文字為家庭成員記錄他們每一刻、每一天的生活點滴，創(chuàng)造全家人的共享記憶；

Part? ?two

界面功能結(jié)構(gòu)分析：

1. 四個常規(guī)tab（家庭微記、家人、家書、我的），和添加微記botton；
2. 用于用戶及時發(fā)布動態(tài)消息，包括用戶頭像，發(fā)布時間，動態(tài)內(nèi)容（圖片、文字）；
3. 更加注重用戶隱私，只有點贊，不包含評論、轉(zhuǎn)發(fā)等分享行為；
4. 加入日歷功能，方便用戶及時查看當天動態(tài)；

Part three

相似功能分析界面分析

No.1 ?朋友圈、qq空間

A、相同點：及時發(fā)布動態(tài)消息，包含用戶頭像，發(fā)布時間，動態(tài)內(nèi)容（圖片、文字）；

B、不同點：

• 沒有評論、轉(zhuǎn)發(fā)的分享功能；
• 朋友圈和qq空間更在于分享，微記更在于記錄微記對于用戶的每一條狀態(tài)

更加重視，不是單純的下拉刷新，一條條動態(tài)簡單粗暴的刷過去；

No.2 ?日記類功能app

A、相同點：真正的回歸記錄，把重點放在用戶的每一篇、每一天生活記錄，記錄方式、

記錄目的更加明確，使用戶感受到自己每天的生活都在被記錄；

B、不同點：

• 日記大多在于記錄自己個人生活，微記在于記錄家庭每一個成員的生活，
• 使他們之間達到共享的家庭狀態(tài)。關(guān)于自己的記錄內(nèi)容，對于家庭成員，
• 可以選擇公開或不公開的方式；

綜上，對于微記的原型界面設計有了明確的方案

記錄方式

No.1 ?每一條微記內(nèi)容

A、微記更靠近日記的記錄的方式,每一條微記以塊狀形式，獨立呈現(xiàn)，包含用戶頭像、用戶昵稱、發(fā)表時間、發(fā)表內(nèi)容

針對發(fā)表內(nèi)容，說明一下，根據(jù)功能要求，用戶最后呈現(xiàn)發(fā)表狀態(tài)，共有三種

a、圖片+文字

b、純圖片

c、純文字

所以要出三種狀態(tài)原型。

No.2 ?多條微記的呈現(xiàn)形式：

• 上下滑動同一天不同時刻的所有家庭成員所發(fā)表的微記
• 向左滑動，后一天不同時刻的所有家庭成員所發(fā)表的微記
• 向右滑動，前一天不同時刻的所有家庭成員所發(fā)表的微記

四個常規(guī)tab（第一本版本中，“我的”因當時特殊考慮，沒有放上去，不影響整體交互體驗效果）

之所以選擇將4個tab包括添加微記botton放在頁面的頂部，是因為：如果4個tab放在界面底部，當用戶上滑查看一天家庭成員的動態(tài)，用戶手指的滑動與界面的交互位置和4個tab放在底部的位置，會有一些重合，引發(fā)用戶誤點，影響用戶體驗。

好吧，這個想法，自己現(xiàn)在看起來，確實是有點“想多了”。

不過，在這里，我要說明一下我這里所犯的錯誤–作為交互設計師，自己在空想用戶使用產(chǎn)品的過程，雖然很多時候我們需要模擬用戶使用產(chǎn)品的場景，也許用戶的大多使用習慣，是我們在過去的經(jīng)驗中、在自己的使用場景中、在書本中，是可預見的，但是有時候自信的一味的空想模擬，就會忽視很多的用戶細節(jié)，如果被忽視的細節(jié)一旦多了，那差距想必會影響整個產(chǎn)品的用戶體驗。

后話，自己找到幾款需要下滑查看動態(tài)，并且tab在界面底部的app，推薦自己的一些不同年齡、不同性別的朋友使用，并悄悄觀察他們的交互狀態(tài)、體驗效果，事實上，大部分的用戶，當他們手指準備點擊屏幕上滑時，大家會刻意回避這個區(qū)域，只要標簽欄高度合理，界面交互范圍符合用戶手勢舒服的合理區(qū)域，由于上滑，造成誤點的情況幾乎沒有

關(guān)于添加微記的botton

由于把四個tab放在了頂部的最上面，考慮到視覺平衡，一開始準備將botton放在最中間，但是如果將botton放在中間，用戶點擊起來相對比較麻煩，所以，綜合考慮來看，決定將botton放在最右邊，一方面，方便用戶點擊。另一方面，微記上面需要加上當天的日期，避免整個微記界面中間擁擠的情況。

日歷botton

因為將當天日期放在了每天最新微記的上面，所以，便將日歷放在了其旁邊，同一性質(zhì)，都在于根據(jù)時間查看當天微記內(nèi)容

上述一段，就是我對微記第一版本的考慮。

無論是移動端界面、還是PC端界面，都需要對什么是簡單的體驗有一個明確認識。

關(guān)于建立這種認識，我很喜歡Gildes Colborne在《簡約至上–交互設計四策略》提到的的方法，在這里復述一下，和大家共勉，希望能給讀者帶來啟發(fā)和幫助！

我有兩種方式 來建立這種認識。

簡單而迅速的方式是用一句話把它寫出來，包括我要設計什么，要遵循哪幾條設計規(guī)則，盡量使用最簡單的術(shù)語。然后，在面對設計功能對照表而猶豫不決時，我就會暫時停下來，問我自己：“做這個表是為了什么？”這個描述是我判斷設計是否簡單的基準。在做一些比較小的設計（大型網(wǎng)絡中的一個頁面）或者在我多多少少了解到設計背景的情況下，這種方式都是很奏效的。

更好而花費時間更長的方式是描述我希望用戶擁有什么樣的體驗。具體一點說，就是描述用戶的使用背景，以及我的設計怎么滿足用戶在該情下的需求。在設計一些大型啊項目時（比如整個網(wǎng)站或者移動設備），這種方式很適合，因為我這種方式可以讓我深入透徹地考慮到每一個細節(jié)。

下面就是微記第一稿的原型圖設計以及基本的交互效果動圖

• 上下滑動，查看同一天不同時刻的所有家庭成員所發(fā)表的微記
• 向左滑動，查看后一天不同時刻的所有家庭成員所發(fā)表的微記
• 向右滑動，查看前一天不同時刻的所有家庭成員所發(fā)表的微記

微記原型圖效果（第一稿）

微記原型圖交互效果動圖（第一稿）

如果大家想看動圖的話，可以到behance看我的原稿：鏈接：https://www.behance.net/portfolio/editor?project_id=33050391

現(xiàn)在看來，很多交互上的錯誤都顯而易見。

記得，當時第一稿完成的時候，自己興致勃勃拿給公司同事“欣賞”，我原以為大家會很流暢的滑動起來，好吧，并沒有，他們中幾大部分人只是停在界面上，或者亂點一通，并沒有滑動的意思，我有問過他們，為什么不嘗試著上下或者左右滑動一下呢？他們的回答是：

• 我并沒有看懂界面到底在表達什么；
• 我怎么知道上下左右有內(nèi)容呢；
• 額，我應該要這么做嗎，但是你沒有提示??；

說實話，當時的確有很深的挫敗感，然并卵，及早發(fā)現(xiàn)問題，那就開始解決問題。從大家給我的反饋意見和我對他們的觀察中，我做了以下總結(jié)：

第一稿錯誤的原因：

• 這個原因前面也有提到過，就是太盲目按照自己的想法，沒有切身從用戶體驗角度出發(fā)，先是體驗，再是設計，應該時刻放在心上，應該時刻使用戶感受到產(chǎn)品簡單之美；
• 形式大于體驗，過分將重點放在自以為“與眾不同”的設計，違背了一些交互設計最基本的準則，“可見性”、“自解釋”等都沒有很好的遵守。

第一稿錯誤的設計方法：

• 將微記狀態(tài)的塊狀結(jié)構(gòu)過于大，非常不方便用戶瀏覽，用戶第一眼需要的信息量遠遠超過我給予他們的信息量；
• 微記發(fā)表及時的時間，屬于用戶當前最需要知道的信息，卻沒有明確展示，而是放在了每篇微記的最底部；
• 沒有足夠的提示設計，需要用戶思考；

在這里說明一下，在第二版的設計之前，期間也有無數(shù)的小版本，小想法，但大多不成熟，會很快被自己否決。

第二稿將做以下調(diào)整：

1、塊狀縮小，一屏，可以正常顯示1到3個微記內(nèi)容；

關(guān)于微記內(nèi)容的設計：

• 此前設計樣式只符合一張圖片，再多發(fā)表一張，用戶是看不到的。這里的做法應該是讓用戶看的到，但是看不清，觸發(fā)用戶點擊；
• 將發(fā)表時間提到微記內(nèi)容的上面，增加點贊botton；

2、4個tab依然放在界面頂部；

3、添加微記botton放在最右手邊，方便用戶點擊，觸發(fā)用戶點擊；

4、因為微記塊狀的縮小，所以取消左右滑屏，改為左右有一個時間導航（前一天，后一天），用于用戶點擊；

下面就是我第二版改版的設計原型圖

第二版針對第一版出現(xiàn)的嚴重問題，做了很多的而改進，但依然存在或多或少的問題，仍然需要不斷懷疑和提高，針對第二版的改進，我會在《產(chǎn)品原型設計之交互體驗的思考過程（二）》中繼續(xù)更新說明。

作者：大圣（微信號wzydml），交互設計師。

本文由 @大圣 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。