AAPD介面 Redesign 挑戰賽賽後小記

hugh
8 min readFeb 6, 2019

--

寫下這篇紀錄緣起在參加 AAPD 介面 Redesign UI 挑戰之前,參加過 UI Club 舉辦 Design Challenge ,紀錄一下關於這兩者小挑戰之間自身感受的變化。

UI club 設計挑戰 第一場 — 音樂應用

至少設計出下列四個介面
A. 音樂庫 : 提供用戶瀏覽各式曲目、例如:推薦歌單、近期播放、熱門歌單等等的功能。
B. 歌手介紹:提供用戶瀏覽歌手及其專輯
C. 專輯介紹:提供用戶瀏覽專輯及其曲目
D. 播放器:提供用戶操作曲目播放等功能
不限尺寸、色彩、風格、裝置,盡量發揮你的創意
你可以設計任何平台的應用,不限於網頁、桌面或行動端
附加一段你的設計概念與說明

只指定了主題,尺寸、色彩、風格、應用不設限下,最後的結果精彩的多樣,豐富度也超乎主辦預期的精彩。有些設計師專注於視覺上的挑戰,可能是突破平常工作領域的風格,發揮自己不僵化的想像,掌握潮流的視覺風格,欄位和內容也填充了許多創意( 或許也透露出作者本身對音樂風格的喜好和日常習慣)。有些作者則是專注於使用者感受的規劃,滿足自身經驗、解決現行音樂APP無法滿足的需求

Huang Kaikai • 程式音樂播放器 • 一款Text editor裡面的播放器

設定限制為不能用滑鼠,所以任何執行指令都必須用打的,也試圖仿製一些語言的指令。也因編輯器的限制,其中不能出現複雜的線條與圖片。取而代之的是文字的排版與顏色的區分。

Andy Kao •Muzation • 平台讓可以讓團隊共同建立團隊一起聽的歌單

在公司每天都會由同事輪流播歌曲,有時候播一播曲目就停止,一陣寂靜後由另外同事繼續播,播放平台來源不一,如果可以做一個平台讓大家可以用團隊的身份新增 / 播放並建立屬於團隊的音樂庫,或許方便些

林承芳 • Music Treeing • 結合音樂庫與森林養成,聽音樂換種子、灌溉樹苗,組合培養成自己的森林
Joreen Lau • 空氣音樂盒 • 音樂的美好彷彿是早晨清新的空氣

把 app 回歸到音樂及專輯設計真實感受. 清新、明亮、純真感受、配置上使用全版的CD封面及呼吸留白的空間、讓美好聲音浮現出來。

事隔一年多回顧這些作品還是覺得很精彩,特別是有些創意和視覺手法的展現只花了 2~3天時間完成,這反映出了設計師個人的涵養、對於使用者經驗見解的累積,在短時間內創作,能實踐出與現況不同的點子但又不脫離邏輯(需要被技術人員挑戰和市場面相接受就暫時不在此討論了)。

AAPD介面 Redesign

這次 AAPD 主辦 Youbike APP Redesign 與上述的挑戰形成了一種對比,有一個明確的目標和價值,找出現行 Youbike APP 讓使用者抱怨的原因,提出改善辦法。有一部分的組別不外乎先進行了調研再針對首要改善的狀況提出解決的假設,最後進行頁面設計(或許這是目前台灣UIUX領域設計師的一種默契)

元本山 • https://www.behance.net/gallery/73180715/Ubike-Redesign
Wei, Shin • https://paper.dropbox.com/doc/YouBike-Redesign--AXB27lzE4uBc~05ypFiS32XyAg-9VsDJLRM9ZlTf6LzGxasP

音樂類型APP 是由自身經驗出發,提出一個新的概念,而 Youbike APP Redesign則是解決現行產品問題。為解決問題得先找出用戶是誰?這大概是讓我覺得兩者挑戰最不一樣的地方:一個由自身經驗出發,一個由使用Youbike APP 的騎士的角度尋找答案。

從生活中的朋友,快速挖掘使用者的輪廓

