156 Followers
·
Follow

Image for post
Image for post

🌚本文適合正在接案工作室水深火熱中的 UI/UX 設計師,以及對於網頁開發過程有興趣的人🌝

終於盼到草山金工上線了,這趟從三月開始的旅程說實在並不短,是近期內接觸到蠻有挑戰性且有趣的專案,因此想拿出來和大家聊聊。

👉🏻👉🏻 馬上來逛草山金工官網: kinjo.co 👈🏻👈🏻

簡單介紹一下自己,我目前是一名 UI/UX 網頁設計師,一直以來都在待在接案工作室做設計,我喜歡透過這些不同的專案來理解不同產業的這個過程,統整資訊並看著設計與工程技術的實現是一件很過癮的事,也因此我非常享受做設計的過程。

進入正題,這次的分享主要會分為幾個部分:

  • 從需求到設計:專案背景、建立研究資料
  • 設計流程:多位設計師之間的合作模式、協作工具分享、Design System
  • 專案管理與合作:開發流程以及團隊中不同成員間的資源分配

從需求到設計:釐清需求,設計出讓使用者喜愛的產品

經營超過十年的草山金工一路走來,其實花了很多心力在品牌的建立,隨著業務的擴大,擁有一個整合的平台來管理訂單、購物及會員資料,不僅可以讓用戶獲得更好的體驗,也可以使同仁更輕鬆的管理訂單,因此在這次品牌成立滿 12 週年之際,他們決定請転転來做專屬於草山的電子商務網站。

Image for post
Image for post
左:草山金工十年前的官網 / 右:草山金工五年前的官網

草山的業務包含了:金工課程體驗(原先是透過 Niceday 預約課程)、首飾商品訂購(原先是透過 Pinkoi 訂購商品)、婚戒製作所(包含婚戒課程及婚戒客製商品)、工作室的各式合作計畫(原先是透過 Facebook 社群經營)……等內容,所以各位可以想見的是這個 EC 網站一定複雜許多(掩面哭)(如果沒有哭的話就是你的沒有認真想,例如:從前的我),也由於這次的專案 scope 比較大,我們決定投入兩位設計師一起製作,一方面可以加快開發速度,另一方面我們也想嘗試多位設計師一起合作專案是否可行(以往都是一個專案只有一個設計師負責)。

在開始進行設計以前,我們與客戶初步定義這次的網站改版的三大目標:

  1. 形象 rebrand:目前還尚未有一個一致的品牌調性,希望透過網站的建置,再次統整並提升品牌形象
  2. 電子商務建立:將所有線下資料轉為線上管理,並將各平台間的功能整合在此官網處理…


Image for post
Image for post
Dieter Rams Design Diener / Bild: © beigestellt

說到設計,第一個浮現你腦中的是什麼? 是手邊的IPhone?常搭的公車跟捷運?球鞋、衣服、手錶、音響、計算機或者是電視機? 有趣的是,這些我們習以為常的日常生活用品,即便它們有千百萬種樣貌、來自不同的品牌或者是運用不同材質製作而成的,但它們在每個人的腦海中幾乎有著相似的輪廓,而且很神奇的地方是當這些物件擺在你的面前時,就算這是你第一次看到它,你也能知道該如何使用它。

這是怎麼辦到的?事實上,這些產品是運用設計思考,優化了原本的使用模式,而後成為我們現在所熟知的模樣。

一樣產品成為經典並不是一件容易的事。我們都知道工業革命開啟了一個快節奏、高效率的時代,由於科學與工業技術的緊密結合,「設計」作為一個規格化以及形式的呈現,也逐漸成為一個獨立的行業,並大量參與物件的生產過程。隨著更多工業產品的製造,以及現代社會鼓勵消費的風潮下,使得物件的品質規格出現差異化,文明垃圾也在此時大量順勢出現,當消費市場上充斥許多眼花撩亂的產品設計,以及令人困惑的配色與設計型式時,設計界就在此時掀起了一波「功能主義」的浪潮,他們所追崇的是「形式追隨功能」(Form follows function.),也就是這個原則衍生出獨立的審美體系──極簡(簡約)主義(Minimalism)。

Image for post
Image for post

很多人對於「極簡」二字的想像就是「斷、捨、離」,好像奉行極簡生活的人就是沒有強烈的物慾,自己用的、穿的、甚至家裡所有東西都是純白色的……等,但其實極簡主義原來是指去除多餘的元素,只留下必須的功能及最合適的展現方式的一種設計風格。舉例來說,近年出現最多極簡主義的設計就是我們手機/電腦介面,從iOS7和Win8 Metro系統開始,扁平化風格的設計已經逐漸融入我們所能看見的各種icon跟圖示當中,扁平化可以說就是簡約主義其中一種體現方式。

Image for post
Image for post
Skeuomorphism vs Flat Design

設計中的極簡主義

說到極簡主義就不能不提到Dieter Rams,他是德國家電用品Braun的首席設計師,Apple創辦人Steve Jobs、無印良品的設計顧問深澤直人都深受他的影響。他主張好的設計產品應該去除不必要的設計元素,不常使用的功能或按鍵皆可省略,優先考慮簡單的形狀以及中性的顏色像是黑、灰或白色,減少不必要的介面困擾與機能浪費,唯有這樣才能讓使用者以直覺來操作產品。在他的設計中,他始終表現出對物品使用方式的尊重,就是這樣簡約、功能為主的思維,使得他的設計看起來歷久彌新,秩序中帶有美學。

Image for post
Image for post
Dieter Rams
Image for post
Image for post
Dieter Rams’ T3 transistor radio / Apple’s first iPod
Image for post
Image for post
Source: www.dasprogramm.org
Image for post
Image for post
Source: www.dasprogramm.org

