當我們在做原型時,我們在做什么?

0 評論 21935 瀏覽 65 收藏 16 分鐘

我們如何看待工具?為什么學習工具是為了理解媒介?為何我們要做原型?原型設計的原則是什么?為什么說好的思維是結構化的解構?欲知詳情,請往下閱讀。

利用

我們如何看待工具

有一種觀點:設計師不要學太多的軟件,精通一種就好了,更重要的是你的思維。

從個人技能上,這個說法沒錯,但它可能忽視的是,思維和工具,并不獨立。因為所謂工具,其實是思維的被封裝與具象化,而你使用工具的過程,便是對這思維的習得和解碼。就像閱讀從不是一個單方面行為,而是讀者和作者思維的無聲交流。你閱讀書,書塑造你。

而你總不能只讀一本書,只讀一類書。

一個錯覺是,我們在利用工具。更精確的說法是,我們和工具彼此利用。

人類的起源時期,石制的手斧是最早的常用武器??墒甲嫒祟惖氖滞蠼Y構,很難提供足夠的腕力來緊握一些小物體。進化的車輪下,一塊新手骨出現了,這塊叫第三掌骨的結構,給了這批新人類更強的握力、更精細的手部動作,也意味著對工具更精確的掌握,而這也意味著:進化的優勢。

到底是我們根據雙手的形狀打造了工具,還是我們的雙手進化成了可以握住工具的形態?

循環

學習工具是為了理解媒介

在一個新的媒介產生的初期,用于生產內容的工具是來源于舊媒介的。

許多視覺設計師習慣用Photoshop來進行網頁和APP界面設計,但Photoshop的本質依然是一款位圖處理軟件,是以印刷為主導媒介的時代產生的主力工具。在這個階段,新媒介的形態也會受到舊工具的影響。Photoshop作為WEB/APP設計主力的時代,也是擬物化設計最盛行的時代。

隨著新媒介的發展,必然會出現適應新媒介的新生產工具。

因此一款更加適應新媒介的工具的產生和流行就是一種必然。Sketch的興起不是單純的因為它“簡潔易用”,而是其形態更貼近于信息時代媒介的本質屬性。新工具的每一個功能從設計初始,就做好了和新媒介做無縫嫁接的準備。如今的設計師不再需要付出從位圖到代碼的轉換成本,一個開源的插件就能將樣式轉化為CSS代碼,盡管現在不夠完美,但方向是可見的:工具的發展將不斷減少中間步驟,趨近媒介本身的形態。

新工具的不斷產生會擴充媒介的外延,并最終產生新的媒介形態。

工具的進化不僅僅是適應媒介,同時也在塑造和擴充媒介。從Photoshop到Sketch,從擬物設計到從現在的Complexion Reduction,對材質的棄用、對顏色的克制、對圖標的簡化,工具的進化更替暗合著設計的風格迭代。

信息成為了設計主體后,動效設計就應運而生。如果說扁平化是在設計“信息”,那動效設計就是設計“信息的傳遞”。新的工具隨之如雨后春筍,Origami、Framer、Form、Pixate、Flinto、Principe、Atomic……設計師從來沒有過這么多的選擇,而在這些選擇背后,是更新的設計形態孕育在襁褓之中。

成為

為何我們要做原型

在交互設計師的工作流里,有一個重要部分叫“原型設計”。而當我們在做原型時,我們在做什么?

或許一開始你用紙和筆勾勒出網站或應用的輪廓,就像給一幢大廈搭好框架。接下來,你可能選擇用Axure畫好線框圖,加上標注,喚之“低保真原型”。又或者再進一步,上色處理,添加動效,做個可以在屏幕上供人指指點點的,所謂“高保真原型”。

這一派觀點認為,把原型做到高保真是沒有必要的,視覺還是要做設計稿,前端還是要開發,你把原型做得再精準,都是徒然。

這種觀點,代表了一種線性的工作流。但在實際的產品設計中,交互從不僅是一個中間環節,它的觸角延伸到產品開發的每個階段,牽一發而動全身,而原型設計也不是一個承上啟下、可有可無的中間步驟。

而如果回到本質,原型,究竟是什么?

讓我們做一個類似于“惠勒的龍”的思維實驗:假設有這樣一個原型,它做得如此逼真,如此完善,以致于用戶在使用中,無法區分出原型和產品。那這個原型,和真正的產品,有區別嗎?

原型的本質是描述真實的語言。越高保真的原型,就越逼近真實,而越高保真的原型工具,其描述方式(被封裝的思維方式)就越接近真實事物的運行方式。

紙和筆的語言是“描述”,覆蓋一切,但低效而不精確,且無法被機器理解。

Axure的語言是“控件”。頁面由一個個控件組成,而控件則由其自身的樣式、屬性構成。每個控件的事件是獨立的,如果你想讓一個事件觸發多個控件行為,或是多個控件共用一個屬性,那Axure就會變得極其繁瑣和不便。

1

Principle的語言是“狀態”。設定一個起始態、一個終態、一個觸發方式,剩下的就只是調整狀態變化的參數。也因為核心語言的限制,2.0版本前的Principle,更適合做單一動效演示,而非全產品原型。

2

Quartz composer的語言是“流動”。它將MVC設計模式中的“視圖”、“模型”、“控制器”具象為一個個Patch,通過連線的方式將實現接口的連接和數據的流動,用樂高積木一般的方式,將事物的運行邏輯可視化。

