webdesign介面設計的概念落實:科技公司形象官網專案分享

量身訂製全方位科技服務網站,創造完整設計服務體驗

Ching You
Begonia Design 海棠設計
7 min readApr 10, 2019

--

在專案量龐大且內容各自迥異的設計顧問公司裡,身為介面設計師常常會針對不同性質、產業甚至趨勢背景的專案,轉換自己在每一次專案裡的思考方向與角色。
然而,在如此應接不暇的專案汪洋裡,設計師必定會面臨一個沒有絕對答案的問題 :如何以客戶的需求和使用者經驗為基礎,創造出三方都滿意的產品呢?

步驟 1:與客戶確認產品方向

與其被動地接收客戶的需求,不如主動出擊引導產品發展走向

在參與專案討論的過程中,不難發現設計師傾向於「產出解決方案」,反之,客戶即是「渴望解決方案」的一方。我們會先瞭解客戶想要改進的部分,或期望藉由新產品所達成的實質效益,深入瞭解客戶的公司背景和企業形象等。
設計師在這個過程中,常會忽略產品開發背景或者企業品牌形象,進而誤解客戶腦海中的理想藍圖,導致雙方在初期溝通階段就產生歧異。這時候,除了傾聽客戶的需求並加以收斂,由設計師提出看法引導客戶的思考方向,協助產出「設計與技術端皆能夠支援」的策略,會是更有效率的方法之一。

以這次的專案為例,客戶希望產品建立的企業形象為:高品質、軟/硬實力兼備與速度感,並沿用元素 — 魔術方塊作為貫穿整體主軸的特色。設計師可以透過關鍵字做為設計發想的基礎,在整體網頁的佈局上,採用較為簡潔的排版突顯企業專業度,而速度感與軟/硬實力兼備的特點,則以變化性較大的區塊設計來呼應。

經由品牌理念,企業需求等背景了解,能夠更快速地去構想畫面的呈現方式與配圖調性。

步驟 2:搜尋適合設計風格,並提出視覺風格提案

量身打造符合客戶需求的設計風格,是設計顧問公司最大的價值所在

除了符合專案的需求,介面設計師也會融合自己的想法,客製2~3種風格提案簡報供客戶參考。客戶往往需要我們先提出「看得見」的提案,才能夠真正確定產品的風格走向,因此我們會以圖像作為輔助,大量的搜尋網絡上的資源作為靈感(比如Pinterest,Dribble,Behance…等網站),發揮「看圖說故事」的功力向客戶說明想法。如此一來,不僅降低口頭上溝通的誤解,也能幫助設計師更精準地定位設計稿的視覺方向。

透過提案簡報向客戶提案視覺方向,或以現成網站說明動態效果,不僅可以幫助團隊定位準確的設計方向,也能針對細節部分做更詳盡的討論。

步驟 3:WF製作

Wireframe製作不只是檢視產品易用性與使用流程的階段,也是初步發想設計佈局的絕佳時機

進入設計稿製作之前,會經由UX設計師製作WF作為整體架構的依據,而公司常會鼓勵UI設計師參與WF製作過程。設計師以「介面視覺」的角度為出發點,對UX設計師提出介面佈局的建議,會大大地提高團隊溝通的效率,並減少不必要的重工問題。

以此次的專案經驗為例,偶爾會發生「某個WF上的元件配置,會影響整體的排版與佈局」,這時候,假若UI設計師能夠及時提出解決方式,UX設計師便能夠及時調整頁面中相似元件的佈局,避免日後反覆解決同樣狀況的窘境。

經由團隊成員討論過後,決定微調WF佈局,希望藉由「看得見的數值的跳動」提升用戶對於企業的可信度與信賴度。

步驟 4:實際製作設計稿

除了透過設計稿驗證自我經驗並實現想法,融入意想不到的小巧思,也是幫助產品在用戶心中留下深刻印象的好方法

設計師大顯身手的時刻來了!經過風風火火的前期討論與準備,將所有的想法付諸實現非這個時刻莫屬了。
首先,制定產品的Guideline絕對是優先順序,也是製作設計稿最耗費心力的環節。制定專案的配色方案,並發展符合產品方向的元件樣式與字體等細節,產出一套設計準則。做好色彩與元件上的系統規範後,對往後設計稿製作的速度彷彿如虎添翼,也不怕偏離原先制定的設計方向。

系統化介面上的元件規則和色彩庫,不但能加速頁面產出速度,也能幫助內頁設計方向定調。

有了Guideline的打底步驟之後,就能針對介面上不同的區塊進行細節設計了!這時,如果設計師可以創造專屬產品的獨家特色,並在各區塊適當融入特色元素,將對產品帶來意想不到的視覺衝擊。這也是抓住用戶在產品上停留時間的好方法之一。

以這次的專案為例,為了配合產品的「專業科技風格」,因此重新繪製了魔術方塊的圖像,並以方塊的剪影 — 六角形作為元素的發展基礎。配色保留企業CI色 — 深藍色,並使用沈穩的黑灰色作為搭配,以此呼應科技公司強調專業與信賴的品牌精神。

運用首頁BANNER區塊展現企業的中心理念,不僅加深使用者對企業的印象,在這個案例中也融入方塊元素進行Icon繪製,讓整體介面更有故事性。
內頁設計更加強調魔術方塊的企業概念,將古板的流程圖轉化成更符合企業形象的圖面,增添頁面的豐富性。

用戶對於介面第一眼的視覺感受,將決定品牌在用戶心中最直覺的形象定位。因此如何幫助客戶產出識別度高,並完整傳達企業形象的產品,對設計師來說絕對是一大課題。

步驟 5:整合眾人意見,進行最後編修

整合團隊成員的想法並適當融入設計稿中,除了考驗設計師的應變能力,也是設計師訓練溝通能力的好時機

完成設計稿後,終於進入專案流程的終局之戰了!透過與其他團隊成員一同檢測設計稿是否符合專案需求、在使用流程上是否符合使用者經驗流程,這都仰賴團隊使命必達的責任心。
然而,在這個過程中免不了激烈的討論與意見想左的時刻。設計師除了透過設計稿向成員表述自我想法,同時也要傾聽所有成員的心得。在製作設計稿的時空深淵裡,設計師很容易迷失思考方向,倘若成員即時提醒並提出改進策略,除了能夠加速設計師換位思考的動能,也促使產品更貼近使用者需求。

介面設計以人為本的初衷,即是希望產品能對所有的受眾一視同仁。一個產品能夠容納所有背景的使用者,並幫助用戶達成使用目的,如此才能讓產品更臻完美。因此,除了客戶,設計師將團隊成員視為最直接的產品用戶,並藉此改善產品的盲點,將會大大地幫助設計師製作更符合客戶需求及使用者期望的產品藍圖。

結論

每個全新專案的起始,都必定會成為設計師重生並再造的最佳轉捩點,對於設計師來說,絕對是培養經驗與眼界的必經過程。在設計顧問公司裡,設計師有許多機會能挑戰自我,更能廣泛了解不同產業的需求。而如何與團隊成員在專案裡一同進步成長,有效溝通並相互合作進而發揮團隊最大效益,最終帶給客戶最全方位的服務體驗,一直都是大家一同努力的終極目標。

  • Ubiqconn 企業形象官網:
    https://www.ubiqconn.com/en/
  • Ubiqconn 專案團隊成員 :
    Creative Director | Julian Lin
    Art Director | Milk Hsueh
    UI Designer | Ching You
    UX Designer | Yiti Wang
    Front-End Developer | Reginna Chao
    Project Manager | Ian Liu
  • Produce By BEGONIA DESIGN INC.

--

--