18665606093
《網頁設計綜合指南》(2):網頁設計中頁面設計的主題是頁面設計。上一期是網站建設的總體框架設計。本期主要講的是整體框架設計成功后，網站的橫斷面結構設計。網站目錄結構可以看成是一個大框架(不可見)，頁面是大框架中的一個小框架(有形的，用戶的視覺)，頁面設計是從頁面內容、結構、圖片等方面進行的
二、網頁設計中的頁面設計
2.1內容政策
2.2頁面結構
2.3視覺水平
2.4滾動操作
2.5內容加載
2.6按鈕
2.7可視化
2.8視頻
2.9行為響應按鈕
2.10 web表單
2.11交互式動畫
畫
畫
二、網頁設計中的頁面設計
2.1內容政策
內容策略最重要的一點，就是專注于頁面目標。了解頁面的目標，根據目標安排內容。
以下是一些實用技巧，可以提高用戶對內容的理解：
防止信息過載。信息過載是一個嚴重的問題。用戶覺得有太多的信息需要消化，所以無法做出決策或采取行動。有一些簡單的方法可以最大限度地減少信息過載。一種常見的方法是通過塊——將內容分成幾個模塊，以幫助用戶更好地理解和處理它。付賬就是最好的例子。一次最多顯示五到七個輸入字段，將結算表拆分為多頁，必要時逐步公開字段。
避免行話和貿易術語。頁面上出現的每一個未知術語或短語都會增加用戶的認知負荷。一種安全的方法是為所有讀者編輯內容，選擇所有用戶都清楚易懂的文字。
盡量減少長內容。根據信息過載的觀點，如果網站不注重信息消費，盡量避免長文本塊。例如，如果您需要提供關于服務或產品的詳細信息，請嘗試逐步擴展細節。使文本塊更短，更容易理解。根據羅伯特葛寧的書《如何走出商務寫作的迷霧》，為了舒適閱讀，大多數句子應該在20個單詞以內。
避免所有字母大寫。全大寫文字(即所有字母都是大寫文字)對于字符較少的文字，如縮寫、圖標等是可以的；但是，請避免在字符較多的地方使用(如段落、表格標簽、錯誤、注意事項)。正如Miles Tinker在《印刷體的易讀性》一書中提到的，所有大寫都會降低閱讀速度。此外，大多數讀者會覺得所有大寫的文本都不能快速清晰地理解，所有大寫的文本都很難讓用戶理解。2.2頁面結構
結構良好的頁面清楚地顯示了布局中每個用戶界面元素的位置。雖然沒有針對所有頁面的規則，但有一些指導原則可以幫助您創建一個堅實的結構：
(1)使結構可預測。讓你的設計符合用戶的期望。你可以參考類似的網站，找出頁面上需要哪些元素，以及它們的位置。使用目標用戶熟悉的模式。
使用布局網格。布局網格將頁面分成幾個主要區域，并根據區域的大小和位置定義區域之間的關系。借助網格，更容易將不同的部分組合起來，形成一個內聚的頁面。
網格和布局是設計的一部分，可以適應不同屏幕尺寸的設計場景。Adobe XD的布局網格使設計師能夠為不同的屏幕尺寸實現一致的設計，并管理網格中元素之間的比例。
(4)使用低安全線框模擬，避免雜亂和界面不清晰。混亂會讓理解更加困難。每次添加按鈕時，圖像或文本都會使頁面更加復雜。在用實元素構建頁面之前，先創建一個線框，分析一下，然后去掉不是絕對必要的東西。
2.3視覺水平
大多數人瀏覽網頁很快，而不是什么都讀。因此，如果訪問者想要找到內容或完成任務，他們會快速瀏覽網頁并找到他們需要的地方。作為設計師，你應該通過設計一個好的視覺層次來幫助他們。視覺層面是指呈現具有重要性的元素(即先關注哪些，再關注哪些，以此類推)。適當的視覺層次結構可以使用戶更快地瀏覽頁面。
使用自然瀏覽模式。作為設計師，我們可以控制人們在瀏覽頁面時關注的地方。為了給訪問者的眼睛設置一個合適的瀏覽路徑，我們可以使用兩種模式：F模式和Z模式。對于重文本頁面(如文章、搜索結果)，F模式更好，Z模式適合于非文本居中的頁面。
重要元素優先。將頁面標題、登錄表單、導航選項等重要內容作為視覺焦點，讓訪問者可以立即看到。
創建一個模型來說明視覺層次結構。當你有了真實的數據，原型就能看到真實的頁面。在原型中重新排列元素比技術人員開發網頁時更方便，避免開發過程中的進一步修改。
2.4滾動操作
網頁設計師中流傳著一個謊言，——用戶不能使用滾動。重申一下：今天大家都在用滾動！
用戶滾動時改善用戶體驗的一些提示：
鼓勵用戶滾動。雖然人們通常在頁面加載后開始滾動。但是頁面頂部的內容還是很重要的。最上面的內容給觀眾帶來了第一印象和期待。只有當內容有吸引力時，用戶才會滾動。因此，將您最引人注目的內容放在頁面的頂部：提供優秀的介紹。一篇優秀的介紹為內容奠定了背景，回答了用戶的問題：“這個網頁是關于什么的？”
使用吸引人的圖片。用戶密切關注包含相關信息的圖像。
(1)堅持航海。當您創建冗長的頁面時，請記住用戶仍然需要方向感(當前位置)和導航(其他可能的路徑)。長頁面可能有導航問題；如果當用戶向下滾動時頂部導航欄不可見，當他們在頁面底部時，他們將不得不一直向上滾動。最簡單的解決方案是浮動菜單——顯示當前位置，一直在頁面上浮動。
加載新內容時提供視覺反饋。這對于動態加載內容(如新聞)的網頁尤其重要。由于滾動過程中的內容加載很快(基本上在2到10秒內)，您可以使用循環動畫來指示系統正在工作。
不要劫持滾動(也就是不要把滾動操作限制死)。劫持滾動是最煩人的事情之一，因為它奪走了用戶的控制權，使滾動行為完全不可預測。當你設計一個網站時，你應該讓用戶控制他們的瀏覽行為。
不倒翁登錄頁面劫持滾動操作。滾動頁面是固定的，不是免費的。
2.5內容加載
內容加載值得進一步強調。即時響應是最好的，但有時你的網站需要更多的時間向訪問者傳遞內容。網絡連接不良可能導致響應緩慢，或者操作可能需要更長時間才能完成。但是不管什么原因，你的網站都要快速加載。
確保常規加載不需要很長時間。網友的關注度和耐心都很低。根據尼爾森諾曼集團的研究，用戶保持注意力的極限是10秒。當訪問者必須等待一個網站加載時，如果網站加載速度不夠快，他們會感到沮喪，可能會離開。如果加載時間過長，即使設計了最漂亮的加載說明，用戶也會離開。
裝載過程中使用骨架篩。許多網站使用進度指示器來顯示數據正在加載。雖然進度指標背后的意圖是好的(提供視覺反饋)，但結果可能是負面的。正如盧克烏魯布萊夫斯基所說，“根據定義，進度指標是對等待的人的回應。這就像看著時鐘滴答作響——當你這樣做的時候，時間似乎變慢了。”有一個很好的替代進度指標：框架屏幕。這些容器本質上是一個臨時的空白頁版本，信息被逐漸加載到容器中。設計師可以使用骨架屏幕將用戶的注意力集中在實際的進度上，并預測即將發生的事情。這意味著事情正在立即發生，因為信息逐漸顯示在屏幕上，人們在等待的同時看到網站正在采取行動。2.6按鈕
按鈕對于創建流暢的交互過程至關重要。有一些地方值得注意：
確保可點擊的元素看起來是可點擊的。使用按鈕和其他交互元素來考慮如何傳達可用性信息。用戶如何將一個元素理解為一個按鈕？表單應該遵循以下功能：元素的表達式應該傳遞使用模式。看起來像鏈接或按鈕但無法點擊的視覺元素(例如，帶下劃線的單詞不是鏈接或矩形背景的元素，但不是按鈕)會讓用戶感到不知所措。
(1)標簽按鈕滿足用戶的期望。可操作界面元素上的文本標簽應與實際效果相關聯。如果用戶了解按鈕的功能，使用起來會更舒服。以下示例中類似“submit”的文本標簽(太棒了！)，這樣的模糊標簽并不能讓用戶快速理解按鈕的功能。
遵循一致的按鈕規格。不管有沒有意識，用戶都會記住網站的細節。瀏覽網站時，他們會將特定形狀與按鈕功能相關聯。因此，一致性不僅有利于設計的美觀，也增強了用戶的熟悉度。下圖完美的說明了這一點。在應用程序的一部分(如系統工具欄)中使用三種不同的形狀不僅令人困惑，而且很糟糕。
2.7可視化
一圖勝千言。人類是視覺生物，幾乎可以立即處理視覺信息。我們感知并傳遞給大腦的信息有90%是可視化的。形象是捕捉用戶注意力、區分產品的有效方式。與設計良好的文本相比，圖像更容易被觀眾接受。此外，圖像可以跨越語言障礙。
以下原則可以幫助您將圖像應用于網頁：
確保圖像相關。設計中最大的危險之一是圖像傳達了錯誤的信息。選擇最符合您的產品目標的圖像，并確保它們是上下文相關的。
(2)避免一般人的照片。在設計中使用人臉是吸引用戶的有效方法。看到別人的臉，能讓觀眾覺得和他們有聯系，而不僅僅是賣產品。但是很多企業網站都是用常見的照片來建立信任，這是很不好的。可用性測試表明，這樣的照片不會增加設計的價值，但往往會損害用戶體驗。
利用優質資源，不失重點。網站使用的資源質量會對用戶的印象和服務期望產生很大的影響。此外，確保圖像大小適合在每個平臺上顯示。圖像不應該像素化，所以要測試各種尺度和分辨率。以原始縱橫比顯示圖像。
2.8視頻
隨著互聯網速度的提高，視頻越來越受歡迎，尤其是當它們延長用戶在網站上花費的時間時。今天，視頻無處不在。我們在臺式機、平板電腦和手機上觀看視頻。當有效使用視頻時，它可以非常有效地吸引用戶——它傳達了更多的情感，真正給人一種產品或服務的感覺。將音頻設置為默認關閉。當用戶到達一個頁面時，他不想讓它發出任何聲音。大多數用戶不使用耳機。在這種情況下，他們需要快速關閉聲音，并且會受到壓力。大多數情況下，用戶會離開網站。
Facebook視頻會在用戶進入時自動播放，但默認情況下，不會播放聲音。
宣傳視頻盡量簡短。根據D-Mak Productions的研究，短片對大多數用戶更有吸引力。所以，商業視頻要保持在兩到三分鐘的范圍內。
(3)提供另一種顯示內容的方式。如果說視頻是消費內容的唯一方式，那么看不懂、看不懂的人就無法獲取內容。為用戶提供字幕和完整的視頻，以便更方便地獲取內容。
2.9行動號召按鈕
行動號召(CTA)是指引導用戶實現預期目標的按鈕。CTA的重點是引導用戶做我們期待的事情。一些常見的注冊稅務師示例如下：
1、“開始試驗”
2、“下載書籍”
3、“注冊更新”
添加企業微信
18665606093
