當企業產品遇上用戶設計體驗
當企業產品遇上用戶設計體驗
2014.03.11 | 創業

一般人對於企業產品的預期,可能僅停留在功能要強大、訊息要安全、能夠幫助企業提高工作效率。但現在已不同於過去,除此以外,人們開始更注重產品的用戶體驗。那麼,在面對企業產品的設計上,有什麼方法可以提升用戶體驗呢?

以下為大家介紹一些值得參考的企業產品設計案例(附截圖),以及設計Web App時的思考方向。

Web App 設計要點

1.配色

顏色是作為設計師傳達情感的主要元素之一,一個明確的品牌顏色,對信任度、認知度都會有大大的提升。顏色除了能為介面提升美感,也能作為功能上的輔助。在普遍頁面訊息量大的企業產品中,往往一個有顏色的按鈕就很容易吸引用戶的視覺焦點。

Lovely以橙色為主,藍色為輔,淡灰色為底色,淡淡的色調更讓人長時間使用也不覺得疲累,整體感覺和諧舒服,簡潔耐看。

 

Squarespace用的是黑白配,可說是使用黑白配色中的佼佼者。利用大面積的留白、高畫素的圖片,並配合著交互配色,讓你每次打開一個分頁時都存在驚喜,是筆者最喜愛的網頁之一。

 

連icon也盡顯Squarespace的品牌風格。

 

2. 視覺空間

經常會發現,很多設計師在設計Web App及Mobile App時,會被螢幕尺寸所限制住,只專注螢幕內顯示的所有訊息。要知道,網頁及手機介面設計不同平面設計之處在於­——前兩者在螢幕外有無限可能,你可以透過動畫,滑動到一個全新的介面,也可以透過上下左右滾動來查看更多內容。

一個視覺空間處理很棒的例子,來看看Dribbble

 

這個想法在螢幕尺寸有限的Mobile App上更能體現。對比下面兩個設計稿,左邊的留白空間是不是更大氣一些?

 

3. 減少線條

在扁平化設計中、間隔的處理上,嘗試多用色塊之間的對比來取代線條。減少線條可以讓你的介面顯得更簡潔。回頭你可以嘗試一下,在設計稿中儘可能的去掉線條,或許會有耳目一新的感覺。

 

4. 考慮不同尺寸 

由於大螢幕逐漸普及,以往定在1,000px寬度的網站已經不再能滿足於大螢幕下的呈現,因此在設計Web App中需要考慮在不同螢幕尺寸下,介面元素的展示方式。最基本的要求是要考慮好最大(1920×1080)及最小(1024×768)的場景。

這是2014年初的螢幕分辨率統計(資料來源自CNZZ)

 

Mailchimp在responsive的處理非常值得觀摩。

 

想更深入瞭解responsive,可以閲讀來自ISUX的響應式網頁設計一文。

對企業產品設計的啟發

簡單

儘管你的產品背後邏輯很複雜,但在呈現給用戶時務必要操作簡單而有效率。

Trello是一個多人任務協作的Web App,只需用滑鼠一拉,就能輕鬆將任務從一個階段移動到另一個階段。

 

Mailchimp是一個mail製作及追蹤的Web App。在製作過程都提供了一個可視化的模板,基本上只需Drag&Drop(拖拉)及輸入數值,便可完成設計及流程上的所有任務。

 

Invision是一個專為設計師快速製作交互模型的Web App。它的管理頁面在分組上十分方便,可以在任何地點增加分割線,然後Drag&Drop來移動圖片所在的組別。它的交互模形製作過程更是快速高效,而且可以一鍵生成連結發送給其他非Invision的用戶查看。

 

漸進式呈現

許多Web App都有一個通病,就是功能很多,同時又想一次把所有功能告訴用戶,結果就導致用戶第一次進來時,面對一個擁有龐大訊息量的介面,然後還有一大堆新手的提示。很多時候,用戶就會因為手足無措或在體驗中遇到一些挫折而失去了繼續研究下去的衝動。為了增強產品對用戶的第一印象,可以嘗試使用漸進式呈現的方式來展示介面。

以Trello為例,第一次登錄的介面上只會顯示一個項目,用戶很自然地會注意並點擊這個唯一搶眼的元素,進入項目後會顯示一個任務版,點擊其中一個任務再顯示任務詳情。

 

同樣是第一次使用,Trello對比Asana的表達方式是不是讓你輕鬆得多?

 

這種層層漸進式的設計手法能使介面保持簡潔,增強對用戶的第一印象,降低用戶的心理負擔。類似的思維,其實在網頁設計中經常會用到,例如Apple官網一開始只會顯示不同產品的入口,進入特定產品後可以根據自己的興趣點擊查看,去作更深入的瞭解,如果一頁密密麻麻的把所有產品訊息寫滿,這又會是另一種感覺了。更多關於漸進式呈現的說明,可以閲讀由ISUX推薦的設計師要懂心理學

手機式的體驗

適度的使用動畫,能在情感上為產品加分不少。現今html5及css發展迅速,在網頁上經常能看到一些在手機上似曾相識的體驗,這種設計除了讓人覺得特別酷之外,還可以直接延伸到移動的另一端,作為一種體驗上的統一。

