新手設計師,怎麼出作業給自己?

Manta Wu
AAPD — As A Product Designer
5 min readFeb 25, 2018

在發完 寫給想要踏入UI領域的學弟妹們 這篇久遠的文章後,陸陸續續獲得了一些學弟妹們的私訊(謝謝你們理我),發現大家對於「怎麼出作業給自己」這塊不太明確,所以希望將這個過程打完整一些,讓在功課以外行有餘力想要練功的同學有更清楚的方向!

首先,為什麼要做作業?

不管是學生或是上班族,我想大家的生活一定在忙碌不過,尤其是在一個有這麼多劇可以追的時代裡(?),能好好的做一份功課是一件多不容易的事,而且還是自主性的,所以,你是為了什麼而擠出時間呢?

作業的階段&種類

根據每個人的不同背景與能力,我將作業分成了3種階段~這些步驟也是我自己在學習的過程裡經過的3個階段(當然因為自己資歷並沒有太深,小女不才,只分了3 part)

1 .現有產品臨摹

難度🌟

建議 UI 新手、甚至沒設計底子但有心想練的同學~這就如同小時候的生字本,都是從臨摹開始的!

  1. 找一個你覺常用的大廠牌 App
  2. 依同學有多少時間可以練習,截圖元素較多的頁面,貼進你的 Sketch
  3. 開始臨摹,請準確的繪制,熟悉一下你所使用的軟體
  4. 完成後,將圖層檔名做整理
  • 選擇常用 App 是希望同學本身已經很了解這些 UI 的操作,特地提到要挑選大廠牌的介面,是因為大廠牌(大部分)都會制訂一套自己的 Design Guideline,所以可以藉由實作過程去發覺人家怎麼運用顏色、Icon的繪製有沒有規則(例如是線條的還是實心填色的)、元件彼此的間距多少(8的倍數?)、總共有幾種字體大小……等小小細節!
  • 如果說圖層檔名取的很沒有概念,除了多看兩個平台出的 Guideline 外,也可以先去 sketch app sources,下載別人的 Sketch,看看人家是怎麼整理的~其實最主要是希望這個步驟可以讓同學更了解元件,有些不知道怎麼命名也可以參考 Pttrns 這種網站的分類方式~

2.現有產品重新設計

難度🌟🌟🌟

  1. 選定一款常用的、可以優化的 App,不管是UI不統一導致導致操作不順暢、功能不符合預期無法滿足痛點等~總而言之,先釐清自己想要重新設計的目標是什麼,想要解決什麼問題。因為搞清楚這些才能開始設計,不然都是白忙一場喔@_@
    例如我的問題是目前雅虎購物中心的商品頁面,優惠資訊很混亂,我都需要看半天或是加入購物車以後才能確定價格,所以我重新設計的目標就是讓使用者有效率的得到優惠資訊。
  2. 利用 Wireframe 設計出幾種解法,此時的 Wireframe 千萬不要落到以視覺腦袋來思考,能用紙筆簡單的草稿即可,以上面的範例,我就會將所有的優惠都整理出來,並且去思考這些優惠對使用者來說有哪些區別,怎麼樣的形式可以更好理解優惠內容,並馬上畫畫看。
  3. 最後將數個 Wireframe 進電腦看看,在這個過程中選定一個最好的解法,套用現有產品的視覺調性。可以先簡單的歸納出同學新設計的畫面裡有運用到的元件,如果找不到現有 UI 或是現有的不夠好,當然也可以嘗試更多視覺的可能~
  • 為何要選定一款常用的App?最主要是想假定你的痛點就是其他使用者的痛點,畢竟這是一個人為單位的功課。但工作時……把自身痛點視為所有使用者痛點,可以說是產品設計的大忌哈哈哈哈。

3.新產品概念設計

難度🌟🌟🌟🌟🌟

若從無到有的發想新產品沒有太多頭緒?也許把眼光放低一些的話,從參考現有產品開始,試著改良出屬於你自己的 App!
例如我是一個會定期對發票,想要賺意外財的少女,在對發票的過程中就發現現有的發票 App 都有些可優化的空間,所以就私心的用喜愛的貓咪為主題設計一款 App,這份給自己的功課其實就是將上一段落「現有產品重新設計」的規模放大,包含流程的重新思考,重新定義目標跟使用者的痛點,甚至是 Branding 都能在此次的練習裡。有機會也會來將整個產品的細節過程分享給大家的!

之前的作業

進入雅虎以後,產品的規模已經不像之前在新創可以一手掌握了~往往在專業分工之下看見的都是產品的小部分,所以藉由閒暇時間做功課,也是幫助自己能夠換位思考,把平常在公司學到的套用看看,從不同的角度來看待產品,同時也是幫助我在工作時,跳脫只是一個螺絲釘的思考方式。

老生常談,很多人都說我們年輕人是「想得太多,做得太少」,對我來說還真是如此~「做」這件事情真的是不容易,尤其是持續做下去,看到很多厲害的前輩後輩們都很有毅力的不停學習著,覺得hen慚愧,在東想西想覺得有100件事情擋在前面的我,不如起身,馬上開始做!因此有了這篇拖了好久的文章(超長鋪陳哈哈哈哈哈哈哈)。希望自己新的一年能寫下去!做更多學習!

感謝 Joe Tsai& David Lin 陪我一起做作業 ❤

--

--