如何從交互設計角度,進行設計改版?

2 評論 9634 瀏覽 154 收藏 8 分鐘

今天跟大家分享一下如何從交互設計的角度,進行設計改版。enjoy~

作為一枚工作6年有余的老交互,筆者有幸經(jīng)歷、參與過3次比較大型的設計改版:網(wǎng)易新聞5.0改版、宜人貸理財app 3.0改版、愛奇藝app AURA2.0設計改版。

相信每個設計師都會喜歡進行設計改版,因為……這是設計師翻身當主人的光輝時刻??!以往的應用迭代,都會是由產(chǎn)品經(jīng)理提需求并主導,這次終于輪到設計師了。但是,權(quán)力越大,責任也越大。

設計師該如何進行好設計改版,才不至于翻車呢?下面且聽我一一介紹。

總結(jié)一下之前的改版經(jīng)驗,設計改版在交互層面主要有以下4個方面:

  • 交互控件統(tǒng)一:對線上的交互控件進行歸納整理,把不一致的控件挑出來進行優(yōu)化;
  • 功能優(yōu)化:通過可用性測試、交互走查、用戶反饋等手段,優(yōu)化現(xiàn)有版本的交互問題;
  • 導航優(yōu)化:對應用的信息架構(gòu)進行調(diào)整;
  • 動效優(yōu)化:對線上的頁面進行排查,找到動效缺失的地方,統(tǒng)一增加動效。

一、交互控件統(tǒng)一

在交互設計中,經(jīng)常用到的交互控件有:警告框、提示框(toast)、彈出框、簡易菜單、模態(tài)視圖、全屏彈框、上拉菜單、活動視圖、底板。關(guān)于這些控件的iOS和谷歌設計規(guī)范,請參考我之前的這篇文章:3分鐘帶你掌握11個最常用的交互控件

除了以上的控件,按鈕、輸入框、卡片也可以作為交互控件統(tǒng)一考慮。

接下來要做的,是查看應用的所有頁面,找到應用中使用了以上控件的地方,并將這些控件都記錄下來。以警告框為例,以下截取了警告框表格的一部分:

如何從交互設計角度進行設計改版?

當你把應用中所有的警告框都列舉出來,或多或少都會發(fā)現(xiàn)一些不符合設計規(guī)范的地方。這時候,你需要依據(jù)設計規(guī)范,并根據(jù)自己應用的實際情況,對每個警告框提出優(yōu)化建議,就像下面這樣:

如何從交互設計角度進行設計改版?

最后,把你在優(yōu)化時運用的規(guī)則,總結(jié)成規(guī)范記錄下來。之后新設計的警告框,都需要按照新制定的規(guī)范進行設計。

每個控件都按照這樣的節(jié)奏走一波,線上應用的控件就可以都優(yōu)化一遍,同時,你也有了一份交互控件的設計規(guī)范了。

二、功能優(yōu)化

這一部分,主要指對線上比較核心的功能進行走查,找到可以優(yōu)化的地方,提出交互優(yōu)化方案。走查的方法,是使用用戶體驗地圖。

用戶體驗地圖是一種梳理用戶場景和體驗問題的設計方法,它是用可視化的形式,將用戶在經(jīng)歷一個過程中,用戶的所做、所思、所感都分別展現(xiàn),以便更全面地了解產(chǎn)品帶給用戶的體驗。

下面這張圖,展示的是作者舟航制作的用戶在閑魚購買二手商品的用戶體驗地圖:

如何從交互設計角度進行設計改版?

由于圖中將用戶的行為、思考、情緒、痛點都列了出來,尤其是使用曲線圖表示用戶情緒的起伏變化,這對于發(fā)現(xiàn)產(chǎn)品劣勢環(huán)節(jié),十分有幫助。

制作一張用戶體驗地圖,一般需要4步,詳細制作方法請參考以下文章:【設計方法】用戶體驗地圖,了解一下

通過用戶體驗地圖,將線上的功能都體驗一遍,找到需要優(yōu)化的地方并提出優(yōu)化方案,將應用的使用體驗進行提升。

三、導航優(yōu)化

一個應用的導航?jīng)Q定了其最高層級的信息架構(gòu)。所以如果要改動,需要慎重。

網(wǎng)易5.0之前都是采用漢堡包導航:默認展示新聞類型的內(nèi)容,將視頻、音頻等內(nèi)容藏在左上角的漢堡包按鈕里;而5.0的改版決定將導航改成底部tab導航。事實證明,這種導航對于內(nèi)容有更好的曝光,數(shù)據(jù)上升明顯。

如何從交互設計角度進行設計改版?

導航層面的改動,對于產(chǎn)品的內(nèi)容展現(xiàn)有比較大的影響,因此需要與產(chǎn)品多次確認,確??尚行浴?/p>

四、動效優(yōu)化

動效是容易被忽視的部分,其實動效對于一個應用的流暢度有著十分重要的提升作用。谷歌的設計規(guī)范中,總結(jié)了動效的4個作用:

  1. 用戶完成操作的反饋;
  2. 表達元素/頁面間的結(jié)構(gòu)關(guān)系和空間關(guān)系;
  3. 加載時間的掩護;
  4. 展現(xiàn)產(chǎn)品個性,突出細節(jié)美,愉悅用戶。

由于動效沒有比較現(xiàn)成的分類,因此只能靠設計師通過梳理、總結(jié)線上的動效,自己進行歸類。我當時在進行動效方面的梳理時,采用了“先發(fā)散、再整理”的方法,效果不錯。

具體做法是這樣:

  1. 記錄線上頁面已有的和我認為應該有動效的地方;
  2. 從頭開始,對動效的類別進行標記。遇到不能被劃分到已有類別的動效,則新立一個類別;
  3. 對劃分出的類別進行review,查看是否有可以整合的可能;
  4. 對每個類別的動效制定規(guī)范,標記處需要更改動效的頁面。

通過以上的梳理,可以把動效分出幾個類別,并形成動效規(guī)范的基礎(chǔ)內(nèi)容。

以上為大家介紹了設計改版時,交互層面如何進行優(yōu)化,主要包含4個方面:交互控件統(tǒng)一、功能優(yōu)化、導航優(yōu)化、動效優(yōu)化。

#專欄作家#

沐風,微信公眾號:沐風與體驗設計。人人都是產(chǎn)品經(jīng)理專欄作家,2017年度作家評選最佳人氣獎。愛奇藝資深交互設計師。留德海龜,曾任職騰訊微生活、網(wǎng)易、宜信。6年交互設計經(jīng)驗,專注設計領(lǐng)域,歡迎關(guān)注。

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

題圖來自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 歡迎大家加我個人微信,一起交流交互設計:mufengdesign

    來自北京 回復
  2. 我覺得作者在用戶行為漏掉了最重要的一步:價格對比

    來自廣東 回復