在體驗設計中，約束也是重要的一環(huán)。本文將從四個方面講述約束的概念，并聊聊如何利用這些約束來提升用戶體驗。推薦對用戶體驗設計感興趣的朋友閱讀。

在之前的文章里，向大家介紹了示能、意符和映射，這篇文章我們接下去要聊一聊約束。

聽到“約束”這個詞，但從字面意思大家可能會覺得它有多層含義，比如你小時候，媽媽總是約束你不能吃很多的糖，不能在地上滾來滾去，這是來自父母的約束。那么我們在生活中還有很多的約束，比如道德約束、法律約束、規(guī)則約束等等。

所以從字面意思上約束的意思就是：限制管束使不越出范圍。

在體驗設計中，約束也被分為了4個大的類型，分別是：物理約束、文化約束、語義約束以及邏輯約束。接下去我們通過對這四個約束類型來聊一聊在設計中，如何利用這些約束來提升用戶體驗。

一、物理約束

這個很好理解，一個圓形的井蓋只能用對應尺寸的圓形來覆蓋住，其他形狀或者尺寸就不能匹配。一把鎖也只能通過相應鑰匙才能打開。所以物理約束取決于物體本身外部的特性，決定了其操作方法。設計師們在設計一些產(chǎn)品、界面的時候，務必要考慮物體的物理特性，例如不同的設備、不同的材料等等。

諾曼老師在設計心理學中舉了一個電池正負極放置的例子，我打算換一個手機的例子。大家是否有想過為什么手機是豎著操作的，橫著操作不行嗎？當然不排除我們在玩游戲看電影時一些特殊場景需要將手機橫過來，但是日常我們通過手機來使用應用的時候為什么不是橫過來的。

大家可以嘗試著單手橫過來去發(fā)一個微信給好友信息，或者在淘寶買一件商品，首先這倆產(chǎn)品在移動端的手機上都沒有支持橫版適配的設計，因為橫置無法有效進行導航，而且很難瀏覽內容，更不要提用單手橫過來去做一些交互行為。

所以我們發(fā)現(xiàn)移動端手機本身的物理特性和受到的約束來自于我們人類的手，四根較長的手指在一側，一根較短的拇指在另一側，這種自然生物的進化就告訴我們，我們的祖先是習慣通過“握”這個行為來對物體進行交互的，而手機除了滿足人手的特性約束以外，也要滿足日常使用的場景：單手手持（單手握比單手托省力很多）、打電話（如果你的聽筒和麥克在屏幕的兩側，腦補一下打電話的樣子）……

所以手機的外形設計，是受到了使用者本體的物理約束，我們的手、我們的耳朵、嘴巴等等，大家也可以再試想一下，如果我們要設計一款專門為沒有手的殘障人士用的通訊工具，我們該怎么設計？例如他們習慣用鼻子操作、用腳掌操作等等。

好了，講完了人類對手機的約束后，我們再來看手機本身對我們數(shù)字界面有哪些物理約束。即然手機現(xiàn)在被設計成了豎著的樣子，于是我們的口袋也變成了豎著的，同時我們數(shù)字界面的內容也變成了自上而下的內容顯示順序。觸摸式智能手機也將原來只支持點擊操作的手勢進化出支持滑動、3d觸摸的更豐富的交互手勢。

我們在設計界面中元素、組件的時候其實也可以把他們理解為一種“物體”，既然是“物體”那么必然有其特性，例如屬性、狀態(tài)、布局規(guī)則….，具有一定特性的組件就只能使用在其固定的位置，并給予一定的尺寸范圍和交互方式。

例如現(xiàn)在我們有這樣幾個信息，人物頭像、人物昵稱、個人簡介、關注按鈕這四個元素，我們需要做一個用戶信息模塊，我們會怎樣布局。很顯然將這幾個元素通過排列組合放進一個容器里，有無數(shù)種排列方法，但如果我們提前給這個模塊加上一些物理約束，比如它的高度和寬度是30px*100px，同時滿足信息閱讀的順序和效率最優(yōu)，那就只有一種排列方式。如果這個容器的尺寸變成100px*100px，那么就會有更多的布局，例如居中對齊，個人信息與關注按鈕上下分布等等。而且不同的排列布局、呈現(xiàn)位置給受眾帶來的視覺感知、瀏覽效率也是不同的。如果這個容器是可折疊、可滑動的呢？那么布局又會發(fā)生什么變化？

