APP如何進行視覺優化設計?

視覺優化設計是什么:

視覺優化的特殊性在于已有設計基礎進行再設計。

 

這意味著很多數據評價可以從原有版本中獲得,同時用戶對當前原有視覺設計是有態度的,或喜歡、或習慣、或厭倦,這些都是做優化時需要考慮的點。

 

為什么要做視覺優化:

  • 1. 產品定位及功能發生轉變(產品角度)

  • 2. 提升用戶體驗(用戶角度)

  • 3. 運營及盈利性需求(公司角度)

 

原因不是單一的,直接原因通常是產品或用戶,根本原因永遠都是公司盈利。

分析明確視覺優化的主要原因是產品還是用戶,有助于我們進行下一步設計的思考。

 

如果是由于產品定位及功能發生轉變,這時APP的視覺優化設計應該從新產品定位、目標用戶、使用場景出發功能的變動則需要考慮與原有功能頁面的視覺統一性。

 

我們以微信讀書1.5.6與微信讀書2.0版本為例來分析:

1.5.6版本:讓閱讀不再孤單

功能簡介:基于微信關系鏈的官方閱讀應用,在提供極致閱讀體驗的同時,為用戶推薦合適的書籍,并可查看微信好友的讀書動態、與好友討論正在閱讀的書籍等。

 

2.0版本:這一次試試用耳朵讀書

功能簡介:新增“聽深度解讀”、“定制讀書電臺”功能

新版在【讀書】的基礎上增添【聽書】功能,而聽書功能的目標群體基數有限、并且不是高頻剛需,所以新的頁面視覺設計應減少對原有功能的影響,不應太搶視覺,并注意統一性。

 

以下左側為舊版本,右側為新版本。

【發現】

1. 線性圖標在舊版的基礎上進行加粗,使得分量感變大,更容易識別與點擊。

同時導航欄的字體顏色也進行了相應的加深、更易于識別。

2. 增加了讀書電臺功能;

讀書電臺頁面沿用入口【發現】頁面的卡片式設計風格,保持統一性。

3. [三分鐘講述] 與 [一分鐘朗讀] 的圖標設計雖然顏色和簡潔的風格與過去保持了一致,但是新的圖標圖底關系不明確,可識別性較弱。

 

【我】

1. 圖標由線性-轉為有深淺變化面性,更具個性化,但相比舊版識別性減弱。

2. 取消分割線,強化大間隔色彩,畫面更加簡潔有力;

3. 將“關注”“好友排名”歸為一欄,更具有社交屬性;

4. [通知]與[設置]圖標轉為黑色,之前的藍色有激活狀態的意思,容易使用戶誤解。

 

【書架】

根據用戶持書量、搜索框點擊量,收起搜索欄,采取下拉時激活的方式,使得用戶更加專注集中于眼前的圖書封面。

 

想法:

1. 增加轉發功能、轉發功能樣式與原有評論樣式相結合,統一性強。

2. 書寫評論按鈕轉為黑色,之前的藍色有激活狀態的意思,容易使用戶誤解。

 

微信讀書優化總結:

1. 新版設計設計在保持原有舊版風格的基礎上,刪去了過弱的分割線,強化了過弱的線性圖標、大間隔,使得整體風格對比度可識別性加強,性冷淡風格減弱。

2. 新的聽書功能,由于其定位主要是對讀書功能的補充,低頻非剛需,所以設計優化策略以統一性為主。

 

如果是為了提升用戶體驗,那么應該分析原有體驗的缺陷,充分利用現有數據,來進行優化設計。

 

一、什么是用戶體驗?

用戶體驗,即用戶在使用一個產品或系統之前、使用期間和使用之后的全部感受,包括情感、信仰、喜好、認知印象、生理和心理反應、行為和成就等各個方面。通俗的講,就是我在使用一個新的東西(比如:APP)時,用著爽不爽,比如:顏色好不好看,跳轉頁面流暢度等一系列體驗 。

 

二、用戶體驗分類

1、感觀體驗:呈現給用戶視聽上的體驗,強調舒適性。一般在色彩、聲音、圖像、文字內容、網站布局等呈現。

2、交互用戶體驗:界面給用戶使用、交流過程的體驗,強調互動、交互特性。交互體驗的過程貫穿瀏覽、點擊、輸入、輸出等過程給用戶產生的體驗。

3、情感用戶體驗:給用戶心理上的體驗,強調心理認可度。讓用戶通過站點能認同、抒發自己的內在情感,那說明用戶體驗效果較深。情感體驗的升華是口碑的傳播,形成一種高度的情感認可效應。

感觀體驗、交互用戶體驗、情感用戶體驗是遞進關系,用戶有力感官上的體驗才會繼續使用,繼而有了交互體驗,最終產生情感用戶體驗。

通過以上對用戶體驗定義和分類的了解,為了提升用戶體驗,我們在對一個APP進行視覺優化時,就有了清晰的思路,知道改如何下手了。

那么就應該先分析原有體驗的缺陷,充分利用現有數據,來進行視覺優化設計。

