編輯導(dǎo)語(yǔ)：互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)主要指通過(guò)用戶(hù)研究和分析進(jìn)行的整套服務(wù)體系和價(jià)值體系的設(shè)計(jì)過(guò)程，設(shè)計(jì)也分不同的方向，互聯(lián)網(wǎng)產(chǎn)品在設(shè)計(jì)過(guò)程中分成多個(gè)階段，每個(gè)階段是不同的設(shè)計(jì)活動(dòng)；本文作者方向了設(shè)計(jì)的幾個(gè)方面，我們一起來(lái)看一下。

一、什么是設(shè)計(jì)

1. 設(shè)計(jì)定義

設(shè)計(jì)，是一種有目標(biāo)與計(jì)劃，同時(shí)結(jié)合技術(shù)的創(chuàng)作與創(chuàng)新活動(dòng)；不只為生活和商業(yè)服務(wù)，同時(shí)也伴有人文性。

根據(jù)設(shè)計(jì)師Victor Papanek的定義——設(shè)計(jì)是為構(gòu)建有意義的秩序而有意識(shí)付出的努力。

設(shè)計(jì)活動(dòng)不僅需要理解對(duì)象的期望與訴求，同時(shí)也需理解業(yè)務(wù)、技術(shù)和市場(chǎng)及環(huán)境限制；針對(duì)目標(biāo)和賽道通過(guò)嚴(yán)密的規(guī)劃，使得內(nèi)容、形式、行為能在市場(chǎng)中帶來(lái)更多價(jià)值。

2. 設(shè)計(jì)發(fā)展

從18世紀(jì)工業(yè)革命到19世紀(jì)的電氣化，再到第20世紀(jì)末的信息發(fā)展，設(shè)計(jì)一直以不同的風(fēng)貌展現(xiàn)。

在工藝美術(shù)運(yùn)動(dòng)時(shí)期追求浪漫的設(shè)計(jì)思想，而包豪斯時(shí)代講究功能主義，現(xiàn)今在互聯(lián)網(wǎng)浪潮下，設(shè)計(jì)關(guān)注用戶(hù)的每一次感官體驗(yàn)；而今“互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)”成為當(dāng)下時(shí)代的寵兒，設(shè)計(jì)從執(zhí)行工具、協(xié)作方式、承載媒介都發(fā)生革命性變化。

設(shè)計(jì)無(wú)論如何發(fā)展，但始終離不開(kāi)商業(yè)、技術(shù)和用戶(hù)。

二、互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)

1. 設(shè)計(jì)流程

一般來(lái)說(shuō)互聯(lián)網(wǎng)產(chǎn)品的實(shí)現(xiàn)主要分為5個(gè)階段，以職能劃分為：產(chǎn)品、交互、UI、開(kāi)發(fā)、測(cè)試。

產(chǎn)品提出需求，交互搭建架構(gòu)，UI定義風(fēng)格系統(tǒng)，開(kāi)發(fā)負(fù)責(zé)實(shí)現(xiàn)與落地，完成功能測(cè)試后投產(chǎn)上線(xiàn)，而設(shè)計(jì)（交互/UI）處在產(chǎn)品流程的中間環(huán)節(jié)。

2. 交互與UI的關(guān)系

UI是交互的外現(xiàn)，交互是UI的內(nèi)撐，就如皮膚和骨架的關(guān)系，交互的結(jié)構(gòu)布局決定了UI思考方向；在常見(jiàn)的產(chǎn)品設(shè)計(jì)配合中一定是先有交互，后有UI。

• 交互的價(jià)值在于: 從業(yè)務(wù)需求梳理信息結(jié)構(gòu)，從產(chǎn)品場(chǎng)景搭建用戶(hù)操作流程，為產(chǎn)品的可用性、易用性負(fù)責(zé)。
• 而UI的價(jià)值在于：圍繞產(chǎn)品定位塑造風(fēng)格與形象，為產(chǎn)品、用戶(hù)創(chuàng)建情感連接，從而更好的實(shí)現(xiàn)業(yè)務(wù)轉(zhuǎn)化與增長(zhǎng)

三、什么是交互設(shè)計(jì)

1. 交互的定義

交互設(shè)計(jì)是指人與產(chǎn)品、系統(tǒng)或服務(wù)之間創(chuàng)建的一系列對(duì)話(huà)。交互設(shè)計(jì)師可以被稱(chēng)為是行為的塑造者。

