網易應用下載站WEB端GUI設計的小分享

前言：

網易應用下載站WEB端開發進度日漸收尾，伴隨陸續的測試優化工作，借此機會淺談一下GUI設計實踐上的皮毛經驗。網易應用的特點在於服務用戶下載應用和社交分享，因此GUI的設計作用在於把用戶交互體驗抽象化任務流程和操作方式表達得盡量准確盡量自然：

Ⅰ。樣式的意義

例a.不要分散用戶的焦點注意力：

GUI設計中不應該分散用戶對自己任務目標的注意力。不要讓人們總是去考慮他們正在使用界面。任務操作應該在用戶意識的背景中，而不是前景中。這便 是整個界面的設計定稿所在。首頁的主要任務有觀看應用、下載應用、觀看應用推廣。五光十色的應用圖標和廣告陳列在頁面上，使用簡易清新素色調界面可以調和 色彩濃烈帶來的疲勞感，而且使應用圖標本身更為突出。

例b.不為視覺而設計：

在第一屏內的背景使用了淺灰色漸變背景色並不是純粹為視覺而做。考慮到頭圖切換色調的多樣性，白色底、黑色和深灰色底、飽和色底圖最為常見，假如用白色背景，那白色頭圖融為一體，切換區和預覽大圖被分割為2個部分，頁面斷了。例如：

頭圖加框又稍感畫蛇添足，畫面感細碎。

可見用一個淺灰色底背景解決了頭圖替換成白色的問題，相比以上效果切換區和預覽大圖更為整體，版塊感更強。這樣頭圖切換不同的大底色都可即清晰又整體，背景底色即有單一色值，頭圖與背景色值相同的情況就極為個別了：

Ⅱ。整體統一化

用戶界面應當有利於使用習慣的培養。當使用交互式軟件或者電器時，用戶希望盡可能快速地進入潛意識習慣。他們希望能忽略軟件或者設備，而將注意力集 中在他們的任務工作上，軟件越一致，用戶就越容易使用。界面控件亦是如此，它們的不一致也會迫使用戶不斷的考慮，因而分散了用戶對任務的注意力。

例a.UI組件庫的優化

初稿中的組件較為凌亂，可見按鈕隨意三種樣式的色調，漸變，大小字數皆不統一。關閉彈框符號的小叉也風格迥異。

反復斟酌考量後的優化組件庫中，重要級別和字數，突出側重點相對來說更加清晰明確：

例b.圖形歧義：

制作彈框UI部分的時候，按照交互原型需求順水推舟。後期測試發現其中信息發送回饋彈框警告渾濁不清。。。琢磨其中原來問題處在彈框界面上有2個的 叉寓意處理不妥，大的紅叉表示不合適，不正確的意思。而欄目條上的小灰叉則表示關閉彈框。優化方案顯而易見了：彈框上的小叉保留不變，它在此意義明確，且 十分常見，更涉及界面繁多不易改變；大紅叉相對來說圖形化大於交互功能，修改不受牽制，那麼根據右側說明文案中有不能發送，不能傳輸的意義，所以更改為禁 止通過的符號形象就更加吻合意義了。

例c.組件與常見標准化模型不一致：

用戶評分系統，在策劃雛形之初，評分系統的模型見左下圖（左），模型視覺非常接近常見的進度條Loading模型，而進度條形式顯示完成度，剩余 量，和可能需要處理時間等信息。但評分系統是表示等級分級階梯，並沒有完成度這個信息。建議修改後大眾熟知的五星級模型，最為常見易懂。

 

Ⅲ。打破整體統一化

應用下載是用戶對此站點使用的最後任務達成，最終下載按鈕是此頁最重要的功能鍵。第一版應用下載頁在設計之初，過於強調色調統一，大按鈕被淹沒其中，除了漂亮的應用圖標，其次五顆星則非常凸顯：

其實頁面的主要目的是下載，試分析有一類用戶可能隨意浏覽到此，則輔助信息頗為有幫助，另一類用戶可能是聽朋友推薦後到此下載，輔助信息對他而言用 處較小，但下載的步驟是必須且永遠重要的。優化之後，巨大的按鈕使用了大面積的橘紅和天藍色就一目了然，仿佛在說“快來點我吧”。

Ⅳ.GUI標准分層模型

用戶界面標准可以分為多個層次、每個內部層次范圍更窄。用戶界面設計具有行業級標准。其中一些是針對不同平台的如：Windows、Java，還有 的是公司制定的企業標准，使其產品具有獨特性的、具有品牌效應的外觀。此外，特定產品線中的產品比其他普通產品具有更多相似性。最後也可以為某一個特定產 品開發一些標准，以保證其不同部分之間的一致性。標准的內部層次是對外部層次的補充，而非矛盾。網易應用上的字符色值、和界面的分欄尺寸寬度均按照網易門 戶規范色制定，保持企業標准統一之中添加了更詳細的產品特色標准。

結語：

個人認為好的GUI設計，應該渾然天成，如同生於天地間的自然之物，讓用戶覺察不到設計；這種“平凡”的設計隱介藏形於平凡的生活當中，需要設計師慢慢體會尋覓。以上個人愚見不過是粗陋寡聞盼望高人多多善言指點。

文章來源：網易UED