產(chǎn)品原型設(shè)計(jì)之交互體驗(yàn)的思考過(guò)程(二)

4 評(píng)論 15129 瀏覽 124 收藏 8 分鐘

接著上一篇《產(chǎn)品原型設(shè)計(jì)之交互體驗(yàn)的思考過(guò)程(一)》,這篇主要針對(duì)微記第二版的原型設(shè)計(jì)調(diào)整的思考過(guò)程作一下詳細(xì)的說(shuō)明。

下面這張是最初微記原型的設(shè)計(jì)稿

最初微記原型的設(shè)計(jì)稿

說(shuō)明一下第一版存在問(wèn)題,以及是怎么發(fā)現(xiàn)的。

一開(kāi)始還是針對(duì)每一篇微記設(shè)計(jì)開(kāi)始說(shuō),微記設(shè)計(jì)共有三種形式

  • 圖片+文字
  • 純圖片
  • 純文字

對(duì)于圖片+文字

第二版的設(shè)計(jì)結(jié)構(gòu)是 ?第一部分【用戶頭像、昵稱、發(fā)表時(shí)間、點(diǎn)贊】+第二部分【圖片】+第三部分【標(biāo)題文字內(nèi)容】

對(duì)于第一部分和第三部分,基本沒(méi)有什么問(wèn)題,主要針對(duì)第二部分,多照片的展示設(shè)計(jì)

現(xiàn)在的展示方式,優(yōu)先展示用戶選擇的第一個(gè)照片,其余照片集中放在左上角,原則上是沒(méi)有什么問(wèn)題,但是給人的視覺(jué)太擁擠,沒(méi)有一張圖片是完整展示的,一張照片沒(méi)有問(wèn)題,但是一旦照片多了,就會(huì)遮擋第一張照片,造成視覺(jué)困擾。所以我決定將這塊部分改一改。

首先,打破第二、三、四…圖片放在第一張上的設(shè)計(jì)形式,希望所有圖片統(tǒng)一大小展示或者相互之間不干擾,一開(kāi)始,我是選擇了使其圖片統(tǒng)一大小展示,然后將第二部分位置相對(duì)寬度增加了一些,使其看起來(lái)比第一和第三部分寬一些,重點(diǎn)突出第二部分。

下面是我修改之后微記(圖片+文字)的原型設(shè)計(jì)稿

修改之后微記(圖片+文字)的原型設(shè)計(jì)稿

羅馬不是一天建成的。當(dāng)然,設(shè)計(jì)稿也不是一兩次就可以定稿的,修改之后,設(shè)計(jì)方面沒(méi)有問(wèn)題,但是交互卻有些別扭。讓用戶在上下滑動(dòng),然后時(shí)不時(shí)的左右滑動(dòng)查看圖片,并不能方便用戶查看微記,用戶體驗(yàn)并不流暢。

于是,還是選擇用戶與圖片之間采用點(diǎn)擊的響應(yīng)方式,但是要使他們之間相互不干擾。

下面是我再次修改之后微記(圖片+文字)的原型設(shè)計(jì)稿,已經(jīng)定稿

再次修改之后微記(圖片+文字)的原型設(shè)計(jì)稿,已經(jīng)定稿

下面是微記純圖片和純文字的原型設(shè)計(jì),還有到目前為止微記功能界面的原型設(shè)計(jì)稿

微記功能界面的原型設(shè)計(jì)稿

當(dāng)時(shí)拿著這一版給一些用戶做測(cè)試的時(shí)候,明顯較比前一版本用戶體驗(yàn)流暢許多,但是也仍然存在著一些預(yù)期沒(méi)有想到的問(wèn)題。為了讓大家了解,我后面微記調(diào)整的一些方法以及原因。我在這里把目前這稿的問(wèn)題說(shuō)一下:

  • No.1:日歷圖標(biāo),大部分用戶并沒(méi)有點(diǎn)擊,然大部分用戶沒(méi)有點(diǎn)擊的原因,是以為“這只是個(gè)圖片而已,并不具有交互功能”;
  • No.2:前一天和后一天,有一些用戶表示,自己能看的內(nèi)容可能有限(用戶多了,自然內(nèi)容會(huì)增加,這點(diǎn)并沒(méi)有做太多的考慮)

