• 相關文章
  • 文字效果
  • 調色教學
  • 合成教學
  • 去背教學
  • 照片後製
  • 電腦繪圖
  • 設計教學
  • 動畫教學
  • 簽名製作
  • 其他教學
  • Illustrator
  • CorelDraw教學
  • 攝影教學
  • 3DMAX教學
  • AUTOCAD教學
  • MAYA教學
  • FireWorks教學
  • flash教學
  • 繪畫教學
  • PS作品欣賞
  • 包裝設計範例
  • LOGO設計範例
  • 封面設計範例
  • 名片設計範例
  • CG繪圖設計
  • 海報設計
  • 網頁設計範例
  • PS筆刷下載
  • PS濾鏡下載
  • PS動作下載
  • PS背景下載
  • PS樣式下載




  • 【 設計理論】5個大神級方法幫你APP設計完美瘦身




    5個大神級方法幫你APP設計完美瘦身

    這一次的教學是屬於設計理論領域中的設計理論的相關教學。

    文章出處是來自騰訊UED的設計理論類文章,寫教學的作者是死貓,感謝死貓提供設計理論的實作教學。

    教學大綱:

    編者按:移動端App越來越胖了。越來越多的新特性正在啃蝕着大型App的用戶體驗,瘦身減肥也成了亟待解決的問題。手心手背都是肉,這一身肥膘要怎麼減呢?來看看騰訊ISUX的死貓君的處方吧,五大秘技,不要錯過喲。


    設計理論教學開始

    編者按:移動端App越來越胖了。越來越多的新特性正在啃蝕着大型App的用戶體驗,瘦身減肥也成了亟待解決的問題。手心手背都是肉,這一身肥膘要怎麼減呢?來看看騰訊ISUX的死貓君的處方吧,五大秘技,不要錯過喲。

    先來看一張圖:

    5個大神級方法幫你APP設計完美瘦身

    圖上看到,所有平台上用戶花費時間都在減少,除了移動端。觀察身邊也是如此,回家不開電腦的小夥伴越來越多。手機平板加電視,下班場景全搞定。連那些以前電腦苦手的長輩,現在也都活躍在朋友圈上,無責任轉發各種小道消息、心靈雞湯以及人生真諦。

    上次在朋友圈發了一張圖,曬同事“中二病”的葯,立刻被家裡長輩好幾通電話,一定要我解釋解釋什麼叫中二病…(對治療中二感興趣的同學請自行淘寶搜索)

    隨着用戶時間傾斜到移動設備上,移動App對PC軟件的取代作用也隨之放大。用戶期望App能一站式解決所有需求,不需要再切換平台操作。比如網購,從瀏覽到下單到支付,需要在一台移動設備上搞定。但隨之而來的問題是,一些移動App重走PC軟件老路,走向臃腫化。

    App的臃腫化,一方面是用戶需求使然,另一方面也標誌着移動互聯網進入下半場。大型App,平台型App開始出現,App的功能不斷縱深和外延。然而手機的小屏幕和用戶的碎片化使用場景,畢竟不如PC互聯網時代的大屏幕,發揮空間有限。照搬PC的大而全的App,很容易遭用戶唾棄。

    所以,App腫了腫么辦?

    5個大神級方法幫你APP設計完美瘦身

    一、整合

    俗話說要想瘦,先學吃。

    現實中,大部分的App還是在不斷地添加着新功能。如何更合理地添加功能,使App胖得有節操,是消腫的第一步。

    1. 擴充導航

    通過擴展菜單或導航,加入新的功能模塊,是一個非常有效地添加新功能的模式。

    如Path在3.0改版時,增加了了表情商店功能,在側滑導航中添加一個新項就搞定了!

    側滑導航現在越來越常見,一個重要原因就是因為它充分利用了屏幕的縱向高度,具有良好的擴展性。

    5個大神級方法幫你APP設計完美瘦身

    Acompli是一款郵箱App,如果你通過手機收發Exchange郵件的話,那它絕對值得一試。

    這裡只看它的架構,和系統默認Mail App相比,Acompli用Tab的形式,把日曆,文檔,聯繫人都整合到一個App里。尤其是郵件、日程、待辦的整合,對於郵箱重度用戶來說,不得不說是相當高效的設計。不過即使整合地再合理,Acompli整體感覺還是會稍微偏重,取捨就看個人了。

    5個大神級方法幫你APP設計完美瘦身

    2. Dashboard式的首頁

    該模式下,更適合有多個獨立子功能模塊的App。比較典型的案例,照片處理類產品,如美圖秀秀,百度魔圖,天天P圖等。Dashboard模式的優點是擴展性強,缺點是各模塊相互分裂。如Line Tools這款App,本身就是各種小工具的集合,相互之間沒有關聯,就非常適合Dashboard模式。

    5個大神級方法幫你APP設計完美瘦身

    3. 增加流程分支

    在一些線性操作的App中,功能整合很可能發生在支線節點上。如Instagram為了進軍微視頻領域,而整合的視頻功能。在拍照這裡給了一個分支入口,進入視頻拍攝模式。

    5個大神級方法幫你APP設計完美瘦身

    二、插件

    解決App臃腫,不得不提的就是插件化設計,試以微信舉例。

    微信在集成了聊天,交友,社交媒體,生活服務,社交網絡,表情平台,遊戲商店如此龐雜的功能的情況下,安裝包不過30M出頭,很大程度上依賴於插件化的設計思想。

    1. 界面框架

    微信早期就搭了一個非常有利擴展的界面框架。這使得微信那麼多版本,不斷增加新功能,但每次新版看起來都變化不大,總是熟悉的4個Tab。每個Tab就像一塊主板,功能像內存一樣插在上面。

    2. 外部插件

    相比內部插件,外部插件的耦合度更低,但是功能更強大。如微信在聊天窗口中,點擊加號>應用,可以將其他應用的內容發送給好友。

    5個大神級方法幫你APP設計完美瘦身

    3. 功能可配置

    微信相當一部分功能可配置,非常靈活,比如漂流瓶功能,不用的話就可以關閉。還有些功能,當你不用到的時候是不可見的,如公眾號。功能可配置+無感化,使得微信在這麼大的體量下,依然可以保持相對簡單。

    5個大神級方法幫你APP設計完美瘦身

    三、分拆

    插件化是非常好的思路,但並非每個App都如微信這般,要往平台化方向發展。最近很多國外的App拆分,也是應對功能App臃腫的好方法。如foursquare一拆為二,把簽到功能單獨孵化成Swarm App。Facebook動作就更大了,拆分Messenger,試水Paper,下架Poke。App分拆之後,Facebook不用小心顧忌影響主App,可以大刀闊斧的迭代和試錯。Google Drive拆分文檔和表格應用,也是一例。

    App拆分的好處是,單個App可以更聚焦,擁有更良好的用戶體驗。

    一個更具代表性的例子或許是Line了。基於Line本身的成功,Line公司推出了一系列App,可以稱之為App矩陣。各App功能獨立,但在品牌上保持了高度的一致性。通過品牌和Avatar帶來的強大影響力,App矩陣進一步增強用戶黏性,並非常成功地輻射到周邊產品。

    5個大神級方法幫你APP設計完美瘦身

    四、拉動

    我非常欣賞Facebook、Google對App的殺伐決斷。

    但是App分拆確實也會帶來一些問題:新App需要從0開始積累用戶。

    而通過已有App去拉動新App的量,是最簡單直接地方式。

    下面來看看拉動有哪些做法。

    1. 廣告

    InstaFood是一款給照片添加美食信息的App。

    左下是它的主界面。通過Drawer切換到What’s new界面時,InstaFood會推送一些廣告,比如下圖這幾個妹子自拍,推薦用戶下載他家另一款App Selfiegram。

    5個大神級方法幫你APP設計完美瘦身

    2. 入口

    Line Camera的最後一個Icon,Pick。看起來和其他icon類似,是一個功能入口,實際上Pick是Line的另一款獨立App。點擊這個icon之後,會跳轉到Pick的產品介紹頁。

    5個大神級方法幫你APP設計完美瘦身

    3. 產品列表

    產品列表模式的應用,更多見於系列App上。如Tapbots這家我很喜歡的公司,他們的設計自成一格,有一批固定粉絲。在App的關於界面,列出了Tapbots的所有產品列表,引導腦殘粉去購買其他幾款App。

    5個大神級方法幫你APP設計完美瘦身

    4. 應用推薦

    另一類做法更討巧些,在App中內置應用推薦模塊,如手機管家Android版。推薦優質App的同時,當然舉賢也不能不避親,順便拉動自己公司的其他App:)

    5個大神級方法幫你APP設計完美瘦身

    五、打通

    App間的拉動,更多見於功能獨立的App之間。

    對於一些功能耦合度較高的App來說,App間的打通是非常重要的設計點。

    1. 插件式打通

    插件式的打通,比如在Line中調起Line Camera,在Line Camera中完成任務后,帶着結果返回到Line。調用的只是Line Camera功能的局部,始於拍照界面,終於分享界面,是一個封閉的流程。設計師需要關注的重點是,起點和終點兩個體驗銜接的地方,以及過程中的分支差異化處理,以保證流程的封閉性。

    5個大神級方法幫你APP設計完美瘦身

    2. App間打通

    點擊Facebook的Tab bar上的Messenger按鈕,就會直接跳轉到Messenger App。不同於插件式打通,這裡並不是一個封閉流程,Messenger的所有功能可用。而在Messenger App中,全局的頭部高亮區域,可以回到Facebook App,體驗非常精準而流暢。這裡Messenger App頭部的全局返回是一個亮點,跨Tab全局一致,在單獨打開Messenger App時不可見,不會影響到Messenger單獨使用時的體驗。

    5個大神級方法幫你APP設計完美瘦身

    打通的做法目前還不多見。在系統App中,如iOS通訊錄,電話,短信,Facetime中也有體現。但隨着App分拆變多之後,多個App之間的協同設計,應該引起設計師關注。

    結語

    移動互聯網不是傳統互聯網的延續,更應視作顛覆。PC時代的龐然大物,不會也不應該出現在移動平台上。

    對於增肥中的App,我們需要更有規劃地整合新功能。對於過於臃腫的App,通過合理地插件化/分拆,App間的拉動/打通,才能在小而美和功能複雜性之間找到平衡點。

    — —

    文章永久連結為: 5個大神級方法幫你APP設計完美瘦身