作品|100 Days UI – 1~10 Days記錄

當初看到有100天挑戰的時候毫不猶豫就加入了,我是很喜歡藉由實作去累積經驗,畢竟有時候文章看多了、範例看多了,當要動手時又是另一回事,更何況我對UI設計的經驗不多,才做了幾天就得到很多常識知識必須知道的事。

有興趣的人這裡填信箱就可以挑戰哩!http://www.100daysui.com/

DAY 1 Sign Up

第一天的任務是做登入頁面,我想不管是什麼題目都是全然的挑戰吧。但我發現最難的是不知道要做什麼主題,一直以來,我設計的習慣是為了某個受眾而做,自由發揮根本很少,現在就要虛擬一個品牌、公司或是目的來做作業,自由發揮也是很困難啊!!
想破頭就挑了一個跟書籍有關的方向

day1

品牌假設:書籍閱讀、販賣交流相關品牌。
內容想像:也許我們有自己的帳號可以記錄閱讀的內容、書評跟社交
於是我希望他有多一些人文氣息,就大膽嘗試用不一樣的質感去做。相較於一般app的色彩質感的確是長得很不一樣,更像藝術、繪本的溫暖感。做了中英文也是因為現在很多100UI挑戰都是國外的作品,而且英文常常排起來有一種自欺欺人的美,既然自己是會面對到中文介面,就要挑戰中文囉!

這個畫面卻犯了一個大錯:我的鍵盤跳出後可能會遮到輸入欄…噢天阿我自己也曾靜在使用其他app的時候罵過這件事情,但真的是自己實作就忘了…
其他需要改進的部分:

  • 輸入欄的文字間隔太大
  • 你是預設註冊 但google跟facebook又寫登入 然後英文版的不知道是註冊還是登入….
  • 連結樣式不一

這個版本就當作錯誤示範放著看吧…

DAY 2 Credit Card Checkout

看到底二天的題目真的很想放棄,表格超難設計的啊…於是找資料先,雖然自己在網路刷卡過幾次,但搞不清楚有哪些欄位。
品牌假設:OCF開放文化基金會的捐款頁就被我拿去實驗了

Day 2 Day2-eng

內容:
捐款金額 / 捐款人名/ 信用卡號 / 認證碼 / 到期日/ 送出 / 階段性提示

