最近通過對公司教育云產(chǎn)品的設(shè)計進(jìn)行改版優(yōu)化，又加深了對用戶體驗的理解。主要解決了下移動端教學(xué)資源模塊的一些遺留問題，并在優(yōu)化迭代中進(jìn)行深度挖掘，提升產(chǎn)品體驗。
為什么說是遺留問題，因為初版效果圖出來的時候就發(fā)現(xiàn)了頁面的一些問題，并立即和負(fù)責(zé)此模塊設(shè)計的可愛的妹紙溝通叫其優(yōu)化了一次。尷尬的覺得還是有些細(xì)節(jié)需要優(yōu)化，但是我又一時給不出好的建議，所以就把問題遺留了。存在備忘錄中，這幾天抽時間就來解決了一下。。{打臉}是誰說的時間就像奶牛，擠一擠總會有的。
在頁面設(shè)計過程中，總結(jié)了一些經(jīng)驗與方法，今天想拿來與大家分享交流一下。
0. 背景簡述
此次改版的教學(xué)資源是公司教育產(chǎn)品移動應(yīng)用中主打功能模塊之一，是以資源為中心的共享平臺。
用戶在教學(xué)資源中的主要行為包括：
- 查看和收藏
- 瀏覽文件列表
- 通過關(guān)鍵字快速搜索文件
- 篩選文件
- 預(yù)覽文件等
1. 存在的問題
總體來說就是：默認(rèn)字體較小，列表顯得有些擁擠，操作略顯復(fù)雜，所以針對此次改版的主要目標(biāo)就是提高用戶的使用效率。
2. 改后的優(yōu)點
-
更便捷易用
資源類型這個條件是一個比較常用的選擇，放在篩選條件那一列展現(xiàn)會不易看到全部內(nèi)容。針對這種情況，我決定將它移動到頂部占用搜索欄的位置，類型可左右滑動來選擇。并將搜索移到右上角位置。
此處圖片，為展示的更為直觀，便去掉了多余的文字，用以灰調(diào)調(diào)來展示。
靈感來源：設(shè)計離不開思考，也離不開參考。移到頂部并采用橫滑的操作方式也是參考了諸多APP才如此設(shè)計。所以此處必須給一張頁面截圖，部分包括優(yōu)酷、掘金、慧慧、駕考寶典（學(xué)駕校的必備神器，用后才發(fā)現(xiàn)里面的產(chǎn)品還是做得很不錯的，功能還是還很強大的）、手機(jī)瀏覽器百度頁等。
2.內(nèi)容更突出
下方左圖整個頁面頂部bar顏色太重，太搶眼，進(jìn)入內(nèi)頁首先就會注意到頂部，會干擾到用戶快速的查看頁面內(nèi)容。并且列表頁的內(nèi)容過多、上下間距不夠顯得有些擁擠。
做出的調(diào)整有，第一、去掉頂部bar的藍(lán)色漸變換成無公害的慣用白色，有時候品牌色并不一定需要整個應(yīng)用的頂部都用到，就像QQ在聊天、好友動態(tài)、傳文件到電腦等的頁面都會采用純色作為大背景，來突出頁面內(nèi)容，。第二、列表高度從之前的200px縮小到188px，上下間距由24px加大到32px。把列表高度由原來的112px調(diào)整到132px，標(biāo)題文字由30px調(diào)整到34px，精簡文件類型圖標(biāo)等等。
本著“內(nèi)容為王”的意念，堅定的進(jìn)行著優(yōu)化~~
3.更簡潔
圖標(biāo)優(yōu)化：改版前的文件圖標(biāo)略顯復(fù)雜，占用面積過大，圖形比較復(fù)雜。也因為當(dāng)時沒過多的花時間設(shè)計，直接套用的教育云Web端的圖形。所以決定對簡化圖形、強化圖標(biāo)本身的形狀。之前是根據(jù)文件類型本身的顏色去定義顏色的使用，但是顏色太深，所以整體采用了較亮色值的顏色，更加容易識別。
精簡列表內(nèi)容，隱藏收藏、評論等不常用操作。
4. 結(jié)語
這次的改版讓我對產(chǎn)品有了更深入的了解，更好的懂得以用戶為中心來設(shè)計打磨一款產(chǎn)品。也懂得了根據(jù)用戶的反饋及自測后的使用分析，來更好的指導(dǎo)設(shè)計工作。采用極簡的排版，讓用戶方便快速的閱讀內(nèi)容，提升了用戶體驗。
設(shè)計是一個不斷優(yōu)化的過程，需要設(shè)計師們深入到產(chǎn)品之中細(xì)細(xì)打磨，持續(xù)挖掘產(chǎn)品的可優(yōu)化點，提升產(chǎn)品的使用體驗。