3

Framer的語言是“對象”。將CoffeeScript作為一種中間語言,更簡潔的語法,更清晰的面向對象編程,使得Framer成為了最靈活、最強大的原型工具。

4

Webflow的語言是“成為”??梢暬罱?,直接生成頁面,設計即編程,設計及開發。工具總在嘗試各種各樣的方法,降低中間步驟,最終成為真實。

5

因此,當我們拿起工具,我們不僅僅是為了“使用”,更為了透過它們背后設計者的眼睛,尋找觀察產品的不同角度。

而我們之所以要做原型,也不僅僅是為了模擬。模擬不是目的,模擬是探索事物運行規律的過程,最終目的是成為真實。

真實

一個原型設計原則

用原型來理解真實產品的一個方法是,嘗試做“真實原型”。

剛剛接觸Axure的時候,經常要做一種叫膠囊型TAB/Capsule的控件。

6

當時對軟件還不熟悉,采用的做法是,把這個控件做成了一個動態面板,然后通過點擊不同區域來切換面板狀態。

7

這樣的效果,其觀感和真實情況一樣。但實現的方法,卻不簡潔優雅,更關鍵的是:這不真實。

為了實現一個切換效果,就創建了控件的一堆影分身,這不是這個世界的運行方式。

當你覺得麻煩到家時,一定是你哪走了彎路。

所以,我揣測設計者應該考慮到了這樣的場景,就在Axure的面板里找來找去,然后發現了那個之前從未注意的功能:select group:通過創建一個按鈕組,就可以解決切換問題。這樣制作的控件,簡潔清晰、易于復用,更重要的是,它是通過對控件的屬性進行歸納和抽象來解決問題,而不是制造一個“看上去一樣”的假象。這也是產品實際的運行邏輯。

當你需要新增固定內容時,你可以使用中繼器而不是設置大量隱藏面板;當你的交互需要觸發控件移動時,你可以用push交互來更改位置而不是手動設置坐標。這并不是什么《Axure:30天從入門到精通》中的習得的“常用小技巧”,而是逼迫自己使用一種更誠實的原型制作方式,跳出自己習慣的思維和習慣,去探索那些自己尚未發現的領域,這樣才能在制作原型的過程中,洞察真實。

而真實是什么?

或許,真實就是簡潔,是奧卡姆的剃刀,是如無必要勿增實體,是光會挑選的那條最短路徑,是物質會降低到最低勢能態,是用最小的資源去實現最大的效能。

分割

好的思維是結構化的解構

分割不是一種方法,但它是一切方法的本源。

任何一個復雜的事物,都可以被分割成為一個個最簡單不可分割的單元。再復雜的邏輯,分割到最后,也不過了一些與非門、或非門、異或門的集合;所以再復雜的問題,經過分割后,也只不過是用一定的順序,去解決一些簡單的小問題。

8

在阿里云官網首頁中,需要設計一個卡片的展開和收起狀態。

一個不負責任的做法是,畫出視覺稿,簡單標注變化過程,之后扔給前端:說:“喏,把這個,變成這個?!?/p>

只要再往前走一步,你會發現這一句“變成”,可能就包含了十幾個動效細節。

9

當你去嘗試做一個“真實原型”時,你會發現“分割”的思維方式會幫你規避掉“虛假”,因為當你把原型分割到最小粒度時,你會發現你和開發面對的是同樣的問題,而你的解決方式可能也是前端的方案。而那些你已經多次思考和調整的參數,就無縫地融入到了前端的開發進程中。

分割的另外一個好處,是幫你快速找到適合解決這個問題的工具。

當我們討論哪些工具更強大、更自由時,其實是在討論它們的分割顆粒度。

把一個元素從頁面的左邊移到右邊,axure給你提供了勻速、漸入漸出等預設動效,而principle則可以對緩動函數進行更精確的控制,本質上,是在對動效問題上,后者采用了更細的分割顆粒度。就好像給你一堆五顏六色的碎片,讓你去完成一個拼圖,那碎片切分越細、形狀越全、色域越廣,你最終的拼圖就越可能接近目標。而你是永遠無法用4個大方塊拼成一個圓形的。

阿里云官網新首頁里,有幾處icon,在鼠標移入后,會發生一些有趣的運動。

當時決策要使用動效icon時,開發的時間只有兩天,留給設計的時間更少。而關于這個icon應該怎么動,一開始卻是一籌莫展的。我們只知道應該是一些互相連接的點和線,在兩個形態之間互相轉換,但大腦的空間想象力畢竟有限,語言的描述畢竟匱乏,如何快速地創造出11個這樣的動效icon呢?

在快速分割問題后,發現這只是一個初始態和終態的問題,而中間的變化形態是難以憑空手繪或想象的。而解決始態終態問題的最快速的工具,是什么?

Keynote。

憑借最簡單的神奇移動,我們快速產出了這些動效icon,本來預計要一天的工作,壓縮到了兩小時。

10

所以,分割不是方法,它本身不解決任何問題,它只是把問題分解成你可以解決的小問題,并幫你找到能解決它的方法。

 

作者:阿里云UED

來源:AlibabaGroupUED

版權:人人都是產品經理遵循行業規范,任何轉載的稿件都會明確標注作者和來源,若標注有誤,請聯系主編QQ:419297645

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!