編者按：這個系列的教程到目前為止有5個章節(jié)，共125個實用技巧，每一個技巧都有案例對比，保證簡單易懂。今天@企業(yè)官網(wǎng)設(shè)計精選?翻譯了第一部分 —— 在網(wǎng)頁設(shè)計中如何引導(dǎo)用戶的注意力。學(xué)會一個就能受用無窮，更別說這一章整整有17個具體的方法了。

在界面中突出強(qiáng)調(diào)一個聚焦點

每個界面都應(yīng)該有一個清晰的起點。用戶應(yīng)該從哪里看起？要設(shè)計清楚。

△ UX策略1 - 在頁面標(biāo)題部分添加視覺對比

通過視覺的層次引導(dǎo)用戶

通過界面引導(dǎo)控制用戶體驗。他們應(yīng)該從哪里先看起，第二和第三步又看哪里？設(shè)計要建立層次結(jié)構(gòu)。

△ UX策略2 - 避免在構(gòu)圖中補漏留白

△ UX策略3 - 使用單列布局

△ UX策略4 - 重疊設(shè)計元素，強(qiáng)調(diào)連續(xù)性

使用格式塔原則進(jìn)行布局設(shè)計

根據(jù)格式塔心理學(xué)，人會通過簡化感知克服混亂。所以我們將事物分組，將元素分類，我們看“整體”。

這些原則包括：相似，接近，閉合，連接，連續(xù)和圖形/背景。

△ UX策略5 - 按照接近性將相似功能或菜單項分組顯示

△ UX策略6 - 標(biāo)題位置與對應(yīng)章節(jié)內(nèi)容更靠近

△ UX策略7 – 限制標(biāo)題與章節(jié)內(nèi)容在同一界限內(nèi)

在不干擾用戶的前提下呈現(xiàn)界面變化

有一些界面變化會發(fā)生在用戶使用期間，這些變化要做到明顯但不干擾用戶。

△ UX策略8 - 用明顯的動畫呈現(xiàn)界面變化

△ UX策略9 - 將出錯的元素區(qū)分顯示出來，錯誤提醒信息放置在表單頂部

刪除或弱化不必要的信息

人的注意力是有限的。不必要的元素會消耗這些注意力。因此，保持用戶專注在重要信息和功能上。

△ UX策略10 - 彈出或模態(tài)窗口背景模糊處理

△ UX策略11 - 在所有圖像中最大限度地提高數(shù)據(jù)墨水比率（讓數(shù)據(jù)更凸顯）

△ UX策略12 – 去掉不必要的邊框

△ UX策略13 - 刪除冗余或不言自明的說明

△ UX策略14 - 隱藏不常用但必要的設(shè)置、功能和信息

提示首屏以下是否還有內(nèi)容

現(xiàn)在大多數(shù)瀏覽器在頁面處于非活動狀態(tài)時隱藏滾動條，你需要“滾動提示”告知用戶首屏以下是否還有內(nèi)容

△ UX策略15 – 通過首屏延伸頁面下方信息元素

△ UX策略16 - 添加陰影以指示深度

△ UX策略17 - 用文字或圖形表示有更多內(nèi)容

未完待續(xù)...

「技多不壓身的設(shè)計師才有高薪資！」

1. 平面設(shè)計：《超贊！設(shè)計師完全自學(xué)指南》
2. 交互設(shè)計：《交互設(shè)計師修煉指南！教你從零開始成為優(yōu)秀交互設(shè)計師》
3. UI設(shè)計：《超實用新手指南！零基礎(chǔ)如何自學(xué)UI設(shè)計？》
4. 前端開發(fā)：《天貓高手來教你！零基礎(chǔ)如何系統(tǒng)地學(xué)習(xí)前端開發(fā)？》
5. 摳圖技巧：《從菜鳥到高手！PHOTOSHOP摳圖全方位攻略》
6. 配色方案：《色彩搭配速成！3個實用方法幫你全面搞定配色》
7. DPI指南：《基礎(chǔ)知識學(xué)起來！為設(shè)計師量身打造的DPI指南》
8. 交互設(shè)計自學(xué)路徑圖：《零基礎(chǔ)入門！給非科班生的自學(xué)路徑圖之交互設(shè)計篇》

原文地址：nickkolenda

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量112萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com