什么是設(shè)計——交互&UI

3 評論 30354 瀏覽 222 收藏 12 分鐘

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

一、什么是設(shè)計

1. 設(shè)計定義

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

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

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

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

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

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

設(shè)計無論如何發(fā)展,但始終離不開商業(yè)、技術(shù)和用戶。

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

1. 設(shè)計流程

一般來說互聯(lián)網(wǎng)產(chǎn)品的實現(xiàn)主要分為5個階段,以職能劃分為:產(chǎn)品、交互、UI、開發(fā)、測試。

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

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

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

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

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

1. 交互的定義

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

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

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

2. 工作流程

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

3. 設(shè)計工具

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

4. 設(shè)計方法

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

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

5. 交互產(chǎn)出

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

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

1. UI的定義

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

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

2. 工作流程

UI設(shè)計介于交互與開發(fā)之間,上游要理解和評估交互原型,下游要懂得開發(fā)原理和方式。

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

3. 設(shè)計工具

界面設(shè)計主流的工具就是用sketch,針對界面而生,全矢量化、繪圖能力強同時還有強大的插件庫。

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

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

4. UI方法

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

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

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

5. UI產(chǎn)出物

UI設(shè)計師的核心產(chǎn)出是視覺效果圖,它決定用戶對產(chǎn)品第一印象。

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

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

五、未來趨勢

1. 體驗設(shè)計

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

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

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

六、結(jié)語

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

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

 

作者:WOWdesign,研究設(shè)計價值最大化,涉及用戶體驗、品牌體驗、空間體驗。

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

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 新產(chǎn)品的落地差不多經(jīng)歷了這些環(huán)節(jié):
    用戶需求>-產(chǎn)品需求采集 >產(chǎn)品策劃 >產(chǎn)品交互設(shè)計 >產(chǎn)品視覺設(shè)計 >產(chǎn)品頁面重構(gòu) >產(chǎn)品研發(fā) >產(chǎn)品測試 >產(chǎn)品發(fā)布 >需求收集 >迭代

    那從用戶需求到原型生成,是怎么抽象到具象的? 就像生活中 蓋房子,拿到的原材料都鋼筋 混凝土, 產(chǎn)出的高樓卻各不同;
    公司餐廳,廚師拿到的原材料是番茄和面,產(chǎn)出的卻是番茄臊子面,為啥不是湖湯面。
    就像你在設(shè)計工作中, 我覺得研究用戶、組織、競品、政策, 這些都是原材料, 經(jīng)你輸出出原型時,基本就具體化了,我看網(wǎng)稱為具象就也這么說了。 張三拿到同樣的原材料,輸出了臊子面,李四卻輸出了糊湯面,這個過程發(fā)生了什么。

    來自河南 回復(fù)
  2. 我覺得寫的好好哦,產(chǎn)品設(shè)計職能關(guān)系感覺清楚了很多

    來自四川 回復(fù)
  3. 文章內(nèi)容信息滯后了。。。

    來自上海 回復(fù)