編輯導(dǎo)語：產(chǎn)品設(shè)計(jì)的過程，大多是一個(gè)抽象的過程，即根據(jù)用戶調(diào)查和市場(chǎng)調(diào)查等獲取的數(shù)據(jù)，設(shè)計(jì)一款產(chǎn)品的功能等。而在完成抽象化的過程之后，就要進(jìn)入具象化的過程，即產(chǎn)品真正可以面向用戶的過程，在這個(gè)過程中我們需要注意些什么呢？

終于，我們登上了產(chǎn)品構(gòu)建的最后一層：具象層。

具象層的工作就是將產(chǎn)品可視化，也就是讓產(chǎn)品變成大家手機(jī)里，電腦上看到的樣子。具象的目的是讓用戶能夠直觀的感受到產(chǎn)品，并且可以快速使用產(chǎn)品去解決他的問題。

具象是產(chǎn)品構(gòu)建的最后一層，也是和用戶直接打交道的一個(gè)層次，用戶對(duì)產(chǎn)品的觀感和情感都由具象層直接決定。所以這一層的工作重點(diǎn)就是細(xì)節(jié)，細(xì)節(jié)，還是細(xì)節(jié)。

具象層的工作主要分為如下兩個(gè)部分：交互設(shè)計(jì)和信息架構(gòu)。實(shí)際上還有一個(gè)視覺設(shè)計(jì)，只是視覺設(shè)計(jì)屬于設(shè)計(jì)師領(lǐng)域，基本不屬于產(chǎn)品經(jīng)理的工作，所以這一塊就暫時(shí)剔除在外。

一、交互設(shè)計(jì)：用戶如何使用

交互設(shè)計(jì)定義了用戶使用產(chǎn)品的方式。計(jì)算機(jī)時(shí)代的交互設(shè)計(jì)，是為了減少計(jì)算機(jī)系統(tǒng)與現(xiàn)實(shí)世界的認(rèn)知摩擦而產(chǎn)生的一種新型學(xué)科。

交互設(shè)計(jì)的目的，是降低大家從現(xiàn)實(shí)時(shí)間的實(shí)體產(chǎn)品轉(zhuǎn)換到使用軟件產(chǎn)品時(shí)的學(xué)習(xí)成本。

一個(gè)人，在初次使用軟件產(chǎn)品時(shí)都會(huì)產(chǎn)生不適應(yīng)感，只是程度或多或少而已。而好的交互設(shè)計(jì)可以將這種不適應(yīng)感降到最低，讓用戶適應(yīng)的時(shí)間縮到最短。

那么如何做到一個(gè)好的交互設(shè)計(jì)？

在巨著《交互設(shè)計(jì)之路》中說過，一個(gè)好的交互設(shè)計(jì)需要做到以下幾點(diǎn)：

1. 盡可能的模擬現(xiàn)實(shí)世界，讓用戶可以將自己在現(xiàn)實(shí)世界中的經(jīng)驗(yàn)可以很輕松地移植到軟件產(chǎn)品上；
2. 產(chǎn)品要足夠的簡(jiǎn)單，讓人可以在極短的時(shí)間內(nèi)學(xué)會(huì)并使用。沒有人會(huì)喜歡復(fù)雜的產(chǎn)品，因?yàn)閺?fù)雜的產(chǎn)品會(huì)讓人覺得自己很愚蠢，沒有人會(huì)愿意承認(rèn)自己愚蠢；
3. 每一次操作都要有即時(shí)的反饋。因?yàn)樵诂F(xiàn)實(shí)中我做的每一件事情都可以即時(shí)收到反饋，我敲桌子就能聽到響聲，我拿起冰就可以感受到冰冷。

如果一個(gè)產(chǎn)品可以做到以上幾點(diǎn)，那么基本上就可以判斷他是一個(gè)成功的交互設(shè)計(jì)。

二、交互設(shè)計(jì)的要點(diǎn)

交互設(shè)計(jì)要點(diǎn)其實(shí)就是三個(gè)詞：明確、及時(shí)、步驟少，展開來說就是明確的功能布局與層次，及時(shí)的操作反饋，盡量少的操作步驟。

做到這些就需要如下四個(gè)準(zhǔn)則：突出重要的、弱化次要的、聚合有關(guān)聯(lián)的、隱藏不重要的。

交互設(shè)計(jì)已經(jīng)是一門經(jīng)過了幾十年發(fā)展的顯學(xué)，在這里我一篇文章也不可能說明白所有的要素。所以，今天我就說到這里，權(quán)當(dāng)拋磚引玉，如果讀者們還有興趣，可以自行查閱相關(guān)的文獻(xiàn)，我就不在多啰嗦了。

三、信息架構(gòu)：我們想告知用戶什么

與交互設(shè)計(jì)對(duì)應(yīng)的就是信息架構(gòu)，他與交互設(shè)計(jì)相輔相成，共同構(gòu)成了產(chǎn)品的具象層。