形成完整的對(duì)話(huà)機(jī)制，用戶(hù)之間相互發(fā)言并做出回應(yīng)，如此往復(fù)形成習(xí)慣；這樣人與產(chǎn)品的溝通就會(huì)變得更深切、自然有默契，讓產(chǎn)品逐漸成為生活的一部分。

交互設(shè)計(jì)最終目的是從以人為本的角度思考產(chǎn)品“可用性”和“體驗(yàn)性”，讓產(chǎn)品與人之間形成一種微妙、持久、直覺(jué)的對(duì)話(huà)關(guān)系

2. 工作流程

交互設(shè)計(jì)處在介于產(chǎn)品和視覺(jué)之間，主要工作就是對(duì)接產(chǎn)品和業(yè)務(wù)，幫助其梳理業(yè)務(wù)流程、搭建結(jié)構(gòu)、建立一套完整的互動(dòng)與操作機(jī)制；同時(shí)為UI設(shè)計(jì)師提供原型框架圖，為產(chǎn)品設(shè)計(jì)的可行性提供思考方案。

3. 設(shè)計(jì)工具

交互設(shè)計(jì)是思考型和表達(dá)型的工作，最為常用的三個(gè)工具：思維導(dǎo)圖、Axure、溝通；思維導(dǎo)圖搭建產(chǎn)品架構(gòu)，Axure負(fù)責(zé)輸出原型和產(chǎn)品流程圖，而溝通是將產(chǎn)品的設(shè)計(jì)思想有效傳達(dá)出來(lái)。

4. 設(shè)計(jì)方法

科學(xué)的設(shè)計(jì)方法才能更好的推進(jìn)項(xiàng)目；經(jīng)過(guò)近幾年的產(chǎn)品沉淀，筆者也總結(jié)出了自己的設(shè)計(jì)方法；“用戶(hù)畫(huà)像”是通過(guò)提取產(chǎn)品目標(biāo)群體的年齡、習(xí)慣、性格、職業(yè)等背景信息，洞察并分析得出“用戶(hù)特征模型”，為產(chǎn)品策略提供準(zhǔn)確的設(shè)計(jì)依據(jù)。

在產(chǎn)品不同的迭代期通過(guò)“體驗(yàn)地圖”可深度的分析產(chǎn)品流程，以行為、情緒、痛點(diǎn)等指標(biāo)進(jìn)行量化記錄，并判斷出的產(chǎn)品潛在的問(wèn)題；而“可用性測(cè)試”則是通過(guò)制定目標(biāo)任務(wù)的方式，通過(guò)觀察記錄任務(wù)執(zhí)行者在操作過(guò)程中的反饋、狀態(tài)、疑惑等問(wèn)題，將其進(jìn)行歸納分類(lèi)、分級(jí)，從而提出針對(duì)性的優(yōu)化方案。

5. 交互產(chǎn)出

交互設(shè)計(jì)師的主要產(chǎn)出物即是交互原型文檔。在原型圖中提供詳細(xì)的頁(yè)面之間關(guān)系標(biāo)注、規(guī)則排序、特殊情況說(shuō)明等，便于UI設(shè)計(jì)師理解；一份完整的交互文檔還需輸出用戶(hù)流程圖和設(shè)計(jì)規(guī)范，便于同事之間的協(xié)作和版本之間的管理。

四、什么是UI設(shè)計(jì)

1. UI的定義

UI設(shè)計(jì)是指軟件人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)；好的UI設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品位，還要讓軟件的操作變得舒適簡(jiǎn)單、自由，充分體現(xiàn)軟件的定位和特點(diǎn)。

從產(chǎn)品定位中挖掘視覺(jué)風(fēng)格，對(duì)界面元素（按鈕、控件、字體、圖標(biāo)等）的屬性進(jìn)行標(biāo)準(zhǔn)化和規(guī)范化，完善設(shè)計(jì)細(xì)節(jié)輸出高保真圖與風(fēng)格指南。

2. 工作流程

UI設(shè)計(jì)介于交互與開(kāi)發(fā)之間，上游要理解和評(píng)估交互原型，下游要懂得開(kāi)發(fā)原理和方式。

UI設(shè)計(jì)開(kāi)始之前，需通過(guò)原型評(píng)審內(nèi)化需求、了解功能，對(duì)項(xiàng)目進(jìn)行工作復(fù)雜度、工作量、風(fēng)險(xiǎn)性等進(jìn)行評(píng)估；在多方確認(rèn)無(wú)誤之后才可進(jìn)入設(shè)計(jì)排期；完成UI設(shè)計(jì)交互需提前驗(yàn)收，并發(fā)給開(kāi)發(fā)編碼，在測(cè)試階段通過(guò)走查環(huán)節(jié)為上線(xiàn)質(zhì)量保駕護(hù)航。

