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

前言：

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

Ⅰ。樣式的意義

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

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

例b.不為視覺而設計：

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

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

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

Ⅱ。整體統一化

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

例a.UI組件庫的最佳化

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

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

例b.圖形歧義：

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

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

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

 

Ⅲ。打破整體統一化

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

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

Ⅳ.GUI標準分層模型

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

結語：

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

文章來源：網易UED