所以物理約束在生活中可能是一種硬約束，但是在數(shù)字化設計中，我們用的更多的是“偏軟”的物理約束，例如一張卡片的大小、圖文的間距、控件的展開面積等等，無法用硬約束來控制，因為受到更多因素的影響，不適合用硬約束來規(guī)范這些設計元素。

設計師們在做方案的時候要學會尋找最優(yōu)解，做設計不像是用鑰匙開門或者拼圖這樣每一塊都有他固定的位置，有時候就像是你身邊有幾根不同粗細和長短的木棍，你需要插到一個洞里，不可能有非常完美契合的情況，那我們就要考慮你更在乎的是插緊？填滿？還是堵??？要靈活運用。

二、文化約束

文化約束在書中的原話是：每種文化都有一套社交行為準則，如果置身于不熟悉的文化環(huán)境，原有的準則和行為就會不適用。

例如大陸的駕駛室在左側，但是香港地區(qū)就是在右側。再例如日本東京和大阪搭乘電扶梯的站位也有左右的區(qū)別。所以文化的約束就更像是不同的社會認知、習慣、歷史造就人群的行為差異。

例如在不同文化中，信息閱讀的順序并不一樣，就像阿拉伯地區(qū)在閱讀時順序是從右往左。再例如國際版本的amazon在新增收貨地址的時候，無論哪個國家，只提供輸入框讓用戶自己填寫，但是在本地化產(chǎn)品中，就會針對中國用戶的特殊地址進行設計。文化差異還有很多，例如不同國家有不同國家的禁忌和喜好，例如顏色，俄羅斯比較極忌諱黑色、黃色，巴西比較禁忌紫色、黃色，而英國則不喜歡墨綠色。同樣還有手勢、動植物、數(shù)字、肢體語言、信仰等等。

文化約束不僅僅存在于國家、宗教之前，人與人之間都會有不同的文化差異。所以文化說白了就是不同群體的認知與共識。

說起文化約束讓我又想起了設計師與業(yè)務方之間的交流，為什么總是會存在障礙?；蛟S一部分原因就是因為我們各自有著文化差異和立場。業(yè)務方在自己的文化認知中會提出同時放大并縮小、五彩斑斕的黑這樣的需求，而設計師聽到這樣的需求就會覺得有點無理取鬧，其實這很正常，這就和我們在裝修時給設計師提出的要求一樣，想要在10平方米的空間打造出多個大面積的空間一樣。其實這些都是我們對另一方的一種期望，只是在表達的過程中不那么專業(yè)，作為專業(yè)的設計師，我們要學會理解客戶/業(yè)務的真實需求，并幫助他們去拆分目標，一步一步接受最后的結果。

三、語義約束

語義約束在書中提到的不多，但是我想展開聊一聊。諾曼老師在解釋語義的時候是這么說的：語義約束是指利用某種境況的特殊含義來限定可能的操作方法。舉了一個例子就是摩托車的擋風玻璃之所以這么設計是因為人駕駛摩托車的方向位置從而使得擋風玻璃必須這么設計。所以一個事物被設計后的結果取決于它是為誰而設計的，同時語義約束依據(jù)的是我們對現(xiàn)實情況和外部世界的理解。

現(xiàn)在我們可以通過門把手的轉動來開啟門，那么如果我通過人臉識別認證后，是否可以自動開門而不需要再設計一個門把手呢？這種案例其實很多了，例如醫(yī)院的手術室等場所。隨著科學技術發(fā)展，人與物的交互方式在不斷的改變，從小屏幕到大屏幕的發(fā)展，我們觀察到移動端設計中的返回上一頁、滾動至頂部、鍵盤的拆分等等設計應運而生。

我再拿數(shù)字產(chǎn)品中的一些組件給大家舉個例子，在以前的文章中，我找到了一個產(chǎn)品的交互有些問題，就是在某個界面的頂部導航中嵌入一個下拉的控件。

在這里，無論該控件本身示能表達還是用戶的預期理解，都表示這當我們點擊下拉按鈕后，會展開更多同類型的選項，并且導航欄是保持固定位置的，而不會將導航欄給頂下去，出現(xiàn)原本不存在的新模塊。那么為什么就不可以像后者一樣，點擊下拉控件后將導航給頂下去呢？

這就要歸結于頂部導航和下拉控件本身的用法與規(guī)則。

