全栈工程师?
嗯.....目前并不是!

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

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

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

相信每個設計師都會喜歡進行設計改版,因為……這是設計師翻身當主人的光輝時刻啊!以往的應用迭代,都會是由產品經理提需求並主導,這次終於輪到設計師了。但是,權力越大,責任也越大。

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

總結一下之前的改版經驗,設計改版在交互層面主要有以下4個方面:

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

一、交互控件統一

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

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

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

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

當你把應用中所有的警告框都列舉出來,或多或少都會發現一些不符合設計規範的地方。這時候,你需要依據設計規範,並根據自己應用的實際情況,對每個警告框提出優化建議,就像下面這樣:

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

最後,把你在優化時運用的規則,總結成規範記錄下來。之後新設計的警告框,都需要按照新制定的規範進行設計。

每個控件都按照這樣的節奏走一波,線上應用的控件就可以都優化一遍,同時,你也有了一份交互控件的設計規範了。

二、功能優化

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

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

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

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

由於圖中將用戶的行為、思考、情緒、痛點都列了出來,尤其是使用曲線圖表示用戶情緒的起伏變化,這對於發現產品劣勢環節,十分有幫助。

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

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

三、導航優化

一個應用的導航決定了其最高層級的信息架構。所以如果要改動,需要慎重。

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

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

導航層面的改動,對於產品的內容展現有比較大的影響,因此需要與產品多次確認,確保可行性。

四、動效優化

動效是容易被忽視的部分,其實動效對於一個應用的流暢度有着十分重要的提升作用。谷歌的設計規範中,總結了動效的4個作用:

  1. 用戶完成操作的反饋;
  2. 表達元素/頁面間的結構關係和空間關係;
  3. 加載時間的掩護;
  4. 展現產品個性,突出細節美,愉悅用戶。

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

具體做法是這樣:

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

通過以上的梳理,可以把動效分出幾個類別,並形成動效規範的基礎內容。

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

#專欄作家#

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

本文原創發佈於人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基於CC0協議

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《如何從交互設計角度,進行設計改版?》
文章链接:https://www.pmbear.com/%e5%a6%82%e4%bd%95%e5%be%9e%e4%ba%a4%e4%ba%92%e8%a8%ad%e8%a8%88%e8%a7%92%e5%ba%a6%ef%bc%8c%e9%80%b2%e8%a1%8c%e8%a8%ad%e8%a8%88%e6%94%b9%e7%89%88%ef%bc%9f/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们