我們接著上期的話題：如何從低保真原型轉(zhuǎn)化為高保真UI頁面的設(shè)計思路(1.分析需求-> 2.尋找參考-> 3.重新布局-> 4.輸出方案)，這期繼續(xù)跟大家分享該設(shè)計思路的應(yīng)用。

項目介紹甲方" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > UI頁面設(shè)計思路-下篇

UI頁面設(shè)計思路-下篇

時間：2023-10-04 07:18:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-10-04 07:18:01 來源：網(wǎng)站運(yùn)營

UI頁面設(shè)計思路-下篇：小伙伴們大家好~

我們接著上期的話題：如何從低保真原型轉(zhuǎn)化為高保真UI頁面的設(shè)計思路(1.分析需求-> 2.尋找參考-> 3.重新布局-> 4.輸出方案)，這期繼續(xù)跟大家分享該設(shè)計思路的應(yīng)用。

項目介紹

甲方客戶：醫(yī)藥商業(yè)公司
業(yè)務(wù)類型：B2B
項目背景：創(chuàng)建一個可以讓甲方企業(yè)內(nèi)部的業(yè)務(wù)員進(jìn)行對外推廣與處理客戶(訂單、物流、咨詢)等日常工作。
需求負(fù)責(zé)人：產(chǎn)品經(jīng)理(李哥)
使用終端：小程序



案例二

頁面名稱：指標(biāo)分析

下圖是產(chǎn)品經(jīng)理提供的原型稿，原型稿從體驗角度雖然能滿足可用的目標(biāo)，可依然存在比較大的優(yōu)化的地方。然而這次優(yōu)先跟產(chǎn)品經(jīng)理進(jìn)行溝通梳理，分析出需要優(yōu)化點避免UI方案被推翻的風(fēng)險。




1.需求分析

針對頁面內(nèi)容模塊進(jìn)行梳理分析，得到以下分析圖：

通過溝通分析，我得出以下幾點優(yōu)化點：

1.頁面的年份信息比重也相對較高，因為常規(guī)的閱讀邏輯是(年-> 月-> 日)，可該年份信息并不明顯而且容易被忽略
優(yōu)化：更換年份切換控件的樣式，重點是讓當(dāng)前年份信息突出明顯；

2.由于需展示12個月的信息內(nèi)容，當(dāng)前首屏只顯示4個月的信息內(nèi)容，用戶查看內(nèi)容信息都需要上下滾動幅度較大，體驗非常不友好；
優(yōu)化：每月的數(shù)據(jù)模塊大小進(jìn)行壓縮，盡可能首屏能看到更多信息內(nèi)容，可以考慮以表格的形式呈現(xiàn)數(shù)據(jù)，因為業(yè)務(wù)員習(xí)慣看表格數(shù)據(jù)；

3.月份信息進(jìn)行了加粗放大的樣式處理顯得格外明顯，可用戶更多的是需要關(guān)注數(shù)據(jù)模塊里面的數(shù)據(jù)信息；
優(yōu)化：適當(dāng)弱化月份信息的比重，但依然保持清晰也能起到充當(dāng)標(biāo)題的作用；

4.數(shù)據(jù)模塊的(銷售金額、毛利、回款金額、毛利率)等信息重復(fù)率高、面占比高，形成了多余的內(nèi)容噪點；
優(yōu)化：弱化這四個標(biāo)題字段，突出用戶關(guān)注的數(shù)據(jù)信息；

2.尋找參考

好~該需求是一個數(shù)據(jù)反饋類頁面結(jié)合需要優(yōu)化的點，金融類APP會比較適合例如支付寶

3.重新布局

結(jié)合參考，以原型稿需求內(nèi)容為基礎(chǔ)，重新快速布局排版為<版式初稿>，然后發(fā)給產(chǎn)品經(jīng)理進(jìn)行溝通。

溝通反饋有以下幾點：

1.年份依然不夠明顯，而且年份控件右側(cè)留白過多；
2.月份數(shù)據(jù)反饋希望能進(jìn)行縱向?qū)Ρ?，?dāng)前選卡方式隱藏了信息還缺乏對比而且需要點選操作，所以體驗并不友好；
3.用戶會優(yōu)先關(guān)注合計里的銷售情況，再會細(xì)看當(dāng)月信息反饋；



結(jié)合以上幾點反饋進(jìn)行調(diào)整，再快速把調(diào)整后的版式發(fā)給產(chǎn)品經(jīng)理并確認(rèn)。




4.輸出方案

與產(chǎn)品經(jīng)理清晰思路并確認(rèn)版式后，結(jié)合之前找到的參考，思路如下：

以下是最終的確認(rèn)UI設(shè)計效果方案




最后再針對6個重點優(yōu)化點進(jìn)行檢查，檢查是否都能滿足

經(jīng)過檢查基本能滿足，然后發(fā)給產(chǎn)品經(jīng)理并通過了方案。




拿原型稿跟確認(rèn)UI方案對比

調(diào)優(yōu)后的UI確認(rèn)方案無論是視覺美觀度得到大幅度提升，而且信息傳遞的速度有所提高也滿足了業(yè)務(wù)的需求，最終還能達(dá)到產(chǎn)品經(jīng)理的預(yù)期并且獲得認(rèn)同。

總結(jié)

結(jié)合(1.分析需求-> 2.尋找參考-> 3.重新布局-> 4.輸出方案)設(shè)計思路套用到其他頁面，我輸出優(yōu)質(zhì)的UI方案效率得到了大幅度提升，重要的是大概率的避免了被產(chǎn)品經(jīng)理推翻重來的風(fēng)險。

另外，通過大量的實例，優(yōu)秀的設(shè)計方案并不是一開始靠設(shè)計師自己想就能做出來，更像一塊玉需要結(jié)合業(yè)務(wù)、用戶、參考等多種元素加進(jìn)行細(xì)節(jié)打磨才可形成具有神韻的美玉。





關(guān)鍵詞：思路,設(shè)計

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關(guān)閉