3. 設(shè)計(jì)工具

界面設(shè)計(jì)主流的工具就是用sketch，針對(duì)界面而生，全矢量化、繪圖能力強(qiáng)同時(shí)還有強(qiáng)大的插件庫(kù)。

PS是在處理運(yùn)營(yíng)需求時(shí)比較常見(jiàn)，如banner、活動(dòng)主題及圖片；Ai也是在插畫(huà)表現(xiàn)上從誕生至今一直是UI設(shè)計(jì)師的摯愛(ài)，如引導(dǎo)頁(yè)、空白頁(yè)、升級(jí)框等。

同樣而言，溝通能力也是UI設(shè)計(jì)的必備技能，往往優(yōu)秀的設(shè)計(jì)師都是一個(gè)表達(dá)思想的達(dá)人，UI設(shè)計(jì)中的難題基本是通過(guò)溝通最終而有效解決。

4. UI方法

有效的UI設(shè)計(jì)方法可以讓的工作事半功倍，“頭腦風(fēng)暴”可以窮盡集體智慧挖掘產(chǎn)品的核心關(guān)鍵詞，碰撞出有價(jià)值的設(shè)計(jì)思想，為產(chǎn)品快速找到定位。

通過(guò)“情緒版法則”將產(chǎn)品帶給用戶(hù)的情緒因素，通過(guò)一系列圖片進(jìn)行可視覺(jué)化表達(dá)，有效的推演出風(fēng)格和方向, 同時(shí)具化產(chǎn)品的配色方案。

而“競(jìng)品分析”可以通過(guò)了解直接競(jìng)品、間接競(jìng)品洞察市場(chǎng)，從而調(diào)整設(shè)計(jì)策略，避開(kāi)同行產(chǎn)品的同質(zhì)化；使產(chǎn)品可以從風(fēng)格、品牌、體驗(yàn)上有效與競(jìng)爭(zhēng)者拉開(kāi)差異。

5. UI產(chǎn)出物

UI設(shè)計(jì)師的核心產(chǎn)出是視覺(jué)效果圖，它決定用戶(hù)對(duì)產(chǎn)品第一印象。

在項(xiàng)目執(zhí)行中開(kāi)發(fā)前，需交付前端產(chǎn)品開(kāi)發(fā)包（內(nèi)含:標(biāo)注、切圖、UI圖），在測(cè)試環(huán)節(jié)還需跟進(jìn)走查，輸出問(wèn)題文檔，并推進(jìn)視覺(jué)原。

在產(chǎn)品的不同周期，需建立UI設(shè)計(jì)規(guī)范，便于整個(gè)產(chǎn)品UI體系化迭代與高效協(xié)作。

五、未來(lái)趨勢(shì)

1. 體驗(yàn)設(shè)計(jì)

隨著互聯(lián)網(wǎng)設(shè)計(jì)行業(yè)的日漸成熟，設(shè)計(jì)師并不僅僅解決產(chǎn)品的單線(xiàn)問(wèn)題。

交互和UI是設(shè)計(jì)的縱深細(xì)分，而未來(lái)設(shè)計(jì)需突破職業(yè)瓶頸，打通崗位之間的壁壘是不二之選，“用戶(hù)體驗(yàn)設(shè)計(jì)”成為未來(lái)的發(fā)展方向。

既可以從產(chǎn)品角度討論業(yè)務(wù)戰(zhàn)略，也可以從設(shè)計(jì)角度思考美學(xué)，還能從開(kāi)發(fā)角度評(píng)估需求的可實(shí)現(xiàn)性，是能夠解決極其復(fù)雜問(wèn)題的復(fù)合型職位。

六、結(jié)語(yǔ)

設(shè)計(jì)的目的最終是解決問(wèn)題，交互偏重業(yè)務(wù)與功能，UI偏重品牌與風(fēng)格。

在不同的環(huán)節(jié)兩者關(guān)注焦點(diǎn)不一樣，但最終目的相同，都是為用戶(hù)打造優(yōu)良的產(chǎn)品；從用戶(hù)接觸產(chǎn)品那刻起，他（她）們關(guān)注的永遠(yuǎn)都是產(chǎn)品本身提供服務(wù)與體驗(yàn)。

作者：WOWdesign，研究設(shè)計(jì)價(jià)值最大化，涉及用戶(hù)體驗(yàn)、品牌體驗(yàn)、空間體驗(yàn)。

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

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