公主的腿间舌奴们np肉_国产在热线精品视频99公交_公主车上荫蒂添的好舒服_公侵犯人妻中文字慕一区二区_公么大龟弄得我好舒服秀_公交车+多人+高cH文章推荐_日本熟妇另类视频在线播放

米大師web改版-設計總結(jié)

2017-7-24    用心設計

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點這里


01項目背景

米大師web是什么?

米大師web是計費平臺部為公司以及合作方提供的,web端泛娛樂業(yè)務支付解決方案。后臺以SDK包提供給業(yè)務,前端以支付彈窗形式適配所有業(yè)務場景。

米大師web改版-設計總結(jié)

為什么要改版?

原版米大師web的后臺和前端還停留在09年,隨著接入業(yè)務增加,用戶的體驗問題也隨之出現(xiàn)。

米大師web改版-設計總結(jié)

(看看舊版的界面,以QQ會員開通為例)

米大師web改版-設計總結(jié)

 

 

02設計目標

改版需要針對已知問題進行解決,設計主要從三個方面進行解決

米大師web改版-設計總結(jié)

米大師web改版-設計總結(jié)

1.零散信息歸類整合,減少表單閱讀負擔

原來版面信息以表單呈現(xiàn),信息分散,影響閱讀。改版把信息重新歸納整合,提高閱讀效率。

米大師web改版-設計總結(jié)

2.按照用戶路徑進行信息分區(qū),優(yōu)化視覺動線

原來版面商品信息和支付信息混雜一起,影響用戶處理效率。改版后按照用戶的路徑“選商品→支付商品”,重新進行信息分區(qū),優(yōu)化用戶視覺動線,提高處理效率。

米大師web改版-設計總結(jié)

米大師web改版-設計總結(jié)

歸納法&窮舉法

改版的最大目標是支付效率的提高。但是由于是場景內(nèi)支付,有彈窗尺寸、業(yè)務情況不同的限制。因此方案需要綜合考慮所有因素,得出限制下的最優(yōu)方案。

米大師web改版-設計總結(jié)

1.歸納法——分析支付方式步驟與頁面的關系

窮舉所有支付方式步驟,得出步驟與頁面的關系的表格

米大師web改版-設計總結(jié)

2.窮舉法——結(jié)合限制,制定最優(yōu)支付方案

根據(jù)步驟與頁面的關系表格,結(jié)合業(yè)務特點、彈窗尺寸限制,窮舉所有情況

米大師web改版-設計總結(jié)

米大師web改版-設計總結(jié)

作為支持多種業(yè)務模式的支付方案,統(tǒng)一各業(yè)務場景下的體驗尤為重要,使其適用于多種業(yè)務,各種屏幕,同時減少開發(fā)的成本。

米大師web改版-設計總結(jié)米大師web改版-設計總結(jié)

 

 

03簡潔舒適的視覺設計

更好的處理信息集合 — 卡片式展示

在主要信息的表現(xiàn)中,合理利用空間,將單個內(nèi)容信息打包,采用卡片式展示,能給用戶帶來更好的視覺一致性,易于操作,也能有效的對同類信息進行了區(qū)分,同時卡片式的展示方式弄夠更好的容納多種內(nèi)容,便于多種業(yè)務模式復用。

米大師web改版-設計總結(jié)

精挑細選的商品卡片區(qū)表現(xiàn)

步驟一:拆解————————————————————————————-

在商品內(nèi)容區(qū)的表現(xiàn)過程中,我們參考了許多競品,拆解出商品卡片內(nèi)容中的模塊和重要的元素,主要從這幾個元素入手,進行組合嘗試,打造最優(yōu)的商品內(nèi)容區(qū)視覺表現(xiàn)。

米大師web改版-設計總結(jié)

步驟二:羅列————————————————————————————-

通過參考和梳理,羅列主要模塊內(nèi)主要元素表現(xiàn)方式,并進行組合嘗試。

米大師web改版-設計總結(jié)

步驟三:重組————————————————————————————-

將區(qū)域內(nèi)整理出來的主要元素進行“重組”,進行嘗試,發(fā)現(xiàn)多種組件形式,示例如下:

米大師web改版-設計總結(jié)

步驟四:判斷————————————————————————————-

組合嘗試,發(fā)現(xiàn)多種方案,通過判斷標準選擇最優(yōu)。

米大師web改版-設計總結(jié)

備注:判斷要有標準。這里我們對方案進行了快速用研,確定了信息的優(yōu)先級:運營信息>主要價格>商品檔位>輔助信息

米大師web改版-設計總結(jié)

最終方案呈現(xiàn)

米大師web改版-設計總結(jié)

 

簡單謙虛的色彩

色彩方面,以顏色中最具有系統(tǒng)性,科技感的藍色為主,同時藍色也是米大師品牌色,頁面區(qū)塊背景部分用簡單的“白-灰-白”進行區(qū)分,使主體內(nèi)容突出的同時減少用戶的閱讀阻力,提供了更舒適的體驗。

米大師web改版-設計總結(jié)

 

統(tǒng)一全平臺的規(guī)范

不同業(yè)務模式商品區(qū)的內(nèi)容都不一樣,我們從每個區(qū)域入手制定共用規(guī)范和可定制規(guī)范,統(tǒng)籌各個業(yè)務模式,使全平臺統(tǒng)一。

米大師web改版-設計總結(jié)

 

規(guī)范的網(wǎng)格系統(tǒng)

利用10×10網(wǎng)格統(tǒng)一規(guī)范頁面,使視覺效果更為舒適的同時,減少設計和開發(fā)的成本,并且可以根據(jù)網(wǎng)格將頁面各個部分進行拆分,為復用多種業(yè)務模式提供了很好的基礎。

米大師web改版-設計總結(jié)

 

04項目歷程

米大師web改版-設計總結(jié)

米大師web改版-設計總結(jié)

藍藍設計tweetduck.com )是一家專注而深入的界面設計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://tweetduck.com

存檔

永寿县| 遂川县| 朝阳县| 桂阳县| 台东市| 宿州市| 昌邑市| 吉隆县| 资溪县| 香港| 定襄县| 武汉市| 延庆县| 长垣县| 名山县| 海晏县| 昌宁县| 安多县| 新源县| 剑阁县| 绍兴县| 航空| 资兴市| 项城市| 云梦县| 巴南区| 冀州市| 绥芬河市| 屯门区| 陈巴尔虎旗| 门头沟区| 大方县| 泰宁县| 于都县| 任丘市| 翁牛特旗| 玉林市| 缙云县| 正阳县| 克拉玛依市| 五华县|