當企業產品遇上用戶設計體驗
當企業產品遇上用戶設計體驗
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前把握早鳥優惠,請參考活動網站

 

往下滑看下一篇文章
重塑世代的起點!BMW Neue Klasse 以傳奇之名開創未來移動新紀元
重塑世代的起點!BMW Neue Klasse 以傳奇之名開創未來移動新紀元

當前資訊爆炸與人工智慧交織的時代,全球豪華電動車壇不乏以規格參數堆疊或繁複華麗行車介面構築而起的新世代車款。然而,當諸多品牌積極將旗下新世代車款朝向「四輪電子產品」為目標發展時,百年造車巨擘 BMW 卻選擇回歸最純粹的造車目標,重新思考要如何以一款全新的車,來定義下個世代的駕馭體驗。

BMW 給出的解答,是一個貫穿品牌歷史、代表革新的名字:Neue Klasse。這不是單一車型的行銷話術,而是一場從零開始、重新定義 Software-Defined Vehicle(SDV,軟體定義汽車)的軟硬體融合革命!

拒當裝上車輪的 iPad!Neue Klasse 建置全新融合架構

將時間軸線拉回 1960 年代,BMW 曾以第一代 Neue Klasse(BMW 1500)打破典範,化解危機並確立超過半世紀的品牌榮耀。1960 年代的 Neue Klasse 是一場深刻影響汽車工業的世紀革新,精準填補了豪車與小車間的市場缺口、開創全球「運動房車」全新級距,更奠定品牌「以駕駛者為中心」的設計語彙,寫下 BMW 接下來半個世紀的靈魂藍圖。發展超過一甲子後,BMW 再次啟用「Neue Klasse」此對於品牌擁有重要意義之傳奇系列。這絕非強調行銷的懷舊或是復刻手法,而是 BMW 期望再次從歷史中汲取經驗,當產業再次面臨典範轉移之際,BMW選擇主動出擊,重新定義自身。Neue Klasse 的誕生,並非賣弄懷舊情緒,而是選擇在電動化與數位化交叉口,主動定義未來的造車標準。

1961 年法蘭克福車展上首度亮相的 BMW 1500,象徵品牌從產品到營運思維的全面轉變。當年的革新勇
1961 年法蘭克福車展上首度亮相的 BMW 1500,象徵品牌從產品到營運思維的全面轉變。當年的革新勇氣,不僅化解了企業危機,更奠定了半世紀以來豪車市場的典範。
圖/ BMW

過往,汽車或許只是將人們從 A 點運送至 B 點的交通工具;但在數位與電動化浪潮推動下,許多車廠僅將「軟體定義」理解為頻繁的 OTA 升級或介面更換。然而,BMW 認為真正的 SDV 意義,必須是造車思維的全面革新。Neue Klasse 建立在一套全新的軟硬體整合架構上,將電子電氣架構(E/E Architecture)、電驅技術、數位互動與永續生產全面重構。BMW 不是被動的將新科技「塞入」舊車殼,而是從基礎的運算邏輯出發,打造一套能持續進化、且品牌靈魂不滅的新世代移動工具。

簡而言之,Neue Klasse 象徵 BMW 從產品設計、電驅科技、數位互動到生產思維的全面重塑,成為開啟下一個純電百年的關鍵轉型起點。

解開多螢幕堆疊的產業迷思!「全視域顯示系統」重構人機介面

Neue Klasse 如何道出品牌自身對於 SDV 的重新解讀,可以從座艙科技介面談起。當前新能源車市場普遍陷入「多螢幕競速」的迷思,過多、過大的螢幕與複雜的子選單,反而導致駕駛人注意力嚴重分散,成為當代人機介面(HMI / UX)於設計面與使用面向的重大痛點。

BMW 秉持駕馭至上的造車理念,在 Neue Klasse 架構下研發出顛覆性的座艙科技:「BMW Panoramic Vision 全視域顯示系統」。

此項技術突破性的將前擋風玻璃下緣全寬度轉換為高解析度顯示區域。結合 3D 車況抬頭顯示器與駕駛導向懸浮中控螢幕,所有關鍵行車資訊都精準投影於駕駛者最自然的視線水平線上。