導航欄嵌入下拉實際上就是導航+下拉控件，那么該控件就具備了兩個屬性，那就是原本導航欄的屬性和下拉控件的屬性，導航欄需要固定在頂部。在移動端本身的組件定義中，它是一種固定在頂部不可動搖的一個bar，所以很早以前的移動端、web端設計的時候，頂部導航欄在視覺上也是優(yōu)先級很高的，例如微信、淘寶等頂部導航欄在舊版本都是帶有顏色的，就像是一個盒子必須有一個蓋子，沒有蓋子的容器不嚴謹，不安全。

同時這個“蓋子”有幾個作用：

• 當前定位/說明 ，可以放單個頁面的標題也可以放幾個tab來切換頁面。
• 當前界面輔助操作 ，例如分享。
• 可以嵌入入口，例如搜索框、設置等等。

這個蓋子看起來很包容很多元對吧，我們也可以把他理解為一個小區(qū)樓下的商鋪，商鋪可以開餐飲店、美甲店，只要符合要求你可以在這個區(qū)域里干很多事，但是商鋪只是允許你在這個空間約束中完成你自己的行為，但是你的行為不能影響我的商鋪，也就是你即然是一個下拉控件，那么你要下拉的是你本身，而不是我整個導航。所以導航本身就有它自己語義，導航+下拉控件，也必須滿足這些約束條件。

話又說回來，現(xiàn)在的設計其實沒有那么嚴謹了，例如頂部導航欄被越來越弱化，我們可以看到微信、淘寶、餓了么這樣的首頁都有“二樓”的設計，當我們整個首頁后就會出現(xiàn)隱藏導航欄或者導航欄被拉到下面的場景。同時，下拉也不再是“下拉”，只是告訴用戶這里有可以展開的內容，但具體怎么展開，就已經(jīng)不是在當前坐標進行展開的意思了。

語義約束需要設計師們時刻觀察當下用戶的認知水平以及設計的發(fā)展階段，去做更合理的運用，我們之前說創(chuàng)新，其實也只是在不斷的跟著科技、文化、用戶習性在進行同步更新，保守未必是錯的，但是想要有所突破不能一味墨守陳規(guī)。

四、邏輯約束

這個概念諾曼老師在書中舉的是一個修水龍頭的例子，說的是當你把水龍頭修好，最后發(fā)現(xiàn)有一個零件沒有安裝上去，那么顯然是裝錯了。這個和我們之前講的映射是一個道理，自然映射為我們提供邏輯的約束，元素的組成可能存在空間或功能上的邏輯關系，例如不同的開關控制不同的燈。

那么我們還是簡單的來看一下“邏輯”這個概念，我們是不是經(jīng)常會遇到這樣的場景，當我們把方案或者一個事情講述給別人，會聽到別人說：你這個邏輯不對，那到底什么是邏輯呢？這里不進行長篇大論的解釋，邏輯的概念很大，但是我們可以來比較形象的了解一下。

首先我們要知道在邏輯推理的過程中需要先對概念進行客觀描述，例如男人喜歡女人，這是一種自然的客觀規(guī)律。其次我們要對事物中的對象進行判斷是否為真，例如，老王是男人。當我們已知這兩個條件后，可以推導出一個結論，那就是老王喜歡女人。但是這樣的推理并不嚴謹，因為老王可能喜歡女人或者都喜歡。如果有其他的條件，結論才會更準確，例如老王交往過5個女朋友。

設計中，也會存在很多的邏輯，例如業(yè)務邏輯、交互邏輯、視覺邏輯等等。業(yè)務邏輯指的是商品的展示排列規(guī)則、每簽約一個供應商就會展示該供應商的詳情、權限角色的類型不同導致判斷順序不同等。交互邏輯指的交互過程中出現(xiàn)的狀態(tài)變化和規(guī)則，例如點擊卡片跳轉至xxx界面，點擊后若用戶未登錄則跳轉至登錄頁。而視覺邏輯則是指根據(jù)用戶的瀏覽順序和信息的優(yōu)先級進行視覺布局的設計。

這里我們來舉一個美食產(chǎn)品的智能組菜的功能設計，來看看在這個方案中，邏輯約束是如何影響到我們整個設計過程的。智能組菜這個功能是這樣的，用戶可以將想要烹飪的食材進行自由組合成為一道美食，進而衍生出了該功能。在做這個方案之前，我們要對這些概念進行描述和解析

1. 解析概念

智能組菜：

