Daily UI #006 User Profile,一段停不下來的瘋狂修改

Mio
斜槓女紙
Published in
Jun 24, 2019

嗨! 慢速UI 100邁入堂堂第六週,本週陷入了瘋狂的修改之旅,導致文章慢了一個禮拜才生出來QQ

從本篇文章開始,要稍微調整一下寫文的方法。前幾週的文章一直沿用著小妹在寫另一個部落格的聊天式寫法,但看了一輪覺得有點雜亂無章了。思考過後決定從這邊開始稍微改個方式,希望能找到比較適合的寫法。

使用情境:

  • 線上電子書發布、觀看平台,有點類似好幾年前的「冒險者天堂」或是「起點中文網
  • 作者介紹頁面,展示所有文章數、書籍、最新發布文章、追蹤人數,並可直接點擊追蹤該作者

配色:這次從【NIPPON COLORS — 日本の伝統色】中挑選了銀鼠(#91989F)、淺蔥(#33A6B8)做為主色系,輔助色則使用 #4A4A4A 和白色 #ffffff

#Daily UI #006 User Profile Wireframe

製作過程:原先想採用簡單的線條做出仿海報式的設計,但製作的途中怎麼看怎麼不順眼,改了好幾次還是沒能滿意,最後參考了幾家自己平常會看的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下,我有機會得到內容創作的酬勞🙂

--

--

Mio
斜槓女紙

每天努力克服拖延症,致力於斜槓人生。