成為好設計的十個原則

Dieter Rams:「在我的經驗中,當物件的設計簡潔易懂時,使用者的反應都是非常正面的。因此這也是現在最困擾我的一點,市場上充斥太多隨意且未經思考的東西,不只是消費性的商品,連建築、廣告,到處都充斥了不必要的東西。」_《Objectified》

矛盾的是,身為一名工業設計師的他,一直都是秉持著環保理念的,雖然目前為止的設計生涯中,他已經設計出無數的產品,面對市場的考量,他不得不去設計那些商業性的產品,在這樣的狀況下他所能做的,就是在每一次的設計過程中,向自己反覆提出一個重要的問題:「我的設計是好的設計嗎?」最終,他歸納出一份好的設計應滿足的十條規則(Ten principles of good design):

  1. Good design is innovative. | 好的設計是不斷創新的。
    創新的可能性還沒有窮盡,技術的發展使得人們能夠激發出更多新的想法並提升產品的使用價值。創新的設計永遠伴隨著創新的科技而來。
  2. Good design makes a product useful. | 好的設計是實用的。
    產品是供人使用的,它不僅應當履行一定的功能,滿足消費者在心理層次與美學上的需求也要考量到。設計是為了提升產品的實用性,與此目的無關抑或是相悖的一切都不加考慮。
  3. Good design is aesthetic. | 好的設計是美觀的。
    產品的美感以及魅力的展現也是產品本身不可或缺的一部分,日常生活中使用的器具影響著人們的生活環境和幸福感受。因此,真正優秀的產品必須要是美的。
  4. Good design helps us to understand a product. | 好的設計使產品易懂。
    好的設計是「不明自白」的,使用者一看到產品即能了解他的使用方式跟結構,省去閱讀使用手冊的時間,增加使用者與產品之間的使用者經驗感受。
  5. Good design is unobtrusive. | 好的設計是低調的。
    產品是要履行某種功能的,因此它具有工具屬性。他們不是裝飾或藝術品。因此設計產品時,應該要精準拿捏好功能與裝飾之間的平衡,是中性的,並且為使用者留下適當的空間與之互動。
  6. Good design is honest. | 好的設計是誠實的。
    好的設計不會對使用者作出不實的承諾,也不會藉由任何誇大不實的方式讓產品看起來更創新、更多功能和更有價值,而是應該忠實地呈現產品的本質。
  7. Good design is durable. | 好的設計是歷久彌新的。
    好的設計不會只是一昧迎合時髦,也因此不會過時。與流行式的設計對比之下,好的設計在現今這個追求快速與潮流的消費型社會裡也能站穩,成為一個屹立不搖的經典。
  8. Good design is consequent to the last detail. | 好的設計在細枝末節處也保持一致。
    不要容忍隨意和偶然。設計的邏輯性和精確性,到了最終都是對消費者尊重的表達。
  9. Good design is concerned with the environment. | 好的設計是環境友善的。
    無論是多加謹慎使用環境資源下的資源,還是直接減少不必要污染,節約資源。設法在環境友善的前提下用設計保護環境,在實質上的資源消耗以及視覺上產生的污染都不能發生。
  10. Good design is as little design as possible. | 好的設計是簡約的。
    少,但是更好,讓一切都回歸純粹跟簡單的狀態。
Image for post
Image for post

設計十守則的應用:網頁介面設計

在50年過後的現今,我們可以發現這十條守則仍然可以精準完美的套用在不只是工業設計的設計範疇中。舉例來說,UI設計師若是依循這十條守則作為設計思考的檢視時,可以得到像下列這樣子的脈絡:

  • 找出讓使用者最滿意的功能或內容並優化它,讓他們在愉悅的使用經驗中持續累積對產品的好感度。
  • 我們的互動設計應當忠實的呈現產品的使用功能,數位體驗和真實的操作語言之間不要有過大的差距,讓使用者可以憑直覺操作。
  • 利用設計的視覺語言,引導使用者與產品做互動。若是按鈕的設計,我們就要將它設計得看起來像是可以被點擊的,並且要考慮到它起始、終止的狀態以及hover、active的效果。
  • 不要在我們的設計中不斷建立不必要的元素。記住80/20法則,並在添加每個元素之前仔細思考,避免未來應用或者使用上有混亂的可能。

一個好的設計不需要去解釋,因為它是不會給使用者造成負擔的。當你發現你的設計不用多加以解釋,而用戶都可以自己用直覺去操作它,甚至感受不到設計的存在,那就是最為極致的狀態;若你需要再多加一些提示的文字甚至是視窗,那麼這樣這或許就不是那麼好的設計。在每一次的設計過程,你應該將如何降低使用者在操作上的認知負荷也列入考量,你的設計已經幫他迴避掉不需要的問題,讓使用者的心思可以專注在產品的操作以及內容體驗上。

美學與功能的完美結合

雖然Dieter Rams沒有任何提到關於使用者經驗優化的內容,但他所有的想法都呈現出與之相同的價值觀。或許就如同他所說的,身為設計師的我們,必須也是一個具有創意跟同理心的工程師,而我們可以依循設計的十守則:

好的設計是不斷創新的,好的設計是實用的,好的設計是美觀的,好的設計使產品易懂,好的設計是低調的,好的設計是誠實的,好的設計是歷久彌新的,好的設計在枝微末節處也保持一致,好的設計是環境友善的,好的設計是簡約的。

透過設計是能夠解決問題的。

延伸閱讀

About

Shihyi Lin

Graphic and UI/UX designer based in Taipei, Taiwan.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store