作品｜100 Days UI – 1~10 Days記錄 - mooon.＿

看到底二天的題目真的很想放棄，表格超難設計的啊…於是找資料先，雖然自己在網路刷卡過幾次，但搞不清楚有哪些欄位。

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

有興趣的人這裡填信箱就可以挑戰哩！http://www.100daysui.com/ DAY1SignUp 第一天的任務是做登入頁面，我想不管是什麼題目都是全然的挑戰吧。

但我發現最難的是不知道要做什麼主題，一直以來，我設計的習慣是為了某個受眾而做，自由發揮根本很少，現在就要虛擬一個品牌、公司或是目的來做作業，自由發揮也是很困難啊！！ 想破頭就挑了一個跟書籍有關的方向 品牌假設：書籍閱讀、販賣交流相關品牌。

內容想像：也許我們有自己的帳號可以記錄閱讀的內容、書評跟社交 於是我希望他有多一些人文氣息，就大膽嘗試用不一樣的質感去做。

相較於一般app的色彩質感的確是長得很不一樣，更像藝術、繪本的溫暖感。

做了中英文也是因為現在很多100UI挑戰都是國外的作品，而且英文常常排起來有一種自欺欺人的美，既然自己是會面對到中文介面，就要挑戰中文囉！ 這個畫面卻犯了一個大錯：我的鍵盤跳出後可能會遮到輸入欄…噢天阿我自己也曾靜在使用其他app的時候罵過這件事情，但真的是自己實作就忘了… 其他需要改進的部分： 輸入欄的文字間隔太大 你是預設註冊但google跟facebook又寫登入然後英文版的不知道是註冊還是登入…. 連結樣式不一 這個版本就當作錯誤示範放著看吧… DAY2CreditCardCheckout 看到底二天的題目真的很想放棄，表格超難設計的啊…於是找資料先，雖然自己在網路刷卡過幾次，但搞不清楚有哪些欄位。

品牌假設：OCF開放文化基金會的捐款頁就被我拿去實驗了 內容： 捐款金額/ 捐款人名/ 信用卡號/ 認證碼/到期日/ 送出 / 階段性提示 我個人很喜歡有設計階段性提示的表單，我覺得填表單很繁複，如果有分階段的提示更能夠減輕使用者對於填資料的煩躁，也不會填完落落長之後失敗後砍掉重練。

第二天就走尋常的現代簡約路線，我有把表單弄好就謝天謝地了（哭 第二天犯的錯誤：我在過期日的欄位居然多放了日，通常只要年月就好了啦哈哈哈 DAY3LandingPage 第三天打算做一些比較特殊的排版，讓他看起來比較有時尚感，我還特地拿做好的頁面給男朋友看：請問這樣的頁面前端工程師會不會想退件，他就詢問其他大小的可能性，於是我就連RWD三個版本都做好了，下次練習CSS就來實作看自己會不會想死吧XD 品牌假設：文青實驗雜誌預購頁 DAY4Calculator 第四天又是很頭痛的題目，計算機。

像這種看似經典又單純的東西反而很難做出新東西，對我來說，計算機只要單純好用就好了根本不需要花俏的視覺，圓的方的也都是差不多，查了許多資料真的就是還沒有突破，就往主題性計算機想去，想到之前很愛用的瘦身app，最喜歡的就是卡路里的計算小幫手，於是朝這方向去想 產品假設：卡路里計算機 內容： 今日總和 個人基本資料 三餐、運動記錄 編輯輸入 隨手畫了草圖就上（每日UI根本沒時間琢磨） 想的時候很完美做的時候哀哀叫，因為要實踐這件事情需要的功能有點多，做完第一個頁面發現計算機不存在XD所以就進入第二個輸入頁面…再繼續下去整個app都做完了吧 後來檢視的時候發現遺漏很多東西，像是基礎代謝應該是個人資料設好就會自己算好一天的限量，今日總和應該會有計算過程之類的 DAY5AppIcon 第五天是做一個appicon，前幾天再找題目就是試圖找g0v的坑來填，想說多麽一舉兩得啊～於是第五天我找了我最喜歡的專案之一“投票指南系列”來進行logo的優化。

過程中很苦惱的是投票章與指南針的權重，希望兩個意象都在但是不要互相搶戲，這個細節是調蠻久的 立委投票指南 議員投票指南 DAY6 UserProfile 第六天要做個人檔案，於是我拿了第四天的計算機主題做延伸，做出該情境下的使用者個人檔案。

於是就有了使用者的個人資料記錄、圖表等等資訊 一樣的每天po出都有很多有經驗的前輩給了許多建議，都很實用！！超感謝大家指教的 本次回饋： 下面的折線圖假如有填充的話，黃色有可能直接被綠色蓋住，所以就看不到的東西了；空心的可能會比較理想 話說你都沒有其他按鍵欸XD 我知道這是每日主題所限，不過其實做UI最難的地方就是整體的架構然後反應在按鍵怎麼擺上面吧。

一個頁面要經過多少操作才會看到、因為這個頁面常常會去所以他的按鍵要離拇指近一點這種事。