針對(duì)第一個(gè)(No.1)的原因,我將日歷圖標(biāo)放在了“添加微記”的上面,在這里說(shuō)明一下,考慮到兩個(gè)圖標(biāo)比較多,可能會(huì)影響到用戶瀏覽微記,所以這兩個(gè)圖標(biāo)的交互動(dòng)作,當(dāng)用戶向上滑動(dòng)屏幕瀏覽時(shí),兩個(gè)圖標(biāo)消失,當(dāng)用戶停住或者向上滑動(dòng)時(shí),兩個(gè)圖標(biāo)出現(xiàn)。

下面就是我修改之后的微記原型設(shè)計(jì)稿

修改之后的微記原型設(shè)計(jì)稿

這樣就很好的解決了“用戶認(rèn)為日歷只是一個(gè)圖片的圖片”,這樣設(shè)計(jì),“日歷”交互功能顯而易見(jiàn),也更加方便用戶查看點(diǎn)擊。

現(xiàn)在整體微記的設(shè)計(jì)是沒(méi)有問(wèn)題的,那就要進(jìn)行更深入的思考,從整體功能性考慮,日歷圖標(biāo)的出現(xiàn)和我將微記展現(xiàn)形式用“昨天、今天、明天”的形式呈現(xiàn),是否功能方面有些沖突。兩者的存在意義是否有點(diǎn)相同。

我有在《麥粒-其產(chǎn)品原型設(shè)計(jì)的交互思考過(guò)程(一)》中說(shuō)過(guò):微記,通過(guò)圖片和文字為家庭成員記錄他們每一刻、每一天的生活點(diǎn)滴,創(chuàng)造全家人的共享記憶。而日歷的功能其實(shí)已經(jīng)滿足用戶用“天”的方式來(lái)查看微記,“昨天、今天、明天”的設(shè)計(jì)形式,似乎顯得多此一舉。而且如果去掉可以使用戶可瀏覽的內(nèi)容增多,所以我決定放棄之前的設(shè)計(jì)方式。

我便直接將其去掉,原型設(shè)計(jì)稿如下圖所示:

原型設(shè)計(jì)稿

最后,產(chǎn)品經(jīng)理希望用戶可以隨時(shí)發(fā)表微記,而不是只在一個(gè)功能界面,于是我將導(dǎo)航移動(dòng)到界面的底部,將“添加微記”放在了中間位置。

設(shè)計(jì)稿如下:

設(shè)計(jì)稿

我從第一版的設(shè)計(jì)到現(xiàn)在最后定稿的原型,給大家展示一下,方便大家從整體、從細(xì)節(jié)查看其中的變化與思考過(guò)程:

第一版

微記版面開(kāi)始縮小,內(nèi)容開(kāi)始精簡(jiǎn),出現(xiàn)上方時(shí)間導(dǎo)航

圖片展示方式開(kāi)始變化

圖片展示方式變化,日歷圖標(biāo)發(fā)生變化

4個(gè)tab位置發(fā)生變化,添加微記圖標(biāo)位置開(kāi)始變化

 

這只是產(chǎn)品其中的一個(gè)功能界面而已。之后我會(huì)繼續(xù)更新更多文章或者作品…

 

作者:大圣(微信號(hào)wzydml),交互設(shè)計(jì)師。

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

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 不錯(cuò)不錯(cuò)!

    來(lái)自廣東 回復(fù)
  2. 學(xué)習(xí)了!謝謝分享

    來(lái)自廣東 回復(fù)
    1. 后續(xù)會(huì)繼續(xù)更新自己關(guān)于交互設(shè)計(jì)、用戶體驗(yàn)方面的文章,期待繼續(xù)交流 ??

      來(lái)自浙江 回復(fù)