Squarespace的抽屜式的選單。

 

Teambition是中國的項目合作類Web App,它的收件匣有如iOS7的通知中心,整體設計也很簡潔易用。

 

結語

企業產品的目的是要服務於企業,服務於人。

一直相信,Apple及Google的極簡理念是給予設計師一個很好的反思點。要把複雜的企業產品設計得簡單有趣是很有挑戰性的。面對簡單,背後需要有強大的技術支持,以及設計師對改善人類生活中細節的關懷及執著,才能真正做到簡約而不簡單。

出自騰訊ISUX

**【活動預告】創業小聚****#39****
**3 月 19 日(週三) 19:00-21:00在犇亞國際會議中心。邀請你知我知好學網營運長林才越Eric、獎金獵人創辦人洛克仔Roxman、CWMoney共同創辦人謝明宏Alan、Muzik Online副營運長徐有鍵Ken、xBeacon創辦人陳洪典。以及曾擔任過天使投資人角色,目前在上海創業的黃紹麟Max,在本場活動將分享:從投資者轉變為創業者角色的心路歷程,以及提出長期對中國市場、對當地創業環境的觀察與剖析。詳見活動網頁

【延伸閱讀】UCD使用者中心設計高峰會
創新的發想往往來自於過往或是身邊的人的經驗,我們同時是生產者,,也是消費者,對於市場的求新求變.許多創新的巧思其實就藏在生活的細節裡,3/27(四)《UCD使用者中心設計高峰會》--數位時代的用戶體驗設計與實踐,邀請到Google Search的資深使用者經驗研究者Tomer Sharon、趨勢科技香港區與台灣區總經理洪偉淦、以及走著瞧Gogolook執行長郭建甫,為我們分享使用者中心設計在產品創新與市場策略的實務經驗。
同時下午將進行主題實作工作坊,帶來四大主題:「透過社群媒體找到有效的消費者研究對象」、「從消費者體驗旅程找到創新機會點」,「使用者中心的數位行銷」以及「電子商務的服務設計」,由美、星、台三地專家親自主持,帶領大家進行實作與演練成果。
活動資訊:2014.03.27(四)09:30~18:00
地點:台大醫院國際會議中心4樓
3/20前把握早鳥優惠,請參考活動網站

 

往下滑看下一篇文章
不只守成,更下一城!看kure.fit、Fullicon、華夏玻璃如何用亞馬遜讓傳產翻轉成國際潮牌
不只守成,更下一城!看kure.fit、Fullicon、華夏玻璃如何用亞馬遜讓傳產翻轉成國際潮牌

台灣上市櫃公司高達七成為家族企業,其中,中小企業佔比高達95%,在二代傳承創新的過程中,不僅面臨信任、制度、認同等管理議題,還必須透過創新思維與數位平台工具打造與持續深化市場競爭優勢,方可在瞬息萬變的市場中生存、茁壯,甚至是成為產業變革者。事實上,這也是kure.fit、Fullicon與華夏玻璃積極透過品牌重塑、擁抱創新科技,以及透過跨境電商佈局全球市場的原因,並且成功在詭譎市場中屢屢創新突圍、締造佳績。

不只是傳承,更透過品牌經營讓家族企業酷起來!

成立於2019年的kure.fit是一間專注於女性健身器材與居家運動的品牌,透過亞馬遜美國站、英國站與中東站進行產品銷售,2025年上半年度,創下美國銷售年成長率358%好成績。kure.fit創辦人暨執行長黃永沅認為其中的關鍵是:「提供客戶高價值產品與服務,並透過亞馬遜全球開店快速拓展站點創新局。」

亞馬遜全球開店
kure.fit創辦人暨執行長黃永沅分享品牌打造經驗時,提到父親常說「服務」是家中工廠發展最關鍵的因素,這也是他創業以來一直銘記在心的價值。
圖/ 數位時代

黃永沅的創業故事——kure.fit 的成立——與家族企業息息相關。他說:「我父親黃泰翔擁有敏銳的市場嗅覺,幾乎你想像得到的消費性居家電子產品,我們家都生產製造過。為跳脫傳統製造思維、進一步擴展全球布局,2019 年回到家族公司後,我開始積極導入數位化與數據化手法以維持市場競爭力,同時也嘗試建立品牌,透過亞馬遜全球開店進軍海外市場,讓 kure.fit 在 2024 年憑藉可調式啞鈴組、壺鈴、加重手環等商品大幅提升營收獲利。」

他坦言,選擇亞馬遜全球開店,是綜合研究過市場及相關條件的必然之選。「台灣具有高度彈性的製造實力,卻苦無與全球用戶直接接觸的機會;而亞馬遜正好打開了這扇窗,讓我們能用最經濟、高效率的方式快速測試、修正與擴張,對新品牌來說,是極具價值的通路。」

他進一步補充:「上一代累積的資產讓我擁有比較多的機會探索與試錯,而亞馬遜全球開店則讓我可以用最具成本效益的方式布局全球市場。」例如,透過參與亞馬遜全球開店官方團隊為賣家提供的在地支持計畫與課程,kure.fit獲得一次性的帳號健檢、選品分析、營運問題排除,以及 1 對 1 經理輔導,大幅提升全球布局與品牌行銷的能力。

