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

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

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

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

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

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

二、文化約束

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

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

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

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

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

三、語義約束

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

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

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

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

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

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

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

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

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

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

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

四、邏輯約束

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

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

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

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

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

1. 解析概念

智能組菜：

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

2. 設(shè)計策略與交互邏輯的思考

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

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

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

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

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

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

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

也有小伙伴會問，會不會出現(xiàn)批量選擇的情況?；静粫驗榫拖裎覀儎偛耪f的，組菜是基于用戶對當(dāng)前已有的食材進(jìn)行組合的行為，所以用戶的目標(biāo)是單一、明確的，我有什么菜，我看看能組合出什么。而不是直接搜一個蔬菜，然后批量選擇蔬菜類目下的其他食材，這不符合用戶場景。所以不需要提供批量選擇。

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

3. 最后的方案

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

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

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

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

＃專欄作家＃

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

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

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