不過對我來說這次最大的變化不是競賽挑戰的題目變了,而是完成挑戰的成分變了,找了 Kathryn 果思設計的設計師作為這次挑戰的夥伴。設計這件事從單打變成了團隊運動(詳細的設計過程,可以前往Kathryn撰寫的微笑單車只見苦笑?YouBike App Redesign了解)。

我們同時為設計生產角色也同時是戰略角色

我們最先討論的事情是跟 Youbike APP本身無直接關連,但影響著我們怎麼執行設計,開啟一通通話,打開paper新增一個文件,寫下一些根團隊有關的輪廓:

  1. 訂定對於這個挑戰賽的目標

如果沒有這個步驟,我可能會為了追求圖像和創意表現的成績,做出一些與初心違背的事情,花更多時間在製作更多實驗性的功能和特色甜點。

2. 建立這個專案有用的參考的資料庫

兩個來自不同經歷和團隊的設計師,自身吸收的經驗和累積不太一樣,為了在討論時更容易理解彼此討論的項目,開始專案後,我們會頻繁的分享對於此專案有幫助的材料、原則、quotes。

👉Grab 東南亞交通運輸的產品設計挑戰與實踐 — 以重新設計 Grab app 為例
👉Tina-業界UX訣竅與方法1 - 研究篇
👉The Story Behind Asana’s Rebrand
👉Flowchart Kit
📘A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.
📘Good design is obvious. Great design is transparent.

3. 訂定出三個應遵循的設計原則

這個過程是在研究使用者是誰後、分析產品現況、競品狀況後進行的,輪流提出雙方的洞查、 Youbike APP 需要更重視的關鍵點,討論後投下分數選出

簡易便利、清晰易讀、快速直覺

進行了一系列建立共識的過程是為了產生一個指南,以確保每個人都在解決相同的問題,建立相同的產品,並在決策時指向同一個目標

進行的過程中還看不出它們的價值,但設計生產工作時,面對了自身懷疑和雙方的挑戰,那些當初培養出的默契和訂下的原則發揮了作用

從原則下衍生出視覺語言

A:資訊卡設計了許多的版本草圖,逐一檢視和汰選,按照能不能符合當初訂下的原則,選出往 圖B 發展。

B:同樣的 UI Pattern,在顏色的安排方面猶疑了很久,我們是要讓 APP 看起來很繽紛可愛,還是讓每一個配色都發揮得有意義。

C:最一開始的Navigation Bar Bar Tint 顏色為 品牌橘色,不過我們都覺得這樣為了利用大色塊來放大產品個性,似乎違反了我們便利和以資訊為主的原則,也破壞了頁面氣氛的和諧。

今早閱讀到這篇文章討論了為何越來越多受歡迎的APP走向無色的設計
Ever wonder why the most popular apps are starting to look the same? It might be a good thing
最後它們的樣子

後記

1.完成了所有頁面精稿後,最後重要的一步得做出良好的呈現去和評審和閱讀者溝通,而我在這方面很不擅長,反而是想要做一些不在規劃下的頁面來爭取新鮮感,或是把我們設計的過程刻意做表現,好一陣子有種不知所措的挫折感,最後是隊友點醒了我也 cover了這塊。

2.每一畫面都有它誕生的理由,而在討論和趕畫面的過程中,有許多用不上的版本就這樣不被記錄的消逝,如果有款 應用能把這一切記錄下他們誕生和不採用的原因不知道會有什麼不一樣。

3.多個設計師在同一個專案下該如何快速的建立良好的工作習慣(命名方式、作稿習慣、圖層和元件分類原則),在緊密的合作下要如何避免重複設計、要如何有效率的跟踪設計變更,DesignOps適合個人或短時間的工作嗎?我不是完全知道答案,今年會去實踐它。

4.AAPD 所舉辦的Redesign UI 和2017年 UI Club舉行的設計挑戰,最後大家設計和呈現非常不一樣,也許不僅僅是因為題材和題目限制,或許也是因為相較於2017 UX概念越來越基本了,每個面向的 level 都提高了。

延伸閱讀
sympli

Design OPS

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

--

--

hugh
hugh

No responses yet

Write a response