據(jù)說點擊藍色字體關(guān)注同學(xué)都升職加薪了

靜電說：今天的案例賞析欄目咱們?yōu)榇蠹医榻B的是-百！詞！斬！百詞斬是一款外語學(xué)習(xí)工具，看到“斬”這個字就讓我們感覺是像水果忍者在切水果一樣。

而我們看到的LOGO確實很有趕腳。斬！斬！斬！

而百詞斬使用類似于克萊因藍的藍色，這是一種讓人著迷的藍色。至于這款藍色的來源，咱們可以百度一下看看。

百詞斬的啟動界面上布滿了單詞，第一次看壓力山大，什么時候才能把這些詞斬干凈呢？而閃屏則隨機進行詞匯的輪播，通過詞匯和具體場景描述的結(jié)合，讓用戶隨時都遨游在詞匯的海洋里。

首頁采用淺灰色+白色卡片（淺色陰影）結(jié)合的方式，下方右圖是我做的示范，陰影一定要淺淺的，最好是3%左右的黑色，這樣就很有效果了。然后首頁使用了一個主題色藍色作為按鈕，讓用戶一進首頁就聚焦到“開始背單詞”這個按鈕上。

接下來我們看看商城頁的設(shè)計要點，商城頁雖然列表占主要部分，但是設(shè)計師巧妙的將列表也分為幾個模塊，每個模塊用不同的顏色和Title包裹起來，看起來非常有聚焦感，便于用戶進行分類選擇。這一點做的很棒，很多的小細節(jié)造就了優(yōu)秀的設(shè)計，我們可以學(xué)起來哈。

而商城頁各種卡片（磁片）的設(shè)計也讓整個頁面一點都不混亂。

發(fā)現(xiàn)頁面，設(shè)計師采用了更多的瓷片，單個瓷片的設(shè)計采用對角線布局，左上方主副標題，右下角則放上圖形，整個頁面的識別度非常高，讀起來很爽快。靚麗的顏色的使用讓這些瓷片非常討喜。

“我”這個頁面幾乎是現(xiàn)在所有應(yīng)用的標配，百詞斬走清淡風(fēng)路線，上方的背景采用了豎向線條，很具個性，頭部又不會顯得過重。而意見反饋是設(shè)計師都會忽視的頁面，設(shè)計師非常貼心的在這個頁面也做了不少處理，比如頭部的插畫。讓我們感覺應(yīng)用給人的感覺非常親切。

綜上：百詞斬中我們要學(xué)的就是克萊因藍作為點睛色的使用，視覺重點如何引導(dǎo)，清淡的瓷片區(qū)畫風(fēng)和設(shè)計細節(jié)的處理都非常到位。這些設(shè)計小巧思，設(shè)計師小伙伴可以學(xué)起來哈！

《靜電的UI設(shè)計教室》6月班來啦

從2015年到2022年

40多期精心打磨與進化的

高含金量UI小班課程

追加多個大廠面試題作業(yè)強化訓(xùn)練

求職面試更加游刃有余

插班名額火熱搶先報名ing

名額有限

↓↓長按二維碼加靜電老師咨詢↓↓