一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
一塊設計 | apo design - 設計共筆部落格
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書
訂閱我們
沒有結果
檢視所有結果
一塊設計 | apo design - 設計共筆部落格
沒有結果
檢視所有結果
Home UI / UX 設計

『新手必學』網頁設計技巧-小技巧篇

in UI / UX 設計
by Shuan Wen
5 月 05,2021
4 min read

內容目錄

  • 分配畫面比重,凸顯重要資訊
  • 避免區塊零散找不到重點
  • 資訊的傳遞比美感更重要
  • 有趣的排版,避免版面無趣
  • 適時的留空,讓畫面呼吸
  • 增加細節精緻度,大幅提升質感
    • 深淺穿插的區塊,更容易激發設計靈感

有位剛踏入網頁設計圈沒多久的好朋友,她因為某次的設計稿整個被打槍,失落的來問我意見,第一眼看到心想『哇,也太像 wireframe 了吧!!!』。

主要幾個大問題是:

  1. 內容都正確,但找不到重點。
  2. 看不出品牌獨特性,好像搭在哪個品牌都可以。
  3. 整體看起來平平淡淡,無法吸引我注意。

看了這個實際案例,決定將這些問題整理成一篇文章,分享給設計新手們,如果你也覺得自己的設計看上去沒問題,卻說不上少了什麼,可以參考看看是不是少了這些小技巧!

分配畫面比重,凸顯重要資訊

我在著手設計前,會先與客戶討論哪些內容是網站的核心重點(像是品牌價值、產品特色等),並整理每個區塊內容的層級,避免重要資訊被隱沒。如果頁面很長(像是 landing page),區塊的比重分配就更為重要。

以活動站首頁為例:

  • 獎項介紹:
    會是整頁最重要的區塊,畢竟多數人會想先知道有什麼獎品再決定要不要參與。
  • 活動辦法/目的:
    雖然這是網站的主題,對於使用者而言它較像是獲得獎品的過程,層級上會比獎項介紹低一些些。
  • 注意事項、合作廠商:
    會是較不重要但必需要放的內容,通常輕描淡寫帶過。

資料來源:台灣觀光局




避免區塊零散找不到重點

邏輯跟海報設計一樣,有時候看一張海報會看不出重點、目的、活動時間,甚至找不到主標題!整個畫面像破散的拼圖,要自己拼拼湊湊才能獲得完整資訊。網頁設計也是一樣,如果資訊破碎沒有清楚表達,使用者也會在頁面上來來回回尋找資訊,也容易造成資訊傳遞不完整,以下幾點避免支離破碎的版面:

  1. 清楚的主副關係:
    標題、副標題、內文的層級要清楚,不只字體的大小,顏色、粗細都需要都適時做變化。

    資料來源:https://www.criticaltechworks.com/

  2. 避免沒必要的裝飾:
    這種狀況最常發生在,覺得畫面哪裡空空的,就加個色塊或線條,這樣不只會造成畫面不平衡,而且會讓資訊受到干擾。
  3. 色彩的統一性:
    利用品牌色系延伸,除非品牌是活潑的風格,不然要避免畫面太多色彩讓重點分散。如果品牌色是冷色系,可以多設定一個暖色系來利用,對比色系很容易強調出重點。
  4. 圖像的完整性:
    整個網站的圖像設計要有統一性,才不會每個區塊都不同風格,每個圖像本身也要有主副關係,避免用零散的元素去組成。




資訊的傳遞比美感更重要

網站中的圖像和特效設計能吸引使用者目光,但過度的使用會讓資訊無法順利傳達。經常看到一些很炫的網頁,確實吸引我把整頁滑完,不過我看完只覺得『哇,它的特效好厲害,圖像也做的很用心 blablabla⋯』,但完全不記得內容在說什麼,就⋯把網頁關掉了😂。

設計師在開心的創作版面之餘,也要注意圖像特效和資訊間的比重,避免圖像過於搶眼。




有趣的排版,避免版面無趣

這個剛好跟上面相反,很多新手設計師在拿到 brief 後,只會照著內容把標題和內文一一貼上,像是設計平面文宣一樣,忽略了介面最有趣的互動性,整體完成後會非常像 wireframe。一個好的網頁,會依照不同的內容設計不同的呈現方式和互動性,單調的排版方式可能會讓使用者因為乏味,無法順利獲得資訊,甚至直接關閉視窗。

關於內容的呈現方式可以參考:為網站內容選擇適合呈現方式




