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

商業模式如何影響 UI 設計

in UI / UX 設計
by Debby
10 月 07,2020
3 min read

內容目錄

  • 1. 從核心理念與目標確認,什麼是重要的
  • 2. 從乾貨、大量資源學習畫面、應用
  • 3. 試著理解商業模式如何影響設計 – 以 Banner 設計為例
  • 結論:沒有絕對的設計,只有找出當下適合的設計
商業模式如何影響 UI 設計

為什麼會寫這篇文章呢?是因為筆者最近在 UI/UX Design 社團看到一篇發文討論,原文大致是一間公司的 PM 詢問社團內的人有沒有推薦的實體 UI 課程,他想讓公司內的設計師上課,因為內部的設計師原本是平面設計師後來想轉 UI 設計師,但網路上大多都是針對 UX 或是如何使用軟體的課程。

前面所述的內容和標題又有什麼關聯呢?原先我也像提問者想要給設計師找課程那樣,在坊間或是網路上找各種課程或是讀各種 UI / UX 設計的乾貨,剛開始以為應該就這樣了吧!

事實上,真正踏入這個領域後,才發現沒有所謂學完或學到完全適用的一天,因此底下我將分享哪些因素會影響設計:

1. 從核心理念與目標確認,什麼是重要的

在設計職涯的過程,不乏會遇到產品或客戶丟一個產品或 Logo ,請設計師協助找到品牌定位、風格、設計等;這也是在這次的 Redesign 和創立這個部落格時,我決定不要讓這件事發生,我決定不管如何先確定『我們的核心價值』,這樣我們才可以建立過程中專注在什麼才是對我們真正重要的。

如果我們的核心價值是『尊重每一個設計師自身的設計經驗分享』 、我們同意這個目標,那麼這個部落格就是要以作者群『容易編輯、持續發文』比『如何吸引更多觀眾、點擊量』更重要,首要處理的是什麼平台對作者群友善、不受社群平台影響,讓大家可以自由、平等的分享想法的平台。

因為這樣的目標決定了平台、技術、流程、作者群、合作方式等,這些決定是優先於畫面的,當前面決定需求、功能後,之後在設計畫面時就變得相當快速。

2. 從乾貨、大量資源學習畫面、應用

剛開始踏入網頁設計的領域時,不停的看國內外乾貨[1]文章、各式教學、追蹤各式網站設計的平台、在 Pinterest 儲存大量網頁設計圖,每篇乾貨、每個教學都有其道理,但並不是每個都適用,有些會想用上專案,然後試著創造出吸引人、好看、有趣的畫面,那時學習頁面的視覺風格會是如何、每個頁面之間的關係。

如果遇到不確定的按鈕擺設,就會開始逛大量同類型的網站或做相同動作但不同網站的頁面設計。例如『加入購物車』 這個按鈕樣式和位置,就會去比較大型購物網站像是蝦皮、Pinkoi、PChome 等,分析他們是會如何設計按鈕等。

但同樣是『加入購物車』的按鈕,不同的網站卻有的固定在底部,有的固定右側欄,可能旁邊還會加上『直接購買』的按鈕,這樣只能大致猜測不同網站可能會因為版面、客群、風格等各項因素,所以會有這樣的設計,但真正確切的原因很難得知了,不過可以確定的是光一個動作的按鈕,可以有各種形式呈現。

3. 試著理解商業模式如何影響設計 – 以 Banner 設計為例

購物商城的 Banner 設計,只要網站有牽扯到『購買產品』這個行為時,那麼在首頁最上面顯示輪播圖肯定就會是最好的宣傳版位吧!可以讓行銷團隊一次主打很多商品、又能讓使用者看到我們有如此多的產品,這不就是最好的作法了嗎!?

誒,這麼說也對也不對,因為不同品牌就有不同的商業考量,其中一個例子是 Apple 官網上沒有做 Banner 輪播設計,他的首頁最上面一次只會主打一個產品。同樣再看 Nike 的官網也是展示一個產品或當月的 Campaign 。

為什麼會這麼做呢?可能是商業考量、可能是品牌個性,準確的原因我們無從得知,但我們可以推敲也許是讓使用者專注一次一個產品,於是他們會使用強而有力的文案、精美的圖片,一個適切大小的 CTA 按鈕,既能留住使用者目光又能讓他們映象深刻。

Apple 首頁
Nike 官網



後來我在處理類似版面時,也很單純的加入 Banner 輪播的設計,讓各種活動、產品爭相利用這個版面宣傳。但最後我調整了設計,沒有採用輪播的設計,而是改成單純底圖、品牌文字與 CTA 按鈕。

為什麼呢?

如果是輪播設計,我思考著:有哪些廣告需要宣傳?有多常會更新?我們有需要維護 Banner 的視覺達到品牌一致性嗎?會需要由哪些人使用、企劃這個版位?

如果原本的團隊本來就比較少更新這個版位,也很少利用,那麼真的需要使用輪播的方式呈現嗎?這樣真的是對團隊和品牌、公司都是有利的嗎?

後來,和團隊討論的結果是與其無法掌控 Banner 的數量、維護和更新成本,不如選擇一個可以呈現品牌核心理念、或是強調我們的優勢視覺,放在這個位置 – 只做一個畫面,但是文字、畫面、按鈕要到位。這樣可以減輕我們在維護上面 Banner 的成本,而先關注於優化內容上。也許之後等品牌成長、改變行銷方式或商業策略,再改成 Banner 輪播的方式。

結論:沒有絕對的設計,只有找出當下適合的設計

所以,沒有一個作法、版面設計是絕對正確,或是永遠正確的。因為每一間公司、個人,團隊內部經費、資源、目標都不同,你無法將一個版面設計的基準套用在另外一個網站上,最重要的是要因應需求找到當下比較適合的作法。

我們必須假定每間公司、每個專案在不同時間點的成功定義,也不盡然相同;像是有可能是為了提高銷售量、推銷品牌讓更多人知道又或者是有效地傳達理念等,如果是這樣的目標,那麼不就有了標準嗎?只是這個標準可能只適用在 A 公司。

因此,當考量一個版位設計時,除了參考不同網站或品牌的設計,不妨也試想一下為什麼他們會做這樣的設計呢?如果是套用在自己的產品或公司身上,適合嗎?亦或者,如果是你又會是怎麼樣安排的呢?

以上,如果你對此篇文章有任何建議或問題都歡迎再透過 E-mail 回信給我們,
讓我們知道你的想法 : )

謝謝你的閱讀!

1.  👆 乾貨:網路上常見的乾貨意指知識或經驗被精簡成可被快速閱讀、吸收、具有明確指示文章或短文,內容沒有過多的鋪陳;由於內容就像食物乾貨一樣,沒有拖泥帶水填充,而是精煉出扎實的內容,因此被形容成『乾貨』。
Tags: UI經驗分享
ShareShareShare
Debby

Debby

Web designer. CSS / Figma Lover. 🍹

上一篇文章

筆記|網格到底怎麼用?(一)

下一篇文章

Figma V.S Adobe XD 比較心得 : (一) Figma 篇

相關文章

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

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

by Debby
12 月 07,2022

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

接案設計師的常見盲點

接案設計師的常見盲點

by Shuan Wen
7 月 06,2022

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

來做作品集吧!|網站作品集製作心得

來做作品集吧!|網站作品集製作心得

by sanmu
6 月 22,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 設計
    • 工具分享
  • 美感養成
  • 設計職涯
  • 設計生活提案
    • 展覽 / 活動分享
    • 設計選書