這是一個可以透過照片、文字立即搜尋到葡萄酒評價及價格的 APP 。就像去吃餐廳前會先搜尋 Google 評論一樣,這個 APP 提供其他人喝完的感想及評分,迅速統整初步功課,即使是剛開始接觸葡萄酒的初心者,也輕鬆上手、找到適合自己的選項。
我在這個專案練習裡扮演的角色,包含了整個設計流程,從User research一路到最後的Visual Design。
Research
What I've learned
  我在以上這些研究過程中,學習到這個產品傳達給使用者的應該是舒服及質感的印象,以及簡單明瞭的操作介面、整體感覺到自己品味提升的使用體驗。

  其他競品在視覺呈現上,有使用飽和度較高或是使用冷色系的對比色來做雙主色的搭配風格。我在分析下來之後,加上透過釀酒的橡木桶以及酒瓶上的軟木塞發想,在配色策略上決定採用飽和度較低、不同明度,且為暖色調的咖啡色系。
Information Archeticture
以下你會看到的是這個產品的資訊架構,接下來會再針對重點功能做視覺設計的展示。
Visual Design
熱門主題
透過主題或輸入文字的方式進行搜尋,考慮到未來開發的便利性,所以在主頁面使用主題區塊的方式,可以直接右滑看到更多選項或展開全部選項,往下滑則可以看到更多不同主題。
選取主題得到搜尋結果後,可以使用進階篩選縮小範圍,最後找到有興趣的葡萄酒。
搜尋評價
點選Tab bar中間的相機icon,可以在這使用不同的拍照模式及上傳照片的方式,讓系統自動辨認搜尋。
  查看其他人提供的葡萄酒評價,也可以提供你的評分及感想,分享給更多人。
Design System
在設計過程中,我會將使用到的顏色一邊整理成設計系統。
APP icon設計是經由葡萄酒上的軟木塞質地,加上在每個軟木塞上獨特的壓紋做發想,並以高脚杯在敬酒碰杯时,應使用杯肚相碰的社交禮儀,優雅重疊在中間得到一個單字Wine的W開頭字樣。
Retrospect
  最一開始,第一次的視覺設計出來的時候,整個畫面沒有明顯的視覺節奏,看起來東西不曉得要對齊哪邊,比較像是在做海報。

  所以我後來決定整個打掉重練,從 wireframe 的構造畫面去思考我應該如何怎麼提高畫面的可用性,而不是單純只是做視覺美化。這中間也每天花時間看完了設計的心理學這本書,了解到使用者在操作上可能會遇到的障礙,以及設計師的角色可以怎麼透過設計去幫助使用者釐清目前的狀況或重新進入狀況。

  經過不同畫面呈現的嘗試、進行 protoype 階段去檢視流暢度,來回反覆的過程中,慢慢修正成現在最後的版本。​​​​​​​做完這整個案子,我學到互動設計不是單純設計好看的畫面,而是更著重在產品的易用性及整體的使用體驗上。多注意到一些細節,就有可能帶來更不同的使用感受。

You may also like

Back to Top