移動互聯網的極簡設計之法

課程簡介

偉大的設計都是簡單的。當你的設計無法再簡單一步時，她就在接近完美。這個原理跨越歷史、文化和種族。

本課程中，來自騰訊移動互聯網設計中心的助理總經理陳謙與大家討論的設計簡單不是一種設計風格，與當今流行的扁平化無關。而是在設計中對簡單的定義，以及結合了理論原理與身邊案例的如何做出極簡設計的一系列方法。方法無對錯，缺失態度有對錯。希望喚起更多有態度的設計師。

學習獲益

1、體會對“簡單”的定義

2、了解如何做出簡單設計的方法

推薦人群

對用戶體驗感興趣的專業或非專業人士

文字實錄

偉大的設計都是簡單的。當你的設計無法再簡單一步時，她就在接近完美。這個原理跨越歷史、文化和種族。在2015國際體驗設計大會上，騰訊移動互聯網設計中心助理總經理陳謙帶來了主題為“極簡設計之路”的演講。

在這里和大家分享過去一些年里我自己對設計的思考。先簡單介紹一下，我來自于騰訊MXD，我們絕大多數工作和移動互聯網產品相關，恰巧今天我想講述的內容以及這中間的很多思考都是基于移動端的產品。

先分享一個詞：信條

“設計信條”對設計師的長期發展非常關鍵。關于設計的思考某種程度上也可以理解為關于設計信條的建立。時光倒退回2007年，那時我接觸了很多電子產品，例如這是我當時買的一部智能手機，讓我感受到科技的進步并沒有讓生活變得更加簡單和愉悅，甚至有時讓我們生活變得更加復雜。作為一個設計師我常常問自己，如果只有一次機會用一個詞去形容，在當前或未來相當長一段時間內，我希望用戶體驗到底是什么樣？這個詞對我來說就是“極簡”。

定義簡答

先討論一下定義簡單是什么。近幾年當和很多朋友聊到極簡時，往往第一個問題是，簡單是不是就是現在流行的扁平化，包括架構扁平化或視覺扁平化？我的答案是否定，簡單和扁平化沒有直接的關系。簡單的作品可以是非扁平化的，同樣扁平化的作品如設計不恰當仍然可能是復雜的。到底什么是簡單？先來看四個建筑作品：雅典神廟、包豪斯校舍、朗香教堂、克朗樓。雖然它們的表現風格迥異，但我認為他們都是同樣的簡單。因為，我把簡單定義成合理，美學上的合理、邏輯上的合理。那么“極簡”就是“極度的合理”。今天我們將要討論的“極簡”和設計作品外在的展現風格無關，但和內在本質有關。

極度合理的設計

如果說我們如何做出極簡設計，2007年之后，在這方面有持續的思考和項目上的實踐，這里分享六點：第一，消失的選擇；第二，高效的分組；第三，極致的信噪比；第四，鑒定的整體優先；第五，平衡的腦體力；第六，明確的主次。

消失的選擇

回到那部手機，當時我就會想為什么一個手機讓生活變得更加復雜，是不是因為那個年代的很多電器把大量的功能進行外露帶來記憶或者是操作上的成本，后來發現并不是，那么原因是什么？可能是選擇。當光標焦點從A移到B有四種選擇，當輸入文本時有三種選擇。這些選擇意味著什么？我們討論和選擇有關的理論，就是希克法則。從圖表中可以看到橫軸代表的是一個用戶面臨的選擇數量，縱軸代表的是所需要做出決定的時間。從曲線可以發現，當一個用戶面臨選擇數量越多所需要做出決定的時間越長，效率就越低。換句話說當把選擇數量降到1做出決定時間最短。這個法則在產品設計中得到非常好的體現。在講智能手機，大家往往會把蘋果作為智能手機上的標桿，下面以蘋果為例看一下。

蘋果把移動光標選擇從4減到1，文本選擇從3減到1，打開選擇從2減到1?？匆幌耊indows，從Windows98開始有一個快捷菜單，當打開快捷菜單的軟件右邊會出現軟件入口，軟件入口會重復出現快捷菜單和右側按鈕，這就帶來一定選擇，Windows7進行了改進。

這是2年多前的手機QQ瀏覽器設計版本，當時一些功能會散布在頁面或者軟件中多個不同的地方，比如說加書簽這個功能會出現在頁面的左上角和頁面底下。

新版本遵循的設計原則之一，一個功能入口只出現在一處。相比較一個功能入口散布在多個地方，更愿意集中所有的精力把唯一入口體驗做到最棒。

我把產品設計中經常會帶來選擇的原因分成五類，重復性的東西、無需求東西、不一致東西、過于細化東西、多功能東西。對于其中每一類都有相應的解決辦法，剛才討論的案例都是聚焦在第一類，就是重復性的東西。

我分析近十年來在業界受到廣泛認同的優秀產品的案例，無論是新發布的產品，或者是現有產品的更新，無論是桌面端、Web、移動端，無論是軟件還是硬件，都有一個共同的趨勢，我們的選擇在消失，偉大的產品從選擇消失開始。

