配色:這次從【NIPPON COLORS — 日本の伝統色】中挑選了銀鼠(#91989F)、淺蔥(#33A6B8)做為主色系,輔助色則使用 #4A4A4A 和白色 #ffffff
製作過程:原先想採用簡單的線條做出仿海報式的設計,但製作的途中怎麼看怎麼不順眼,改了好幾次還是沒能滿意,最後參考了幾家自己平常會看的APP設計(Webtoon、comico、iReader)。
最終結合了下面幾個概念:
- Instagram:使用者/瀏覽者 看到的個人介紹頁面皆相同
- Webtoon:能直接看到(不同作者)的作品,可進行搜尋、看到漫畫簡介、作者介紹。
- iReader:在統一介面管理私人設定、訊息,以及觀看文章時的字體、背景…等細節設定。
稍稍去蕪存菁了一下,設計出了符合我心目中的線上書城介面設計,以作者介紹頁面為主(本週主題),以及我覺得在這個頁面上該展示些什麼資訊給瀏覽者。
GIF Mockup展示
同樣使用 Principle製作,畫面可以左右滑動瀏覽該作者的所有書籍。以瀏覽者為預先支付觀看代幣的情況下,點入最新連載文章後可以直接觀看文章內容。
這次製作時在「左右滑動」這個特效卡了一下,還好後來想起了以前買了 Pablo Stanley 的教學課程:「UI Animation using Sketch 3, Principle App, and Flinto」(課程連結點我)
順利的在課程中找到所需的特效教學,課程雖然是全英文教學,但老師講話有特意控制速度,而且沒有用到很難的單字,新手也可以很容易上手喔~~
以上就是本週的慢速UI 100,接下來的#007和#008考慮到題目可以和#006 User Profile 連結,所以會是同系列的設計喔~
喜歡本週的文章請幫忙拍手給我個鼓勵,我會更努力每週發文的!
你有更多的問題嗎?你有什麼建議呢?
歡迎在下方留言,或加入我的臉書粉絲頁一起討論!
【免費支持】如果你幫我拍手5下,我有機會得到內容創作的酬勞🙂