本文主要有兩個部分：第一部分，用上周的文章思路來重設(shè)計一個案例；第二部分，總結(jié)移動端的常用設(shè)計模式。

在上周的文章《如何在不影響用戶體驗的前提下將設(shè)計變得有創(chuàng)意》，本周通過重新設(shè)計手機(jī)系統(tǒng)鬧鐘的三個頁面來繼續(xù)實戰(zhàn)一下。

來自榮耀8系統(tǒng)鬧鐘頁面

重設(shè)計“重復(fù)”頁面

目前方案：左上 重設(shè)計方案：右上

目前的方案比較常規(guī)，采用列表控件進(jìn)行單選。這里存在的一個問題是：有些選項條目信息存在交集，并不是互斥的，所以目前的選項條目做的就有點累贅，信息還可以進(jìn)行更好的整理。

從目前的方案可以看出“星期”是一個很好得出發(fā)點，所以重設(shè)計的方案我選擇使用按鈕控件展示星期，支持多選。

重設(shè)計“編輯鬧鐘”頁面

目前方案：左上 重設(shè)計方案：右上2個

這個頁面的重設(shè)計思路源于上周的可視化一步，鈴聲和振動可圖形化，簡單的改變讓頁面更豐富。

重設(shè)計“鬧鐘”頁面

在講這一頁面的重設(shè)計之前，想先說明一下移動端內(nèi)容區(qū)域常用的幾種設(shè)計方案。

NO1列表

列表是最常見的的設(shè)計模式，從上往下布局順序也符合移動端從上往下的操作習(xí)慣。單個條目可根據(jù)信息復(fù)雜度設(shè)計條目詳細(xì)程度。但列表設(shè)計方案中規(guī)中矩，并不出彩。

NO2輪播

Banner就是典型的輪播形式，單個頁面聚焦一項任務(wù)/信息，清爽干凈。微信閱讀首頁采用輪播的設(shè)計形式使得它在閱讀類應(yīng)用中脫穎而出。但輪播的一大缺點是所能承載條目有限，條目過多用戶所需滑動的步驟相應(yīng)增加。

NO3網(wǎng)格

當(dāng)我們打開手機(jī)，所有的應(yīng)用程序均是以網(wǎng)格形式布局的。還有一個典型的程序就是支付寶。網(wǎng)格布局將屏幕的空間得到有效的利用。但是可以發(fā)現(xiàn)，單個網(wǎng)格可承載的信息量很少，而且像支付寶移動服務(wù)位置后，用戶沒辦法一下子找到。

NO4瀑布流

瀑布流常見于以圖片為主的應(yīng)用程序，如花瓣，向下滑動時不斷展示圖片給用戶良好的游覽體檢。缺點是可承載的信息量較少。

然后，筆者將移動端的三種常用設(shè)計模式運用到重設(shè)計中，瀑布流適用于圖片游覽類，鬧鐘場景并不適用。

方案一，列表。和目前的設(shè)計方案區(qū)別不大，中規(guī)中矩并不出彩。

方案二，輪播。頁面非常簡潔干凈，但是單屏只有一個鬧鐘不太實用。當(dāng)添加的鬧鐘多時，這樣的設(shè)計操作比較累贅。

方案三，網(wǎng)格。網(wǎng)格方案比輪播而言，可以在單屏上放更多內(nèi)容。比列表而已，增加了可視化的鬧鐘圖形，情感化更加吸引人。

綜上，筆者選擇網(wǎng)格方案作為最終的解決方案。

目前方案：左上 重設(shè)計方案：右上

最后，筆者以為這樣一步步推到設(shè)計方案的方式對筆者而言是鍛煉思維很好的方式，從中學(xué)到很多東西，不失為交互學(xué)習(xí)的一條途徑。