高效分組

這是真實的案例，我前面的乘客按了半天按鈕電梯也沒有動，最后發現他按的是數字不是按鈕。這個案例中電梯面板的排版非常松散，甚至難以發現其中一個按鈕是屬于左邊樓層還是右邊樓層。再看另一個案例，信息分組清晰了一些但并不完美，開門關門鍵和樓層鍵并沒有明確的區分。再看下一個案例，這是一次旅行時在郊外小旅館見到的電梯，給人意外的驚喜。哪怕通過按鈕的位置排布和顏色，就可以把電梯面板的分組效率和愉悅感提升一個檔次。

接下來聊一聊有關分組的理論，就是格式塔原則。

格式塔心理學又稱為完形心理學，它包含一系列的定律。在頁面排版設計中常會用到兩個定律。第一個是接近率，大腦會把物理距離上接近的物體歸為一類，就像這個例子。第二個是相似率，大腦會把某些屬性上相似的物體歸為一類，例如形狀、色彩、字體、陰影等。相似率和接近率是界面設計中非常依賴的兩個定律?？此坪芎唵?，但很強大，也會給設計帶來非常大的挑戰。我們會發現這兩個定律會交織、會平衡、甚至會產生矛盾。

例如這個案例，我們很自然認為左邊6個點一組、右邊6個點一組。當賦予色彩后有一些糾結，可能你會覺得紅的一組、黑的一組。再賦予形狀后又糾結，可能會覺得左邊一組、右邊一組。最后當我們賦予分割線后，你會認為上面一組、下面一組。界面設計中的圖形排版在抽象后無非通過這樣幾種方式。

這是iOS的設置頁面，典型的列表界面。為什么我們會認為頁面元素分為三組？因為接近率在起作用。為什么會認為中間每個條目層級是平等的？因為相似率在起作用。

這張圖左邊是iPhone 4，右邊是iPhone 6。4的響鈴鍵和音量鍵之間的間距很等同，6有明顯的區分，這是接近率的改進。這張圖是一次晚上在公共汽車上，讓你觸摸的扶手是黃色，不讓你觸摸的門框也是黃色。這張圖是自動扶梯，讓你站的地方是黃色，不讓你站的地方也是黃色。這是第二個扶梯，讓你站的地方是綠色，不讓你站的地方是黃色，色彩更合理但并不完美，讓你站的地方有些是綠色有些沒顏色。這是第三個扶梯，目前最佳案例，似然還不完美但至少相比前兩個在定律上沒有錯誤。

接近率與相似率相比，相似率對界面設計更加重要，我認為相似率是圖形界面的認知基礎。這是應用寶的一個圖文并茂的列表頁面，因為相似率我們才可以將它識別成一個界面，才可以把相似的按鈕歸類，把相似的尺寸縮略圖歸類，才能高效地處理信息。

這是騰訊地圖的地圖，幾乎沒有文字。為什么我們能夠識別路網層級、湖泊和綠地？因為相似率。

相似率非常重要，我認為設計圖形界面在某種程度上可以說是在設計相似性。讓邏輯上相似的物體在表現形式上相似，讓界面元素既豐富又有內在的統一。

信噪比

這個詞出現在很多領域，音箱器材、設想器材，這是70、80年代收音機非常經典的款式，聽過磁帶播放的同學會記得好的器材和差的器材在播放磁帶時噪音會有非常明顯的不同。信噪比在設計上也有所體現，講信噪比之前先看一下理論，1949年他們發布的模型，大概描述的是用戶A和用戶B通過電腦之間溝通的過程，用戶A也就是信息源，信息源把語音通過發射機就是話筒編碼成電子信號，通過通道轉給接收機就是聽筒，然后傳給目的地，也就是用戶B，這是很簡單的過程。

模型被很多領域所采用，在設計行業這個領域也有適用的地方，我自己進行了改變，結論是如果想提高設計師和用戶之間的溝通效率，有如下四條要求：增強信號、降低噪音、控制信息總量、統一設計師和用戶之間的密碼本。

舉一個淺顯和清晰的例子來說明如何增強信號，這是2011年同一天我截的3個首頁，這是XBOX、索尼的首頁，這是蘋果的首頁，如何增強信號，在視線流、面積、視覺重量上最突出的元素保持一致，這時信號就可以最強。XBOX在視線流、視覺重量上有所矛盾，并不是很清楚。中間沒有圖形，字體是最顯著，界面焦點或者是重點比較分散。索尼在視線流和重量上一致，但是面積并不是一致，地下面積比上面大。蘋果再看完全一致。信噪比最終目標是能否做到極致信噪比，頁面上每一個元素，每一個像素都有存在的意義。也就是說像素是信號不是噪音，如果能做到這一點，我們作品就可以達到極致的信噪比。

這是我分享三點關于極簡設計的想法，最后重復一下，設計信條很重要。