信息架構(gòu)這個(gè)名詞聽著生僻，我本人也被弄暈了很久，找到的各種書籍也是各種繞圈子，感覺把一件簡(jiǎn)單的事情給弄得極其復(fù)雜，看下來的感覺就是完全不知所云。

所以，我索性根據(jù)自己多年的工作經(jīng)驗(yàn)和思考的心得，自己給信息架構(gòu)給出了一個(gè)定義：信息架構(gòu)就是內(nèi)容的組合方式。信息架構(gòu)的目標(biāo)是讓用戶在最短時(shí)間里的明白你的產(chǎn)品是做什么的，能夠給他們帶來什么樣的價(jià)值。

信息架構(gòu)的要點(diǎn)是：層次結(jié)構(gòu)清晰，聚合相關(guān)聯(lián)信息，信息盡量平鋪展示。

其實(shí)信息架構(gòu)在實(shí)際產(chǎn)品的設(shè)計(jì)過程中不需要過多關(guān)注，很多人讀書讀到走火入魔，做產(chǎn)品之前一定要按照書本上的說法分出多少個(gè)層次的信息架構(gòu)，做出什么樣的架構(gòu)系統(tǒng)。

實(shí)際上在你設(shè)計(jì)產(chǎn)品原型的過程中，信息架構(gòu)會(huì)自然而然的出現(xiàn)在你的腦子里，壓根不需要專門去研究信息架構(gòu)的層次與結(jié)構(gòu)。

四、制作原型

原型是一個(gè)產(chǎn)品開發(fā)的依據(jù)和標(biāo)準(zhǔn)。制作原型是所有的產(chǎn)品經(jīng)理的必備技能，你可以不會(huì)寫文檔，但是你一定要會(huì)畫原型。

面向?qū)ο笏枷朐谥谱髟偷碾A段可以被發(fā)揮的淋漓盡致，下面由我來慢慢道來。

五、模塊化設(shè)計(jì)

在軟件功能領(lǐng)域，有一個(gè)非常流行的概念：模塊化編程。

這種編程的方法就是講程序分成一個(gè)個(gè)小的模塊，模塊之間互不關(guān)聯(lián)，之后程序里面需要用到哪個(gè)個(gè)模塊就把哪個(gè)模塊加上去。

這種編程的好處就是同一個(gè)模塊可以應(yīng)用到多個(gè)地方，極大的提成了程序的可復(fù)用性。在原型制作的時(shí)候，也可以借鑒這種模塊化的思想，我稱其為模塊化設(shè)計(jì)。

六、模塊化設(shè)計(jì)的要點(diǎn)

模塊化編程之所以可以實(shí)現(xiàn)，主要依賴于“萬物皆對(duì)象”的法則以及面向?qū)ο蟮娜筇匦裕悍庋b、繼承、多態(tài)。

• 萬物皆對(duì)象：世間所有的食物都是對(duì)象，不論是真實(shí)的物品，還是一段話、一個(gè)場(chǎng)景都可以作為一個(gè)對(duì)象。這個(gè)對(duì)象是封閉且獨(dú)立的；
• 封裝：將某樣事物封閉成為一個(gè)對(duì)象，可能是一段代碼，也可能是一個(gè)設(shè)計(jì)好的界面；
• 繼承：一個(gè)對(duì)象可以獲得另一個(gè)對(duì)象的屬性和方法，就像中國(guó)人就繼承了所有人類共有的特點(diǎn)。被繼承的對(duì)象一般稱之為基類，而那個(gè)繼承它的對(duì)象就稱之為子類；
• 多態(tài)：每一個(gè)子類的實(shí)際屬性和方法都會(huì)有一些不同，就像中國(guó)人是人類的子類，中國(guó)人既有全部人類都有的特點(diǎn)，又有獨(dú)屬于自己的特點(diǎn)。

這些特性如何又是如何運(yùn)用于原型設(shè)計(jì)中的呢？

七、善用封裝

在我們實(shí)際設(shè)計(jì)的過程中經(jīng)常會(huì)碰到多個(gè)頁面都會(huì)出現(xiàn)相同的元素，如多種不同狀態(tài)的訂單列表。這時(shí)候按照常規(guī)的做法，大家都會(huì)使用復(fù)制粘貼將同樣的訂單信息復(fù)制到多個(gè)不同的列表頁面。

這種做法當(dāng)然沒有問題，但是呢：如果期間我要對(duì)訂單信息進(jìn)行修改怎么辦呢？

我每一條訂單信息都要重新修改一次，這種做法就會(huì)導(dǎo)致大量的時(shí)間都用來修改同樣的數(shù)據(jù)上。而且如果頁面太多還很有可能造成錯(cuò)漏的情況。