配合零層級架構的介面設計與獨家專利塗層,即便在強光直射或戴墨鏡下也能清晰判讀。BMW 運用極致的人體工學與投影技術,將科技巧妙隱形於駕駛體驗之中,讓資訊傳遞回歸直覺與安全。

iX3 橫跨前擋風玻璃下緣的 BMW 全視域顯示系統、微傾向駕駛者的懸浮中控螢幕,配合超感智慧方向盤,實現
iX3 橫跨前擋風玻璃下緣的 BMW 全視域顯示系統、微傾向駕駛者的懸浮中控螢幕,配合超感智慧方向盤,實現「眼不離路、手不離盤」的直覺式駕馭體驗。
圖/ BMW

單一超級大腦即時協調!「Heart of Joy」打造極致動態控制網

傳統車輛的動力、煞車、懸吊與轉向,通常由數十個分散的控制單元(ECU)各自運作,彼此間訊號傳遞的延遲,往往成為純電時代限制操控靈敏度與順暢感的原因。

Neue Klasse 徹底打破這種分散式邏輯,導入了四組中央集中式「超級大腦」。其中,掌管駕馭靈魂的 Heart of Joy 駕趣核心,實現了高達 10 倍的運算速度提升。而這,更是 BMW 重新定義 SDV 的最佳體現。

「10 倍速」背後的真正技術價值,在於 BMW 將底盤控制、動力分配、煞車煞停與轉向演算法,全部整合至同一個高效能系統內進行同步運作。每秒進行高達 1,000 次的超高速精密運算,讓前後軸馬達輸出與動能回收達成毫秒級的完美協調,更令人驚豔的是,日常高達 98% 的煞車都能單靠平順的「動能回收」完成,實體煞車僅在必要時無縫介入。這不僅大幅提升能源效率,更徹底消除了傳統電動車動能回收時的頓挫感。無論是高速過彎的穩定性還是踏板回饋的細致度,都達到傳統架構無法企及的即時性,讓純電駕馭依然充滿悸動與溫度。

全新 BMW iX3 搭載 Heart of Joy 駕趣核心與第六代 eDrive 科技,以毫秒級的精準控制,
全新 BMW iX3 搭載 Heart of Joy 駕趣核心與第六代 eDrive 科技,以毫秒級的精準控制,在公路馳騁中完美詮釋純電時代的極致操控。
圖/ BMW

首款跨世代量產結晶 BMW iX3 以產品實績宣告未來已屆

從 1961 年法蘭克福車展上亮相的初代 Neue Klasse,到如今蓄勢待發的新世代純電陣容,跨越六十餘年的時空,車輛的外觀形態與動力心臟或許截然不同,但 BMW 對於「駕馭樂趣」的追求從未改變。

身為 Neue Klasse 架構下的首款純電豪華休旅量產車,全新 BMW iX3 絕非只是一台新車上市,而是 BMW 移動願景的具體實踐。

從設計語言分析,iX3 摒棄繁複飾條,以如隕石雕琢般的一體化線條形塑車身;前臉標誌性的垂直飾光水箱護罩,在致敬經典的同時,巧妙包裹了高階雷達與感測器,達成「形式服從功能」的科技美學。

全新 BMW iX3 以垂直式飾光水箱護罩向初代 Neue Klasse 致敬,搭配如雕刻般流暢的一體式線條
全新 BMW iX3 以垂直式飾光水箱護罩向初代 Neue Klasse 致敬,搭配如雕刻般流暢的一體式線條與幾何輪弧設計,在傳承經典基因的同時,展現前瞻未來的純電豪華姿態。
圖/ BMW

而在海外市場開賣後短時間內訂單爆發、甚至吸引高比例非 BMW 車主的實績,更強烈證明了市場對於這套跨世代理念的高度認同。

跨越世代的革新之作,即將在台灣市場開啟宣傳與銷售。這不僅是一台新車的登台,更是 BMW 再次向世界宣告:未來無需等待被定義,因為極致的駕馭體驗,始終由 BMW 主動創造。

登入數位時代會員

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

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
台達電全解讀
© 2026 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