適時的留空,讓畫面呼吸

資料來源:https://www.kanarys.com/about

和平面設計一樣,網頁不是越滿越好,太擁擠的版面,不僅不易閱讀,在同一個視窗中傳達太多資訊會造成使用者負擔。

除了注意排版是否過於擁擠外,設定好區塊和區塊間的間距也很重要,要避免區塊黏在一起。




增加細節精緻度,大幅提升質感

我習慣在整個頁面做好後,回頭做一些細節的微調,為畫面添增一些細節來增加精緻感。

如果你看不出可以增加哪些細節,以下整理一些我常調整的方式:

  1. 增加背景層次感:
    例如幫背景壓上不太明顯的紋路,時常用於單一底色,像是格紋可以增加穩定感、紙材紋會讓畫面更有溫度。

    資料來源:https://innovation.vincotte.be/

  2. 標題裝飾:
    標題只是打字太單調不顯眼,可以加底色或利用品牌 CI的 元素做裝飾,有效增加標題份量感。

    資料來源:https://www.kanarys.com/

  3. 圖像的細節調整:
    包括圖形的線條粗細、顏色層次、陰影等。尤其在一系列的 icon 中,要特別注意每個 icon 的線條都有等粗、圓角弧度相同。

    資料來源:https://www.genesisblockchain.io/?ref=hypershoot.com

  4. 思考動態效果:
    畫面是比較乾淨整潔的風格,不適合多加裝飾,可以和工程師討論在動態上增加細節,像是滾動視差、浮出效果等,也能增加豐富感。

細節精緻度不等於零碎的裝飾:
不要因為內容本身不夠豐富,硬是加上裝飾來補救,只會讓版面變得破碎零亂失去平衡。
增加細節的目的是提升質感,不要本末倒置。



深淺穿插的區塊,更容易激發設計靈感

資料來源:https://www.hyperbola.com.tw/

如果客戶沒有特別要求單一底色(或要求整體深色系/淺色系),我非常習慣在沒想法的時候用這個方式來著手設計,能有效打破沒靈感的時刻!

  1. 底色有變化本身就能增加豐富感。
  2. 容易區別區塊內容,增加易讀性。
  3. 容易強調重點(例如:淺色系的頁面插了深底的區塊,一滑過就會非常醒目)。




以上,你也可以和我一樣,習慣在設計稿完成後回頭微調這些細節,讓版面更加分!

Tags: UIUX經驗分享網頁設計
ShareShareShare
Shuan Wen

Shuan Wen

身兼網頁設計師與前端工程師,但熱愛設計多一點。

上一篇文章

幾個 Figma 實用的 Plugin 分享

下一篇文章

前端選課 – 網頁設計實體課程分享

相關文章

使用者經驗訪談,我所學到、獲得的。

使用者訪談,我所學到、獲得的。

by Debby
12 月 07,2022

這篇文章將分享我在接觸訪談前後,發現工作上的差異。 算是整理自己在這期間在實務上學習到的心得紀錄。(?)

《塑思考》那些執行設計以外的選項

《塑思考》那些執行設計以外的選項

by Niki
10 月 26,2022

起初留意到這本書的原因是書腰寫著「不做設計」「不改設計」,內心疑惑著究竟該如何做到呢? 然而《塑思考》內容並非如此,日本極具份量的設計師佐藤卓對於設計有另一番詮...

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

踏入全職接案滿三年了,加上前面兩年待在接案公司的經驗,五年來也經手近百個專案了吧! 儘管接觸了各樣的專案,每次執行時還是避免不了一些錯誤,加上幾次和待在產品公司...

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答
連結至一塊設計 facebook 專頁

標籤

Adobe Xd (3) B2B (1) COVID19 (1) designer (2) design tool (3) Figma (4) functional map (1) HTML (2) illustrator (1) UI (26) UX (18) web design (1) Wordpress (2) 字體 (7) 無障礙網站 (5) 產品設計 (2) 筆記 (4) 經驗分享 (26) 網頁設計 (20) 設計師問答 (1) 設計選書 (2) 課程心得 (1) 講座 (2) 購物流程 (1) 週年企劃 (5) 遠端工作 (2) 電子報 (1) 靈感 (4)
一塊設計 a piece of design

聯絡我們

任何合作或問題請洽:
info@apodesign.tw

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

沒有結果
檢視所有結果
  • 關於我們
    • 團隊花絮
  • UI/UX
    • UI / UX 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書