1.3 注意點 · Html和Css

**1、區分「可點擊」和「被選中」的樣式** 視覺風格，比如顏色，層次的區分和對比，可以更好地幫助用戶使用產品，讓用戶知道自己處在什么頁面，可以跳轉到哪些頁面。要達到這樣的效果，需要將可點擊的元素（鏈接、按鈕）、被選中的元素和普通的文字以相同的規則區分開來。 **2. 盡量使用單列布局** 單列布局能更好地引導用戶自上而下閱讀，而多列布局則會分散用戶的注意力。最好使用有邏輯的敘述來引導用戶，并在文末提供一個呼吁用戶行動的按鈕。 **3. 對比要鮮明** 好的界面重點突出，與周圍的元素區分開。突出重點有很多種方式。你可以讓某個元素使用深色調，和其它淺色調元素區分開；還可以為元素增加陰影和漸變來突然對比；最后，你也可以選擇互補色（比如黃色和紫色）來提高對比度。綜合使用以上方法，就能讓重點從其它元素中凸顯。 **4. 精簡表單字段** 人類生性懶惰，沒有人喜歡填寫一堆表單。表單中每個字段都有可能讓用戶放棄填寫。每個人打字速讀不同，在移動設備上打字更是一件苦差事。盡可能刪除沒必要的字段，只保留那些有必要的。如果真的有很多信息要用戶填寫，試著將它們分散在不同頁面，一頁提交后再填寫下一頁。 **5.不要放太多鏈接** 為了滿足不同用戶的需要，我們可能會在頁面上增加一個又一個鏈接。但如果你的目的是想讓用戶點擊頁面下方那個重要按鈕，每增加一個鏈接，都會降低他點擊按鈕的概率。所以請注意網頁上鏈接的數量，盡可能平衡鏈接和按鈕間的關系。刪除多余的鏈接可以增加用戶點擊按鈕的概率。 **6.循序漸進地引導，不要直接讓用戶注冊** 與其讓用戶倉促注冊，不如讓用戶先進行一些體驗式的操作，通過這些操作向用戶證明產品的價值。這樣的初始互動可以向用戶展示產品功能，一旦用戶看到它們，會更樂意注冊。這種循序漸進的引導盡量推遲用戶注冊的時間，并允許用戶在沒有注冊的情況下進行一些個性化設置 **7. 不要使用太多邊框** 注意力是寶貴的資源，我們在特定時間內擁有的注意力有限。邊框可以定義一個非常清楚和準確的空間，但是它們也會吸引和分散用戶的注意力。為了不過多吸引用戶注意力，在排版時我們可以通過縮小組內元素邊距、增加組和組之間邊距、使用不同背景色、將文字對齊等方法來劃分區域。 **8. 頁面設計盡量保持一致** 當我們按下按鈕，或移動滑塊，我們期望這些元素的行為和以往見到的一致，要做到一致性，得在很多方面下功夫，包括：顏色、方向、行為、位置、大小、形狀、標簽和語言等。但要注意，在一些特定場景下打破一致性的做法仍然有價值。不一致的元素或行為會讓用戶下意識的關注——如果想讓用戶注意，可以嘗試這么做。 **9. 遵循用戶習慣** **10.區分視覺層次** 好的視覺層次能夠區分頁面中哪些元素重要，哪些次要。要做到層次分明，可以從對齊、間距、顏色、色調、縮進、字體大小、元素大小等視覺語言入手，將它們運用得當，用戶就能順暢閱讀。層次分明的頁面，能讓用戶放慢速度，從上到下細細瀏覽。 **11.將相似的功能放在一起** 將相似的功能放在一起是非常基本的原則。大部分人都知道，刀和叉、打開文件和關閉文件要放在一起。將相似功能放在一起符合邏輯，也尊重人類的認知習慣。 **12.增大點擊區域** 把鏈接、按鈕、窗體的尺寸做大，更容易點擊。最好還是把表單字段、按鈕和鏈接做大點。或者可以大小不變，但可點擊區域增大。 **13. 提供解釋、說明和提示** 有些事對我們來說顯而易見，對用戶卻未必。典型如文本字段，要求用戶輸入開放性的內容，所以要提供解釋性說明， **14.簡潔的文案** 用詞簡練，縮短句子長度。寫完初稿后，看看能否在不失原意的前提下讓句子更精練。