（我不太清楚分工啦但我覺得這算UI設計師的工作） 另外有人提到我的配色太過接近，對於色盲、色弱的使用者可能會有影響，建議轉成黑白試試看 果然在下方的資料區塊就不是原本的感覺了，也有朋友提供一個測試的好工具 SimDaltonism：可以協助我們檢視各種色弱使用者所看到的世界。

超級推薦！！ DAY7Settings 第七天看到題目也是一陣頭痛，因為剛好這一天很累，所以就不想折磨身體做得比較隨性一點。

我從來沒有做過設定頁面，完全不知道該有什麼功能項目XD所以就先找了國外的一個作品當範例，模仿的做了一個。

主題是「治癒之術」，是一個實體的捐血提醒app，之前自己一直想要改UI卻沒有動工…結果從設定頁開始了（怪怪的） 回饋：大部分登出都是在頁面最底下，一方面不希望使用者登出，再者登出的重要次序較低，放底下也比較不容易誤觸。

DAY8 404page 看到404page就會想要不正經，於是結合時事梗…就變成這樣了（笑）請大家以起來找找這一頁跟我們的新北市長吧（覺得自己很機歪 DAY9 MusicPlayer 第九天做音樂播放器，我選了線上廣播來做，所以有live、訂閱、聊天等等的即時互動功能。

©pitpony/pitpony.photography 這次收到更多（失誤的）回饋了，感謝大家（720度鞠躬 聊天室下方的向上箭頭有點意味不明，初看像是會收合起來的作用 訂閱是一個action所以應該是按鈕佳，歷史紀錄是一個查閱，以一般連結為佳。

這兩者的性質不同，搭配在隔壁其實是很詭異。

換個角度來說，訂閱應該只會按一次，按完就不用再出現或是變成“取消訂閱”，歷史紀錄比較會按到吧 左下角的播放清單排序與一般播放器的排序（歌曲依序往下播）相反，可能會有認知上的問題。

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

回饋： 超新介面，可鞭的點大概是學習程度比較高，第一次看到會不知道怎麼操作。

感覺是「分享的設定」，像是Instagram要發送照片的時候。

喜歡那個類似夾起來的鏈索。

如果連接的時候有動畫應該很可愛！   以上是十天的紀錄，也學到太多了吧對於我這個沒做過各式各樣介面的人，也感謝在臉書上給我回饋的各位，族繁不及備載（？ 寫文章的時候已經開始遲交了XD希望我可以趕上大家的車尾燈啊！！ 分享此文：TwitterFacebook請按讚：喜歡正在載入... 相關 文章分頁導航 碎念觀點｜我與最陌生的鄰居，韓國泰文｜學習方法日記11/11 對「作品｜100DaysUI–1~10 Days記錄」的一則回應 Hi,無意間發現你的網站,謝謝你無私的分享你的經驗,對於從事平面設計工作多年,最近想轉換跑道到UI設計的我,有很大的鼓舞,雖然你很謙虛的說自己在UI的經驗不夠多,但我還是覺得你設計的很棒哈!冒昧請問一下,你是用哪種軟體設計UI呢？photoshop,sketchorAdobeXD?最近想開始嘗試設計UI但我目前只會photoshop不知道這樣適不適合參加100天挑戰還是你建議我至少先把skectch或其他UI軟體摸熟再試試呢謝謝 讚讚 回應 hello,我是用sketch做的，我認為軟體不是問題，況且如果你過去做平面設計的話，illustrator跟sketch相似度很高，一下子就上手了，所以其實不用被軟體絆住，用順手的就對了，不管是photoshoporsketch都好，adobeXD現在還不是完整版不建議嘗試，主流的話是用sketch比較多:) 希望有幫助到你！ 讚讚 回應 好的我會試試看謝謝你！ 讚讚 Hi,謝謝你無私分享經驗。

最近才發現這個100daysUI計畫，因為之前沒有做過UI相關經驗，想知道作者的作業只上傳至dribble嗎? 還是有其他臺灣(或國外)討論社團，可以針對各作業project作討論呢?? 讚讚 回應 hello 我之前是發在自己的臉書，後來有朋友創了一個臉書社團跟很多人一起100daysUI 現在是會一起讀文章或是討論UI，有興趣你可以加入一起交流喔～ https://www.facebook.com/groups/895693593842577/?fref=ts 讚讚 回應 發表迴響取消回覆 在此輸入你的回應… 在下方填入你的資料或按右方圖示以社群網站登入： 電子郵件（必須填寫）（電子郵件地址不會公開） 名稱（必須填寫） 個人網站 您的留言將使用WordPress.com帳號。

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

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

( 登出 /  變更 ) 取消 連結到%s 透過電子郵件通知我後續回應。

有新文章時用Email通知我。

Δ 追蹤 已追蹤 mooon.＿ 加入其他1,822位關注者 我要註冊 已經有WordPress.com帳號了？立即登入。

mooon.＿ 自訂 追蹤 已追蹤 註冊 登入 複製短網址 回報此內容 以閱讀器檢視 管理訂閱 收合此列   載入迴響中...   發表迴響… 電子郵件(必要) 名稱(必要) 網站 %d位部落客按了讚：