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

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

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

DAY 1 Sign Up

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

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

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

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

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

DAY 2 Credit Card Checkout

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

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

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

DAY3 Landing Page

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

DAY4 Calculator

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

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

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

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

DAY5 App Icon

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

立委投票指南

議員投票指南

DAY6 User Profile

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

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

本次回饋：

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

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

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

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

DAY7 Settings

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

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

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

DAY8 404 page

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

DAY9 Music Player

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

這次收到更多（失誤的）回饋了，感謝大家（720度鞠躬

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

DAY10 social share

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

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

---

 

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