本文作者@一大坨黃?供職@微博UDC設(shè)計(jì)中心?。近年來(lái)，在技術(shù)方式，網(wǎng)頁(yè)自適應(yīng)的興起、微軟Win8系統(tǒng)的發(fā)布，都在試圖解決一個(gè)問(wèn)題：讓同一產(chǎn)品能在平板、PC等多平臺(tái)下同時(shí)使用。

由此可見，替換掉冗余的多版本開發(fā)模式，發(fā)展通用性，是未來(lái)產(chǎn)品發(fā)展的一種趨勢(shì)。因此，設(shè)計(jì)師也要在不同的平臺(tái)規(guī)范和習(xí)慣中尋找共同點(diǎn)。

針對(duì)多平臺(tái)這一問(wèn)題，很多網(wǎng)站的解決方法，是為不同的設(shè)備提供不同的網(wǎng)頁(yè)，比如專門提供一個(gè)Mobile版本，或者iPhone 、iPad版本。這樣做固然保證了單一平臺(tái)的使用效果，但是他妨礙了用戶對(duì)一家產(chǎn)品的連貫性認(rèn)知。使用起來(lái)比較麻煩，同時(shí)要維護(hù)好幾個(gè)版本。而且如果一個(gè)網(wǎng)站有多個(gè)portal（入口），會(huì)大大增加架構(gòu)設(shè)計(jì)的復(fù)雜度。

如果你要說(shuō)“因?yàn)槠聊淮笮〔灰粯?，需要針?duì)性的設(shè)計(jì)才能最大化的利用屏幕空間?！蔽艺J(rèn)為這是產(chǎn)品經(jīng)理強(qiáng)加給用戶的需求，因?yàn)樵谟醚羞^(guò)程中，很少聽到有用戶的反饋是“我覺得這個(gè)地方空掉了，好浪費(fèi)”。能考慮到最大化利用空間這點(diǎn)固然是好，但是，如果以犧牲用戶對(duì)你家產(chǎn)品的操作習(xí)慣為代價(jià)，那就沒(méi)有節(jié)操了。

作為交互設(shè)計(jì)師一枚，從產(chǎn)品開發(fā)者的角度來(lái)想，類是要分的，不過(guò)差別太大就不好了。因?yàn)?，版本?duì)于開發(fā)者的意義遠(yuǎn)遠(yuǎn)大于用戶。從用戶的操作行為來(lái)看，PC版、iPhone版、iPad版、Android版神馬的… 差別不過(guò)是：通過(guò)觸摸來(lái)完成操作，或是需要通過(guò)鼠標(biāo)來(lái)操作。

要做到一款產(chǎn)品完全適用多個(gè)平臺(tái)是不可能的，我們能做的是綜合考慮多個(gè)平臺(tái)，找出共性，讓差異減少到最小。

在現(xiàn)有的產(chǎn)品產(chǎn)品設(shè)計(jì)中，已經(jīng)看到多平臺(tái)通用設(shè)計(jì)的模型了，例如，雖然Android平臺(tái)自帶物理返回鍵，但是在Android許多應(yīng)用中仍保留了iOS的虛擬返回操作。

上文分析過(guò)，各平臺(tái)的操作對(duì)用戶來(lái)說(shuō)，差別是通過(guò)觸摸或是通過(guò)鼠標(biāo)來(lái)操作。接下來(lái)，從用戶角度出發(fā)，針對(duì)這兩種操作行為總結(jié)幾點(diǎn)設(shè)計(jì)中要注意的問(wèn)題，保證多平臺(tái)的通用性：

交互層面：

一個(gè)完整的交互事件包括：交互行為+交互對(duì)象+交互展現(xiàn)。宏觀上多平臺(tái)的交互通用性要從這三個(gè)方面考慮。至少確保一個(gè)產(chǎn)品的主要功能的交互差異不要太大。不過(guò)，具體問(wèn)題還要具體分析，各個(gè)平臺(tái)的獨(dú)特優(yōu)越性，還是要充分利用。

由于鼠標(biāo)懸浮只適用于鼠標(biāo)操作，而語(yǔ)音、亮度、位移只適用于觸摸操，因此，一個(gè)要兼容多平臺(tái)的產(chǎn)品，在主要功能上，要避開這些交互行為。而是采用兩者的交集：鼠標(biāo)點(diǎn)擊、鼠標(biāo)拖拽、獲得焦點(diǎn)、鍵盤彈起和滾動(dòng)滾輪。

主要功能的交互對(duì)象一致

所謂交互對(duì)象，就是交互動(dòng)作的直接接收者，一般體現(xiàn)為一個(gè)按鈕或者熱區(qū)，要考慮多平臺(tái)的通用性，就要從其位置和大小兩個(gè)屬性入手

觸摸操作（iPhone、iPad、Android等）

位置：用戶使用手機(jī)，多是單手握住手機(jī)底部，豎屏操作；而使用iPad多是雙手握住機(jī)器中部，橫屏操作。這兩種場(chǎng)景下的易觸位置如圖

大?。焊鶕?jù)iOS規(guī)范，理論上可觸擊元素的最小尺寸應(yīng)該為44像素(約1/4英寸或7毫米)見方。

鼠標(biāo)操作（PC）

根據(jù)費(fèi)茨定律，PC端的交互對(duì)象描述如下：目標(biāo)越大，所用時(shí)間越短。距離越長(zhǎng)，所用時(shí)間越長(zhǎng)。
由于PC鼠標(biāo)箭頭能夠點(diǎn)擊的區(qū)域可以很小且相對(duì)精確，PC端的約束較輕，所以這里只單向考慮了觸摸操作平臺(tái)，將主要功能置于屏幕下方，尺寸大于44像素（約1/4英寸或7毫米）見方的點(diǎn)擊區(qū)即可。

主要功能的交互展現(xiàn)一致

所謂的交互展示就是交互行為作用在交互對(duì)象上產(chǎn)生的結(jié)果、反饋。兩大操作形式上不做區(qū)分，只要技術(shù)支持，形式不限，重要的是平臺(tái)實(shí)現(xiàn)效果的性價(jià)比。

常用6種效果：轉(zhuǎn)場(chǎng)、邀請(qǐng)、過(guò)渡、反饋、縮放、吸附

實(shí)現(xiàn)多平臺(tái)的通用性設(shè)計(jì)不僅需要交互層面的考慮，還需要視覺和技術(shù)層面綜合考慮，由于本人從事交互，其他兩項(xiàng)無(wú)法深入分析，找出共性。還請(qǐng)人心人士補(bǔ)充。

編后語(yǔ)：作者這段話很傲嬌，特意為作者留下

作為一名普通用戶，吐個(gè)槽～

雖然不是5歲的美國(guó)小蘿莉，不過(guò)我還是受夠了各種操作平臺(tái)的分類，以及瀏覽一個(gè)網(wǎng)站或者使用一款產(chǎn)品要學(xué)多個(gè)版本的行為?。「鞣NPC版、iPhone版、iPad版（所謂的HD）、Android版… 我想說(shuō)，版你妹呀…

微博設(shè)計(jì)團(tuán)隊(duì)博客