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

淺談 服務型態網站 與 形象網站 的區別

in UI / UX 設計
by Freya Lee
2 月 10,2021
3 min read
圖片來源:www.freepik.com

曾經有個同事問過我「網路跟魔法你要哪個?」印象很深刻當初剛好是魔法系列電影暴動的時期

所以我直接秒答「我要魔法~~」但是在旁邊一個資深的前端卻說「不!沒有網路會活不下去的,當然是選網路!」

又過了幾年,網路已然無限成長到從小到老都必備的社會走跳條件了

當然,有網路就有網站,而網站類型百百種都服務著不同領域的族群們

今天來聊聊服務型態網站(例如:購物、預約、聊天、論壇、觀看影片、觀看文章等等)和 形象網站在設計師眼裡有多大的不同吧!


服務型態網站

這類型的網站會根據服務類型的不同,而有著設計上不一樣的複雜程度

但是唯一的共通點就是,UX 的吃重比例會比 UI 來得高很多

因為服務對象是 大量的人 所以 UI 上的需求度會比較精簡大方,過多的效果反而會搶走了網站上服務的主軸

也因為是一個時間點內,要服務非常多的人「要如何讓網站上的人不會迷路,達到體驗完整過程並完成服務」這件事就變得很重要

所以在一開始畫架構的時候,就必須要非常明確的知道需求以及呈現的內容是什麼,都安排好了以後再繼續往下規劃

舉幾個網站的例子:

圖片來源:youtube截圖
圖片來源:pinkoi截圖
圖片來源:一塊設計截圖

我們在上述三個圖片裡面看到,服務類型的網站都會把畫面按重點比例去切割區塊

然後把一些輔助的按鈕或是區塊放置在上面或是旁邊,去供使用者在網站上做更便利的操作

在此我們可以整理幾個小要領,來提供給大家做服務類型網站設計上的參考

  • 「使用簡單易懂的 Icon」
  • 「網站顏色單一化,使用素色、純色底最好」
  • 「畫面結構切割簡單且注意比重」
  • 「簡化按鈕」
  • 「注意重點需求,是否有都在網站開啟時,第一眼就在畫面上」

當然以上這小小五點只是粗略的注意事項,應付不同類型的網站身為設計師也要和不同部門的夥伴和業主討論

再去留意更多細節和做設計,才能有個很好使用的服務類型網站

其實越大的服務平台、越簡單的設計,都是經過一整個設計團隊化繁為簡的成果~隨著上線營運後,從使用端得到的反饋和建議,一直都要不停不停的更新網站才行!這樣才能一直讓網站進步,讓使用者和設計端還有業主呈現三贏的局面喔!


形象網站

圖片來源:www.freepik.com

主要是在做企業、公司、店家、個人、研究、遊戲、特殊概念…等,針對主題風格去做設計的網站類型。

這種的類型的網站通常設計上的彈性非常大,除了可以滿足設計師的強烈設計慾望,同時前端工程設計師應該也會合作的滿愉快的(如果愛寫效果的話啦~)

酷炫的效果不說,形象網站更像是設計師與觀看者之間的直接對話,如何讓觀看者使用的每一個觸擊,和每一次反饋都有驚喜,我覺得這是會讓設計師在架構網站時,腦內快樂多巴胺的來源 XD

設計這類的網站唯一的遺憾,我想應該只有大多特殊細節體驗的效果,在移動裝置上是體驗不到的 (´;ω;`) 飲恨啊!! 形象網站的舉例太難了~畢竟每天都有很多厲害又帥到不行的網站上線呢。

不過我可以分享一些小小注意事項給大家

  • 「注意你的設計與搭配的效果,是否會影響網站整體的流暢度」
  • 「網站主角是你要呈現的形象風格,互動效果是更加襯托主題而不是搶了風采」
  • 「效果在設計以前,記得和你的前端夥伴討論後再進行」
  • 「要注意搭配效果所製作的圖,是否在 RWD 的時候要另外製作別的版本,才能有更好的觀看體驗」
  • 「在套好效果以後,可以先測試看看效果速度是否合適、或是再做其他圖片調整」

比起服務型態的網站,形象網站往往都能夠留著大家的目光,也是設計師們累積作品集的首選類型 ~ 一個網站的產出絕對需要靠團隊的合作與默契溝通才能誕生,希望大家都能夠在做設計的時候,陶醉在自己手上的專案與設計討論過程。

這次小小的分享是出自我個人在職場上的經驗談,希望大家不吝惜指教和建議想法給我喔~如果你剛好也有一點點收穫,那就太好了:)

Tags: UIUX網頁設計
ShareShareShare
Freya Lee

Freya Lee

Visual Designer. 擅長解決流程體驗產生的設計問題

上一篇文章

讓我們善用 Illustrator 段落設定小技巧

下一篇文章

您可能知道的 UX|基礎應用篇

相關文章

近期 UI/UX 設計資源精選分享!

一塊特別企劃|近期 UI/UX 設計資源精選分享!

by Debby
5 月 02,2023

你平常有哪些關注的 UI/UX 部落格或 IG 以獲得最新設計靈感? 除了工作上要不斷地輸出設計想法,平日會從哪些地方輸入這些設計 Tips 或設計新知呢?本月...

工作五年後最大的轉變

一塊特別企劃|設計師/工程師工作五年後最大的轉變

by Judy Shyu
3 月 31,2023

這個企劃是透過每月一問六答,讓團隊成員能夠回應一些與設計職涯、設計工作內容相關的問題,加強彼此之間的交流和分享,也希望能藉此讓大家有更多闡述自己想法的機會! 那...

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

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

by Debby
12 月 07,2022

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

Back to List

一塊特別企劃

一塊特別企劃|設計師問與答 Part2

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

標籤

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

聯絡我們

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

  • 服務條款
  • 隱私權政策

Follow us

Copyright © 2020 apodesign.tw All Rights Reserved.

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