作為一個視覺設計師,我們主要的任務是視覺設計,當然視覺設計的同時,交互體驗和情感用戶體驗也都是要考慮進去的。

視覺設計的目的其實是要傳遞一種信息,是讓產品產生一種吸引力。是這種吸引力讓用戶覺得這個產品可愛。產品其實就有這樣一個概念,就是能夠讓用戶在視覺上受到吸引,愛上這個產品。視覺能創造出用戶黏度。就比如:當你見到一個人,你首先是通過這個人的外貌,才想去了解一個人的內在。

 

我們就以互動性比較強的KEEP軟件為例,在用戶體驗上是如何視覺優化的。

「Keep」是一款優秀的社交型健身 App,曾成為「App Store 2015 年度精選」。輕巧、傻瓜化、隨時隨地是Keep的特點,不同層次、不同需求的用戶都能找到符合自己需求的視頻課程,得到相關的系統性指導,對入門者來說可以避免走很多彎路,科學且人性化的訓練機制則可以幫助用戶更好地堅持下去。

 

這是Keep v4.2.0和v4.5.0的視覺優化前后的對比

在視覺上主要優化了以下幾個地方:

  • 首頁數據展示優化

  • 飲食頁面和飲食指南詳情頁面優化

  • 首頁的【今日】???/p>

  • 跑步頁面優化

 

以下左側為老版本,右側為新版本。

【首頁】

1. 老版本的本周運動時長和本周好友運動排行榜是分散的,影響閱讀,也有優先級排列,布局比較混亂。

2. 新版本做了布局調整,也有所側重,本周運動和本周好友運動排名并排放在一起,關聯性更強,顯示更加直觀清楚;

3. keep主要是以周為計算的,新版本增加周總運動時長,并突出顯示,能讓用戶清楚的知道目前所運動情況,已完成自己設定的目標,時刻提醒用戶;

4. 目標達成天數也顯示從4個增加到7個,剛好可以顯示一周的運動目標達成情況,一目了然,不用左右或者上下滾動,也減少了開發的成本。

 

【首頁-今日??欏?/p>

  • 新版本【今日】???,內容更加豐富,提醒用戶運動的同事讓用戶了解并注意更多有用的信息;

  • 視覺上用圖標來分類顯示更清晰條理,也更友好。

【跑步】

  • 為保持功能一致性,考慮到用戶心理,跑步增加了目標設置和排行榜顯示,讓用戶隨時知道自己當前所在的層次;

  • 跑步按鈕-老版本的純色長方形按鈕變為主色漸變圓角按鈕,整個keep用的圓形比較多,

比如:首頁的目標達成天數,總公里數,icon用的都是圓形,使用圓角按鈕更符合規范,給用戶帶來更好的視覺一致性,也運用了最近比較流行的弱漸變,顯得更時尚。

 

【飲食】

  • 新版本直接放了搜索按鈕,和老版本相比,更簡潔有力,左側的“發現”能讓那個用戶清楚地知道當前所在位置;

  • 新版本為了減少閱讀負擔,重新進行了信息歸類整合,分類更明確,從老版本的四個icon減少為三個icon,早中晚餐到飲食指南中,分類菜譜內容更豐富,按各種類型分類,比如:按照場景、菜式、類型、推薦,提高了用戶的處理效率。

 

【菜譜分類】

  • 分類菜譜里面菜的列表做了優化,在信息顯示上新版本加了關鍵詞和收藏功能;

  • 視覺上采用了常規版式,但干凈清爽,跟食物定義有關,個人覺得老版本看著更高大上,黑色襯底+白色字體,可以在老版本風格上再優化。

 

【飲食指南】

  • 老版本早中晚餐是三個按鈕,需要點擊進入不同的界面才能了解一天需求的菜譜,交互體驗上不好;

  • 新版本把早中午餐,下午加餐和晚餐整合到一個頁面,只需要來回切換,處理起來簡單便捷,頭部還可以清晰看到一天需要進入體內的熱量,每餐中都有餅狀圖對熱量的多少顯示,用戶關心的數據顯示直觀清晰。

 

Keep優化【總結】

新版本的優化主要解決了以下幾個問題:

  • 優化界面信息布局,方便用戶快速找到想要的信息,提供閱讀效率

  • 交互上更加方便快捷

  • 給用戶帶來更好的視覺一致性

 

視覺優化的主要原因不是產品需求改變就是用戶體驗的問題,搞清楚為什么優化,有助于我們更好地設計產品,當然原因也可以是共存的,最終的目的都是為了公司盈利。

來源:學UI網

上一篇: 設計師面試可能遇到的5個問題?

下一篇: 沒有美術基礎,怎么動手畫團隊肖像?

分享到: 更多
通比牛牛亿元赌博案 腾讯分分彩计划软件源码 最新pt游戏平台 幸运飞艇人工计划软件app pk10单双稳赚技巧 时时彩稳赚不赔的玩法 原创36码无错特围 胖妞赌博的规律 时时彩4码投注方法 七彩票开奖查询七星彩 双色球走势图表近50期 双色球61必中计划软件 腾讯分分彩免费计划软件下载 3个骰子怎么玩大小 华彩软件站下载 3d精准6码