我個人很喜歡有設計階段性提示的表單,我覺得填表單很繁複,如果有分階段的提示更能夠減輕使用者對於填資料的煩躁,也不會填完落落長之後失敗後砍掉重練。第二天就走尋常的現代簡約路線,我有把表單弄好就謝天謝地了(哭
第二天犯的錯誤:我在過期日的欄位居然多放了日,通常只要年月就好了啦哈哈哈

DAY3 Landing Page

第三天打算做一些比較特殊的排版,讓他看起來比較有時尚感,我還特地拿做好的頁面給男朋友看:請問這樣的頁面前端工程師會不會想退件,他就詢問其他大小的可能性,於是我就連RWD三個版本都做好了,下次練習CSS就來實作看自己會不會想死吧XD
品牌假設:文青實驗雜誌預購頁

DAY3

DAY4 Calculator

第四天又是很頭痛的題目,計算機。
像這種看似經典又單純的東西反而很難做出新東西,對我來說,計算機只要單純好用就好了根本不需要花俏的視覺,圓的方的也都是差不多,查了許多資料真的就是還沒有突破,就往主題性計算機想去,想到之前很愛用的瘦身app,最喜歡的就是卡路里的計算小幫手,於是朝這方向去想

day4

產品假設:卡路里計算機
內容:
今日總和
個人基本資料
三餐、運動記錄
編輯輸入

隨手畫了草圖就上(每日UI根本沒時間琢磨)
想的時候很完美做的時候哀哀叫,因為要實踐這件事情需要的功能有點多,做完第一個頁面發現計算機不存在XD所以就進入第二個輸入頁面…再繼續下去整個app都做完了吧

後來檢視的時候發現遺漏很多東西,像是基礎代謝應該是個人資料設好就會自己算好一天的限量,今日總和應該會有計算過程之類的

DAY5 App Icon

第五天是做一個app icon,前幾天再找題目就是試圖找g0v的坑來填,想說多麽一舉兩得啊~於是第五天我找了我最喜歡的專案之一“投票指南系列”來進行logo的優化。
過程中很苦惱的是投票章與指南針的權重,希望兩個意象都在但是不要互相搶戲,這個細節是調蠻久的

day 5

立委投票指南

議員投票指南

DAY6 User Profile

第六天要做個人檔案,於是我拿了第四天的計算機主題做延伸,做出該情境下的使用者個人檔案。於是就有了使用者的個人資料記錄、圖表等等資訊

day 6

一樣的每天po出都有很多有經驗的前輩給了許多建議,都很實用!!超感謝大家指教的

本次回饋:

  • 下面的折線圖假如有填充的話,黃色有可能直接被綠色蓋住,所以就看不到的東西了;空心的可能會比較理想
  • 話說你都沒有其他按鍵欸XD
    我知道這是每日主題所限,不過其實做UI最難的地方就是整體的架構然後反應在按鍵怎麼擺上面吧。一個頁面要經過多少操作才會看到、因為這個頁面常常會去所以他的按鍵要離拇指近一點這種事。(我不太清楚分工啦但我覺得這算UI設計師的工作)

另外有人提到我的配色太過接近,對於色盲、色弱的使用者可能會有影響,建議轉成黑白試試看

day 6+

果然在下方的資料區塊就不是原本的感覺了,也有朋友提供一個測試的好工具

Sim Daltonism:可以協助我們檢視各種色弱使用者所看到的世界。超級推薦!!

DAY7 Settings

第七天看到題目也是一陣頭痛,因為剛好這一天很累,所以就不想折磨身體做得比較隨性一點。我從來沒有做過設定頁面,完全不知道該有什麼功能項目XD所以就先找了國外的一個作品當範例,模仿的做了一個。

主題是「治癒之術」,是一個實體的捐血提醒app,之前自己一直想要改UI卻沒有動工…結果從設定頁開始了(怪怪的)

day7

回饋:大部分登出都是在頁面最底下,一方面不希望使用者登出,再者登出的重要次序較低,放底下也比較不容易誤觸。

DAY8 404 page

看到404page就會想要不正經,於是結合時事梗…就變成這樣了(笑)請大家以起來找找這一頁跟我們的新北市長吧(覺得自己很機歪

DAY9+

DAY9 Music Player

第九天做音樂播放器,我選了線上廣播來做,所以有live、訂閱、聊天等等的即時互動功能。© pitpony / pitpony.photography

DAY9

這次收到更多(失誤的)回饋了,感謝大家(720度鞠躬

  • 聊天室下方的向上箭頭有點意味不明,初看像是會收合起來的作用
  • 訂閱是一個 action 所以應該是按鈕佳, 歷史紀錄是一個查閱,以一般連結為佳。這兩者的性質不同,搭配在隔壁其實是很詭異。換個角度來說,訂閱應該只會按一次,按完就不用再出現或是變成“取消訂閱”,歷史紀錄比較會按到吧
  • 左下角的播放清單排序與一般播放器的排序(歌曲依序往下播)相反,可能會有認知上的問題。

DAY10 social share

social share看似不難但要做出不一樣的東西卻是超級難,於是我就想到現在人都有好幾個社群帳號,希望有個啥工具可以一次管理我的社群分享,像是瀏覽器外掛的東西,(當然運行機制我自己沒時間想清楚只想了介面)所以變這樣了。

day 10

回饋:
超新介面,可鞭的點大概是學習程度比較高,第一次看到會不知道怎麼操作。感覺是「分享的設定」,像是 Instagram 要發送照片的時候。喜歡那個類似夾起來的鏈索。如果連接的時候有動畫應該很可愛!


 

以上是十天的紀錄,也學到太多了吧對於我這個沒做過各式各樣介面的人,也感謝在臉書上給我回饋的各位,族繁不及備載(?
寫文章的時候已經開始遲交了XD希望我可以趕上大家的車尾燈啊!!

對「作品|100 Days UI – 1~10 Days記錄」的一則回應

  1. Hi, 無意間發現你的網站, 謝謝你無私的分享你的經驗, 對於從事平面設計工作多年, 最近想轉換跑道到UI設計的我, 有很大的鼓舞, 雖然你很謙虛的說自己在UI的經驗不夠多, 但我還是覺得你設計的很棒 哈! 冒昧請問一下, 你是用哪種軟體設計UI呢? photoshop, sketch or Adobe XD? 最近想開始嘗試設計UI 但我目前只會photoshop 不知道這樣適不適合參加100天挑戰 還是你建議我至少先把skectch或其他UI軟體摸熟 再試試呢 謝謝

    1. hello, 我是用sketch做的,我認為軟體不是問題,況且如果你過去做平面設計的話,illustrator跟sketch相似度很高,一下子就上手了,所以其實不用被軟體絆住,用順手的就對了,不管是photoshop or sketch都好,adobe XD現在還不是完整版不建議嘗試,主流的話是用sketch比較多:)
      希望有幫助到你!

  2. Hi,謝謝你無私分享經驗。
    最近才發現這個100days UI計畫,因為之前沒有做過UI相關經驗,想知道作者的作業只上傳至dribble嗎?
    還是有其他臺灣(或國外)討論社團,可以針對各作業project作討論呢??

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

w

連結到 %s