设计原则交互思维,重塑产品设计
本文為PMCAFF專欄作者呆呆丶出品
我們通常會主觀認為,設計原則只是原則,知道了名詞,并且了解了名詞的意思就能在工作中運用設計原則。而認為不能在工作中運用的,是因為自己在工作的過程中沒有好的方式介入方法論。或,認為這些東西不重要,根本不值得去學習。
所以部分人至多會了解下該原則的用法與由來,但只有極少數人會去理解它深層含義,或具體指什么,并復用于工作或對產品的解釋。這是信息爆炸,導致人們被迫接收大量信息的表層意思所導致的結果。
清晰化:信息設計與視覺設計的差異
業界對于好的產品功能的設計,有一個明確的定義,即:好的設計,一定是內容清晰的。
這句話不同的人看,就有不同的理解。其中也蘊含許多道理,但似乎大多數人都沒有很好的理解其本意。就像我們知道一個英文單詞的幾個中文意思,就強行記住了,而沒有去深究其意(結尾有個小案例來說明這句話)。
良好的設計是包含某種意圖的,并且通常可以在許多不同的層面上進行有效的解釋。
如,清晰。
我對它的解釋是:設計的目的必須明確,功能必須合理,并且信息必須清晰。
這句話的重點在于「信息清晰」四個字,而并不是多數人以為的,這是界面視覺的清晰。
有何不同呢?信息清晰,是對一個功能的解釋與布局的合理性有深層的含義,從邏輯上梳理清楚功能與功能之間的關系,并且能夠讓用戶在「心智模型」的基礎上不需要復雜的解釋就能簡單的理解并使用。
用戶不需要理解,只要會用。這句話看起來很簡單,但它已經剖離了視覺層面的淺層含義。
如果只是在獨特的美學外觀意義上來解釋,視覺雖然可能會吸引用戶眼球,但如果設計缺乏信息的清晰度,可能很快就會被用戶所拋棄。
所以單獨理解為視覺清晰,不足以使設計的功能被有效的理解與使用。
我并不是貶低視覺,而是幫各位拔高層次。如果信息不清楚,那么看起來漂亮,只會讓用戶的使用也「點到為止」。畢竟外觀上的視覺表現是不可持續的,它并不穩定。
然而,許多設計師似乎仍然沉迷于視覺的清晰上。
為什么?
設計師自己會被視覺所欺騙,通過一種非常精心設計的感性外觀來說服自己別人也喜歡這樣的效果。
設計師會愛上設計的藝術方面,以至于迷失在其中,忘記了產品與用戶的思維,以及商業價值。
設計師故意使用視覺「引誘」,以避開或掩蓋某些功能上的缺點。
雖然界面的美觀肯定是誘人的,但也許這么多設計師沉迷視覺而不是信息清晰化的主要原因是:外觀的設計本不容易,但對信息的設計,要做到清晰是更難的。
信息的清晰需要挑戰頁面中的每一個細節,并將每個節點與元素做到簡化且讓用戶更好的理解。清晰是當你準確地傳達適當數量的內容,同時不會被用戶反感。即使最佳選擇是 1-2,但就算有 3-4 個選項,用戶也能夠在使用產品的過程中感到舒適,不會有選擇困難的情緒產生。
比如,地圖的路徑選擇可能非常多,但仍然非常清晰,即最佳路徑。
為此,僅僅將一些文案、圖片置于設計稿中,并等待用戶去使用,這是遠遠不夠的。
案例解析
這里我舉個非常簡單而又典型的案例來總結以上內容,助于大家理解。
什么是對信息進行設計,讓信息清晰化?
我們看下面這張圖:
多數人拿到需求,如「要在首頁添加一個提問按鈕」,就會直接進行設計。評判標準是視覺呈現的優劣。
如圖中的「提問」,為什么這個「提問」要放在搜索右邊呢?
我相信如果要知乎的界面好看,提問按鈕完全可以放置在其他區域。我來個比較夸張的修改,這里稍微拋棄一下合理性。
從上圖的修改大家似乎已經可以看出,「提問」移走,好像沒有合適的地方可以擺放。那在提問放置于「搜索」邊上之前,為什么會想到把「提問」放在「搜索」邊上呢?
如果只是從視覺的角度,很難可以想到這一點。但現在做個反向思考,就覺得,它們倆就該在一起?為什么?
原因無非就是:知乎如今的定位更像是搜索引擎,大多數用戶上去并不是瀏覽信息流,而是尋找答案。用戶上知乎,目的是提問,或尋找問題的答案。所以當搜索不到時,提問應該是搜索流程的下一步,這樣也更符合操作邏輯。這就是對信息進行設計。
所以大家能看到,即,增加提問按鈕的同時,我們需要保持用戶清晰的瀏覽首頁信息流,且讓它與頁面的已有邏輯相吻合,再延伸出合理解釋。
要做到這點,并不僅僅取決于視覺本身。
所以「知道」原則或方法論,并不代表你懂或者明白如何運用了。
而這些所有的所謂原則或方法論,都是建立在「交互思維」之下。
交互思維僅是一種被動技能,被動技能的觸發是無意識,且根據經驗的加持而產生疊加傷害效果的。跟主動觸發技能不同,它沒有實際可見的按鍵給予玩家控制。但是根據技能等級的提升,傷害效果也是持續增加的。
比如場景分析、競品分析、用戶調研等,都是實際可見的方法論,通過反復操練逐步提升熟練度。但是交互思維是不可見的,它隱含于設計師輸出物的內在表現上,如合理性、商業性、可用性等等。它不僅是設計師自身經驗的表現,也是體現設計師綜合能力的重要模塊。
它具體指什么?如何提升?
關于「交互思維」
1989 年,Gillian Crampton-Smith 創建交互設計教育的初始名為「計算機相關的設計」,后來改名為「交互設計」。
所以早期人們聊到的交互設計,更多的是與計算機有關的,比如系統或設備。但是隨著交互設計這個概念的普及,其應用范圍也被擴展,包括「視覺設計」領域。
區別無非是這個過程是從有用性,可用性和情感因素等方面來優先評估設計質量,而不單單是「審美效果」層面。
有經歷的朋友應該經常與業務人員因為視覺界面的「不同效果」而發生爭執,原因基本可以概括為各自對界面或圖片所傳達的意思有不同的理解。
從這點可以看出,用戶界面或視覺產出物本身也是為了達到某種目的的自然體現,而這種通過設計手段解決問題的過程,本身就是一種「交互設計」—— 對信息進行內容分布,傳遞給目標用戶。
所以任何商業視覺產出物,都能算作是交互設計的一種結果,包括這些視覺可見,與人產生「信息交流」的產出物。從這點可以看出,視覺設計師本身是具備「交互思維」的。
從表面上理解,它們是 A 和 B 之間發生的互動行為,他們可以是人與人,也可以是人與物。
比如,你出門買早飯,「告訴」對方要什么,對方接收到你的信息并將你需要的餐點拿給你,這就是一個完整的交互過程。
或者不同視覺設計師針對同一個功能所設計出的不同界面,也是各自對功能的不同理解,以至于所呈現出不同的效果圖。
所以一般設計師,包括商業視覺設計師或 UI 等等,在工作過程中產出的作品一定是包含「交互思維」的。只是不自知,也沒有建立系統性認知。
舉個極端例子,如下圖:
圖片來自于網絡,侵刪。
兩張海報都在傳達各自的意思。
雖然每張海報都是不同設計師設計出來的,但是他們都有各自的目的。比如英勇無畏、心懷祖國、懷抱世界等等。
所以各位看到「交互思維」目前在任何領域都成了不可以避免的話題。餐飲、服飾、出行等等。唯一區別在于顯意識和無意識,有些人知道自己具備,有些人不知道罷了。
但是不能說交互設計就是用戶界面設計,甚至是視覺設計。它只是幫助設計師在信息呈現的結果上,表達出一種合理化的趨勢,而不僅僅是自嗨。
所以要具備「交互思維」,首先要明確設計的目的。
如何提升?
這里給出怎么提升的方法。
開頭說到,「交互思維」是被動技能,原因是不可見,但有實際效果。
是什么意思呢?就是具備交互思維的設計師,在工作中所呈現的內容結果,是有思考過程的。比如視覺稿可讀性高,信息接受度強,符合用戶審美等等。如果是純粹的藝術作品,是不覺被這些特點的。
包括產品設計中,一個功能首先要能用、好用,好不好看是次要的。對于交互設計來說,解決問題才是最優先的。但是放眼任何行業「解決問題」都是核心,包括視覺設計。
所以延伸出來,解答這個問題的第一層意思:交互思維,應該是幫助視覺設計師解決信息傳遞的問題的。
要做到這個程度,已經不單是技法的提升了,它是設計師綜合能力的體現。
除了視覺設計師本身具備的「美學知識」外,交互思維還應該從以下兩大領域出發進行學習:
人——心理學、社會學、人類學;
機——計算機、工設;
學這些的目的是,讓設計師在遵循自身的設計理念外,再從計算機以及人的角度出發,去思考問題。
意為:通過對人(用戶)的了解,幫助他們解決機器(產品、圖片等)的使用/理解難題,解決手段是設計。
所以「交互思維」的提升,就是讓人與物或人與人之間,更流暢的進行「對話」。
無論是視覺稿還是其他內容,設計師要多問自己:用戶在看這張圖時,他了解到哪些信息,他會怎么做,他的感受如何。
這就是所謂「交互思維」的提升。你的設計稿越易理解,被業務方可接受的機會也越高。
除了對上面提到的三大領域的學習之外,平時看文章,看案例要多問為什么,以及怎么樣能更好。來提升自己思考問題的方式,對問題的解法進行多角度的訓練。
案例補充
用銀行卡從自動取款機(ATM)里取出現金,用戶實現這個目標的過程,也是在用戶界面的支持下解決這個問題的過程。在這個過程中,用戶要正確完成如下的一系列動作:
插入卡片
輸入密碼
按“快速取款”按鈕
按“確定”按鈕
取出現金
拿出銀行卡
拿出回執
一般設計師在設計這個操作界面的思路就是界面本身,比如插入卡片提示界面。具備「交互思維」的設計師除了針對于界面本身進行設計外,還需要思考用戶是否知道「卡片插入」的入口,是否要基于明示,或者「輸入密碼」完密碼,是否有等待提示,等待提示的內容應該是什么?數字?文案?
又或者是用戶取出現金后,是否在界面上提示用戶取走銀行卡,如何提示?是在一個界面里簡單拔卡圖片,還是通過圖片加文字的結合說明?等等。
這些不僅僅是產品或交互思考的問題,視覺設計師也應該思考其原因。
雖然部分視覺設計師認為不需要思考,只需要根據產品的原型出圖,安安靜靜做一個美工就可以。但其實在作圖的過程中,這些問題早就已經呈現在設計師的腦海里了,否則「插入卡片」的提示是如何設計出來的?填色?得了吧~~
這個世界上本沒有「美工」,只是自嘲的人多了,也就有了「美工」。
小案例(可省略不看)
我上面提到一句說「就像我們知道一個英文單詞的幾個中文意思,就強行記住了,而沒有去深究其意」。這里我也舉個例子,來告訴各位這句話的意思。(獻丑)
多數人會說:英文也是有多義詞的,所以存在一個單詞具備兩個或多個完全不同的意思。但各位知道,「多義」是如何來的么?文字的演化,一定是隨著歷史的演化而來的,每個字/單詞,在歷史的演化過程中,都是逐漸延伸出不同含義的,而不會通過一個字來表達兩個或多個意思。
類似于單詞 object 通常有動詞「反對」的意思,但它的名詞也是「物體」的意思。多數人對這兩個解釋都是死記硬背的方式去記住的。雖然英語的不同釋意是針對在不同場景下的,但有時候場景并不能很好的助于我們理解單詞的意思。所以可以通過對這個單詞的演化來理解,且知道為什么。
為什么 object 同時擁有兩個完全不著邊際的解釋呢?大家知道「反對」通常是主觀的,是表達自己內心想法的方式,如,我反對呆呆是天才。然后發現 objective 又有「客觀的」意思,客觀的反義詞是主觀的。「主觀」在歷史演化過程中,有一個哲學領域的名詞解釋叫「唯心主義」,它認為人的思想與精神是獨立存在,區別于一切物體包括身體軀干。而「客觀」又有唯物主義支撐,它認為世界按其本原來說是物質的,是脫離人的意識之外,不依賴人的意識而客觀存在的,精神或意識是物質的產物。
所以大家能知道,object 是從主觀表達情緒,對自己主觀之外的某件事(物體)進行反對。而 objective 又有「客觀的」意思,客觀不就是唯物主義說的物質是第一性么?那「我反對」是主觀行為,而反對的對象是客觀物體?結論不就是「我反對某件事=物體」么。(真玄學,但很有趣,哈哈)
而后我又有去查了許多邊界資料,雖然解釋有更深更有內涵的,但不外乎大體如此,總之能為我所用就足夠了。
這是我早期學習英語的時候,對有些單詞無法強記,而后衍生的一種學習方式。也許并不科學,但非常有效。對一個單詞的學習,還能去了解人類史和哲學史,反而不枯燥了。
小結
信息的爆炸讓我們接收了太多表層內容,多數人不會試圖去理解其中深刻的含義,只是認為這就是我們需要知道的,所以知道就好了。這也是為什么很多人理解一層事物無法鉆到本質的原因 —— 被動接收他人輸出的信息,沒有理解信息的根本內容。
我通常會說,各位少看文章,指的是觀點文。事實與觀點,是兩回事。有些文章是記錄事實,通過對事實的闡述加上各方資料,引導讀者思考。這是好文。觀點文是作者引用一個現象,然后主觀輸出自身觀點,誤導讀者認為事實如此。
這樣去學習是對自己不負責的行為,也是導致自己無法成長的原因。
不過,也別讓自己活得太累了。
謝謝閱讀:D
總結
以上是生活随笔為你收集整理的设计原则交互思维,重塑产品设计的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 协同推荐算法没有这么复杂,真的
- 下一篇: 腾讯信息流平台产品负责人牛津:个性化推荐