類似的二代傳承與創新旅程也發生在保健收納藥盒創新品牌–護立康(Fullicon)-身上。Fullicon副總經理李承樺認為:「二代不是只能接班,相反的,可以透過自有品牌創業、以亞馬遜全球開店將產品服務推向全球各地,創造嶄新的營收獲利。」

把時間回溯到2019年,為解決OEM與ODM客戶削價競爭亂象,李承樺在家人與客戶的支持下,啟動自有品牌–護立康(Fullicon)上架亞馬遜拓展業務,爾後,透過產品設計、功能強化、專利佈局與亞馬遜全球開店擴展國際市場業務,不僅成功將藥品收納盒打進日本站前三的成績、創下4.8/5的高消費者評價,更榮獲亞馬遜全球開店2024年度傑出賣家–「最速全球布局轉型獎」–的肯定。

亞馬遜全球開店
Fullicon副總經理李承樺分享,加入亞馬遜之後,透過世界級的品牌與市場資訊,他更了解專利的重要,經過多年努力,目前專利已經成為Fullicon營收來源一環。
圖/ 數位時代

對台灣百年玻璃製造商–華夏玻璃–來說,傳承固然重要,但是,唯有突破既有框架才能創造第二成長曲線,因此,成立自有品牌–SOUL ONE,透過亞馬遜全球開店銷售自有產品以深入了解北美消費者輪廓,例如對玻璃製品的需求與偏好,進而提供最佳產品服務,為前進北美零售商店市場做最佳準備。

華夏玻璃執行長廖冠傑進一步解釋會加入亞馬遜、以亞馬遜全球開店布局北美等國際市場的原因有三:「首先是品牌形象佳、是北美消費者喜愛的購物網站;其次是可取得消費者回饋聲音以及後台提供豐富的市場洞見,讓團隊成員可以快速調整產品、包裝與行銷等策略;最後是透過功能強大的亞馬遜物流(FBA)機制輕鬆擴展全球業務。」

從上述的kure.fit、Fullicon與華夏玻璃SOUL ONE的布局,可以清楚看到:二代不僅是傳承與守成,更是主動出擊與翻轉市場的關鍵推手,讓家族企業經營也可以很酷且創新。

亞馬遜全球開店
華夏玻璃執行長廖冠傑於專訪時指出,作為企業核心的決策者,在面對爆炸的資訊與選擇時,更應該專注而冷靜,謹慎為公司營運做出最適切的選擇。
圖/ 數位時代

亞馬遜全球開店助二代繼承者高效打造品牌與布局全球業務

亞馬遜全球開店不僅讓企業以自有品牌布局跨境電商,更有助於企業重整商業邏輯、發揮OEM、ODM與OBM的經營綜效。對此,Fullicon副總經理李承樺面帶微笑地解釋:「我們公司–益麟企業–的業務分成三塊,分別是負責台灣市場的業務部門、以官網與參展等方式經營的OEM與ODM外貿部門,以及由我負責的、透過亞馬遜全球開店布局的全球電商部門;其中,電商部門的營收雖然僅占公司整體營收的一小部分,但帶來的成效遠超乎預期。」

首先是產品開模與製造後即可直接(透過電商)銷售,不像過去必須花費1到2年的時間跑市場與找客戶;其次,可以直接傾聽客戶心聲以加速產品功能的迭代與優化,例如方便關節炎患者取用藥品的彈跳保健盒設計等;最後則是挹注外貿業務發展。李承樺表示:「我們有韓國客戶因為看到亞馬遜的Fullicon藥品收納盒而主動找上門、向外貿部門下單,開啟跨業務單位的合作綜效。」

kure.fit創辦人暨執行長黃永沅則直言:「做工廠最怕離消費者太遠。」需要像亞馬遜全球開店這樣的外部夥伴提供協助,讓kure.fit可以突破區域限制、深入了解各個市場脈動,為每一個產品找到新出路。例如,亞馬遜商機探測器與選品指南針等官方選品工具讓kure.fit可以同時掌握產品類別與市場資料以高效布局新市場,如將女性健身器材銷向中東等新市場,讓品牌營運穩健邁向全球市場。

「企業的創新轉型旅程是一個又一個關鍵決策交織而成,亞馬遜提供的數據資料讓我們可以更精準且有憑據的下達各項決策,以更有責任感與使用感的方式推進二代傳承與創新。」關於亞馬遜全球開店帶來的綜效,華夏玻璃執行長廖冠傑如是總結。

總的來說,二代接班不僅是傳承,更是品牌重塑、通路重組與文化再定位的新起點,在這個過程中,與亞馬遜全球開店這種世界級企業合作,不僅有益於簡化傳統外貿的繁雜談判流程,更讓台灣企業可以更精準且高效的方式布局全球、透過出口電商快速回應市場需求,進而加速創新步伐與鏈結業務績效,讓台灣企業走出新路、演變為令人驚豔的「酷」品牌關鍵。

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
蘋果能再次偉大?
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