• 智能：通過什么算法，如何通過算法呈現(xiàn)給用戶？如何讓用戶感知到智能？（業(yè)務邏輯）
• 組菜：組是什么意思？（把食材搭配到一起）怎么組？（用戶選擇食材后生成）組什么（各種食材）？（交互邏輯）

2. 設計策略與交互邏輯的思考

• 怎么把食材搭配到一起：讓用戶自由選擇食材。
• 怎么才能讓用戶自由選擇食材：提供食材的搜索、分類。
• 怎么提供食材的分類和搜索：設計搜索功能流程、食材分類功能流程。

特殊場景思考：對于食材的名稱用戶是否知道，如果不知道該如何搜索？可以提供食材分類和拍照識別這樣的功能。

我們先做的簡單一點，只做食材的搜索。然后接下去思考他的交互邏輯當用戶進入搜索流程后狀態(tài)會發(fā)生什么變化？選擇的食材會出現(xiàn)在哪里？如何新增繼續(xù)新增、刪除食材？這里有兩種做法：

• 用戶選擇完食材后就進入一個新界面，界面中可以繼續(xù)添加食材。
• 用戶選擇完食材后在當前界面出現(xiàn)“菜籃”模塊用來承載已經(jīng)選擇的食材。

如果是你會選擇哪種方式？這兩種交互方式在邏輯上都是正確的，但是邏輯正確并不意味著交互體驗和效率是最優(yōu)的。

例如搜索場景中需要考慮鍵盤遮擋的問題，如果是第一種，那么沒有鍵盤遮擋的困擾，但是每次選完都要重新點擊新增按鈕，并且新頁面的版面利用率很低。而第二種在當前界面出現(xiàn)菜籃則會被鍵盤遮擋，只能在頁面上方出現(xiàn)，但上方的內容比較飽和，需要再進一步思考。那么當前遇到了兩個問題比較難以權衡，于是我們需要根據(jù)更多的條件來約束最后的結果：

• 用戶在選擇食材的時候大概率是目標明確的，搜索類目不會很寬泛，例如青菜、排骨，所以搜索結果不會很多。
• 大部分用戶的手機為某為p40、某果12，頁面較長，空白區(qū)域比較充裕。
• 大部分情況一道菜的主要食材在3種左右。

也有小伙伴會問，會不會出現(xiàn)批量選擇的情況?；静粫?，因為就像我們剛才說的，組菜是基于用戶對當前已有的食材進行組合的行為，所以用戶的目標是單一、明確的，我有什么菜，我看看能組合出什么。而不是直接搜一個蔬菜，然后批量選擇蔬菜類目下的其他食材，這不符合用戶場景。所以不需要提供批量選擇。

最后結論是第二種方式有足夠的區(qū)域來放置需要選擇的食材。

3. 最后的方案

當我們確定好了策略后，我們可以大致繪制一下原型方案。用戶通過在當前頁面搜索后選擇搜索結果的食材，顯示在鍵盤上方。鍵盤收起后會置于底部。食材搜索的結果不需要分類，用宮格形式鋪開，盡可能的利用頂部的面積去展示，不要用列表。然后不需要做搜索按鈕，因為這里的數(shù)據(jù)量很小，直接輸入完文字后就可以自動聯(lián)想匹配。同時我們再把組菜記錄和拍照識別的功能放進去。

做完這些基本的交互后我們不要忘了思考一些異常流程和場景，例如搜不到內容怎么辦？用戶同時搜索了兩種不同的食材怎么辦？用戶第二次選擇了同樣的食材怎么辦？選擇超過5個怎么提示？等等。

好了，這個案例講完后，大家有沒有發(fā)現(xiàn)，其實一個方案的產(chǎn)生，其中要思考很多的條件、邏輯來約束不同的設計結果。

假如我們需要加入食材的分類模塊，那么現(xiàn)在的方案和流程還合適嗎？如果業(yè)務覺得用戶使用智能組菜是不知道吃什么，一種“窮途末路”的場景，那么我們是不是可以提供一種送即食菜肴的服務，例如最近在電梯廣告里看到了一個“舌尖英雄”的app，他就是將一道菜的食材進行單獨包裝，然后賣給用戶，把烹飪的步驟也用線上視頻的方式教給用戶，用戶一學就會。這也是一種業(yè)務創(chuàng)新，同時在智能組菜的場景種插入也不失為一種辦法。

＃專欄作家＃

應駿，人人都是產(chǎn)品經(jīng)理專欄作家，公眾號：應謀鬼計（shejishiyj）

本文由 @應駿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議