這個(gè)時(shí)候我們可以將重復(fù)的元素封裝為一個(gè)獨(dú)立的模板，所有關(guān)聯(lián)的頁面都統(tǒng)一使用這個(gè)模板，下次如果要修改時(shí)，直接修改模板即可同時(shí)修改所有關(guān)聯(lián)的頁面。

這樣做的好處是讓原型的模板可復(fù)用性大大增強(qiáng)，而且可以避免大量的錯(cuò)漏問題。

同時(shí)如果一個(gè)產(chǎn)品特別龐大，需要一個(gè)專門的產(chǎn)品設(shè)計(jì)團(tuán)隊(duì)在進(jìn)行設(shè)計(jì)的話，封裝模板可以提升團(tuán)隊(duì)合作時(shí)的效率，畢竟已經(jīng)封裝好的模板可以直接拿來使用，避免了重新造輪子的工作，大大提升了團(tuán)隊(duì)工作的效率。

現(xiàn)在市面上主流的原型設(shè)計(jì)工具如Axure，墨刀等都有一個(gè)“母版”功能，該功能就可以非常方面的做到封裝對(duì)象。

或許Axure的創(chuàng)始人在最初設(shè)計(jì)產(chǎn)品的時(shí)候就已經(jīng)考慮到了頁面復(fù)用的問題，所以他一開始就設(shè)計(jì)了“母版”這樣出色的功能。不愧大師手筆，我等凡人只能膜拜。

八、模板的繼承

模板的繼承實(shí)際上是封裝基礎(chǔ)上衍生出的新特性，在制作原型的過程中會(huì)出現(xiàn)幾個(gè)關(guān)聯(lián)頁面框架相同，但是框架中的元素不一樣的情況。

這時(shí)候可以將大家都一樣的元素封裝為一個(gè)模板，這個(gè)模板作為所有頁面的基類，所有的頁面都是用這個(gè)模板，在這個(gè)模板上添加元素。

這樣的好處也是顯而易見的，這樣可以統(tǒng)一相關(guān)頁面的交互，尤其是在團(tuán)隊(duì)協(xié)作的過程中規(guī)避每一個(gè)人都設(shè)計(jì)出不同風(fēng)格頁面。在實(shí)際工作中同樣可以使用“母版”來進(jìn)行基類的設(shè)計(jì)。

九、多態(tài)

如上文所述，設(shè)置好了基類模板并且讓相關(guān)聯(lián)的頁面都“繼承”了該模板之后，需要根據(jù)每一個(gè)頁面的特點(diǎn)添加不同的元素，這個(gè)實(shí)際就是面向?qū)ο蟮亩鄳B(tài)特性。

每一個(gè)繼承了同樣基類的子類，都有各自不同的特點(diǎn)。而一旦基類發(fā)生了改變，所有的頁面同樣的也會(huì)改變。

最后，引用一下Python之禪的內(nèi)容，來總結(jié)我對(duì)于具象層的認(rèn)知：

• 優(yōu)美勝于丑陋；
• 明了勝于晦澀；
• 簡(jiǎn)潔勝于復(fù)雜；
• 復(fù)雜勝于凌亂；
• 扁平勝于嵌套；
• 間隔勝于緊湊；
• 可讀性很重要；
• 即便假借特例的實(shí)用性之名，也不可違背這些規(guī)則；
• 不要包容所有錯(cuò)誤，除非你確定需要這樣做；
• 當(dāng)存在多種可能，不要嘗試去猜測(cè)；
• 而是盡量找一種，最好是唯一一種明顯的解決方案；
• 雖然這并不容易，因?yàn)槟悴皇?Python 之父；
• 做也許好過不做，但不假思索就動(dòng)手還不如不做；
• 如果你無法向人描述你的方案，那肯定不是一個(gè)好方案；反之亦然。

以上就是我對(duì)于具象層的理解，這一篇有一半的篇幅其實(shí)都是在介紹實(shí)際工作如何開展，純理論的東西并不多。

因?yàn)榫呦笫且粋€(gè)非常復(fù)雜非常長(zhǎng)期的過程，短時(shí)間內(nèi)提升是不可能，只有在實(shí)際工作中不斷的磨練，才能不斷精進(jìn)，真正成為獨(dú)擋一面的高手。

終于講完了面向?qū)ο螽a(chǎn)品觀的五層次，依據(jù)這五個(gè)層次步步為營(yíng)的演進(jìn)，相信你也可以做出令人滿意的產(chǎn)品。

但是構(gòu)建產(chǎn)品是一個(gè)不斷迭代，不斷優(yōu)化的過程，一個(gè)剛剛設(shè)計(jì)出的產(chǎn)品，只是一顆種子，后續(xù)還要經(jīng)過不斷的改善才能長(zhǎng)成一個(gè)參天大樹。接下來，我們一起去了解產(chǎn)品如何《向上生長(zhǎng)》。

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

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