什麼是設計——交互&UI

2020-12-17 人人都是產品經理

編輯導語:網際網路產品設計主要指通過用戶研究和分析進行的整套服務體系和價值體系的設計過程,設計也分不同的方向,網際網路產品在設計過程中分成多個階段,每個階段是不同的設計活動;本文作者方向了設計的幾個方面,我們一起來看一下。

一、什麼是設計

1. 設計定義

設計,是一種有目標與計劃,同時結合技術的創作與創新活動;不只為生活和商業服務,同時也伴有人文性。

根據設計師Victor Papanek的定義——設計是為構建有意義的秩序而有意識付出的努力。

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

2. 設計發展

從18世紀工業革命到19世紀的電氣化,再到第20世紀末的信息發展,設計一直以不同的風貌展現。

在工藝美術運動時期追求浪漫的設計思想,而包浩斯時代講究功能主義,現今在網際網路浪潮下,設計關注用戶的每一次感官體驗;而今「網際網路產品設計」成為當下時代的寵兒,設計從執行工具、協作方式、承載媒介都發生革命性變化。

設計無論如何發展,但始終離不開商業、技術和用戶。

二、網際網路產品設計

1. 設計流程

一般來說網際網路產品的實現主要分為5個階段,以職能劃分為:產品、交互、UI、開發、測試。

產品提出需求,交互搭建架構,UI定義風格系統,開發負責實現與落地,完成功能測試後投產上線,而設計(交互/UI)處在產品流程的中間環節。

2. 交互與UI的關係

UI是交互的外現,交互是UI的內撐,就如皮膚和骨架的關係,交互的結構布局決定了UI思考方向;在常見的產品設計配合中一定是先有交互,後有UI。

交互的價值在於: 從業務需求梳理信息結構,從產品場景搭建用戶操作流程,為產品的可用性、易用性負責。而UI的價值在於:圍繞產品定位塑造風格與形象,為產品、用戶創建情感連接,從而更好的實現業務轉化與增長

三、什麼是互動設計

1. 交互的定義

互動設計是指人與產品、系統或服務之間創建的一系列對話。互動設計師可以被稱為是行為的塑造者。

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

互動設計最終目的是從以人為本的角度思考產品「可用性」和「體驗性」,讓產品與人之間形成一種微妙、持久、直覺的對話關係

2. 工作流程

互動設計處在介於產品和視覺之間,主要工作就是對接產品和業務,幫助其梳理業務流程、搭建結構、建立一套完整的互動與操作機制;同時為UI設計師提供原型框架圖,為產品設計的可行性提供思考方案。

3. 設計工具

互動設計是思考型和表達型的工作,最為常用的三個工具:思維導圖、Axure、溝通;思維導圖搭建產品架構,Axure負責輸出原型和產品流程圖,而溝通是將產品的設計思想有效傳達出來。

4. 設計方法

科學的設計方法才能更好的推進項目;經過近幾年的產品沉澱,筆者也總結出了自己的設計方法;「用戶畫像」是通過提取產品目標群體的年齡、習慣、性格、職業等背景信息,洞察並分析得出「用戶特徵模型」,為產品策略提供準確的設計依據。

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

5. 交互產出

互動設計師的主要產出物即是交互原型文檔。在原型圖中提供詳細的頁面之間關係標註、規則排序、特殊情況說明等,便於UI設計師理解;一份完整的交互文檔還需輸出用戶流程圖和設計規範,便於同事之間的協作和版本之間的管理。

四、什麼是UI設計

1. UI的定義

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

從產品定位中挖掘視覺風格,對界面元素(按鈕、控制項、字體、圖標等)的屬性進行標準化和規範化,完善設計細節輸出高保真圖與風格指南。

2. 工作流程

UI設計介於交互與開發之間,上遊要理解和評估交互原型,下遊要懂得開發原理和方式。

UI設計開始之前,需通過原型評審內化需求、了解功能,對項目進行工作複雜度、工作量、風險性等進行評估;在多方確認無誤之後才可進入設計排期;完成UI設計交互需提前驗收,並發給開發編碼,在測試階段通過走查環節為上線質量保駕護航。

3. 設計工具

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

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

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

4. UI方法

有效的UI設計方法可以讓的工作事半功倍,「頭腦風暴」可以窮盡集體智慧挖掘產品的核心關鍵詞,碰撞出有價值的設計思想,為產品快速找到定位。

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

而「競品分析」可以通過了解直接競品、間接競品洞察市場,從而調整設計策略,避開同行產品的同質化;使產品可以從風格、品牌、體驗上有效與競爭者拉開差異。

5. UI產出物

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

在項目執行中開發前,需交付前端產品開發包(內含:標註、切圖、UI圖),在測試環節還需跟進走查,輸出問題文檔,並推進視覺原。

在產品的不同周期,需建立UI設計規範,便於整個產品UI體系化迭代與高效協作。

五、未來趨勢

1. 體驗設計

隨著網際網路設計行業的日漸成熟,設計師並不僅僅解決產品的單線問題。

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

既可以從產品角度討論業務戰略,也可以從設計角度思考美學,還能從開發角度評估需求的可實現性,是能夠解決極其複雜問題的複合型職位。

六、結語

設計的目的最終是解決問題,交互偏重業務與功能,UI偏重品牌與風格。

在不同的環節兩者關注焦點不一樣,但最終目的相同,都是為用戶打造優良的產品;從用戶接觸產品那刻起,他(她)們關注的永遠都是產品本身提供服務與體驗。

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

本文由 @agoodesign 原創發布於人人都是產品經理。未經許可,禁止轉載。

題圖來自Unsplash,基於 CC0 協議

相關焦點

  • 如何零基礎學UI設計
    對於初學者來說,可能存在這樣的疑問:UI到底是做什麼的,自己是是否適合做UI設計,能否學好UI設計,學習UI設計需要多長時間,怎麼樣才能快速學好UI設計..... UI是做什麼的?
  • ui設計中的構圖技巧有哪些?
    ui設計中的構圖技巧有哪些?在ui設計中,圖形設計,互動設計,色彩搭配,圖標設計等等離不開構圖技巧,掌握好構圖技巧對於設計來說,能讓設計更加得心應手,今天優行者小編將跟大家說說,ui設計中的構圖技巧。一、對比對比反差是能夠體現視覺設計中最突出的表現方式,鮮明直接的對比性能夠直接表達事物的性質以及特點,通過對比,也能夠更加清晰的強調設計中的重點,這樣帶給大眾的視覺體驗也更加深刻。
  • 最基礎的角度來聊聊一位優秀的ui設計師是如何進行設計的
    在這之中,最基礎也是最困難的也就是設計,眾所周知設計有很多流程,比如創意階段、網站設計等,但是大部分設計師的工作流中最常用的其實就是ps做圖,通過ps進行作品的美化。然而,其實很多設計其實都只是表面的美觀工作,本質上來講根本不能稱之為設計,需要我們從最本質的方面來進行設計、前期開發和後期運營等等環節的工作。
  • 現在學UI設計的是不是都是傻子
    首先我們從標題可以推斷出:一、提問者應該是UI設計設計小白,甚至是IT小白,但是對設計這個行業感興趣或者有學習UI設計入行的想法,這樣提問可能只是為了博眼球,想吸引大家回答從而得出一些關於UI設計行業有關的「爆料」,從而確定現在學UI設計是不是明智之舉。
  • UI設計必備:10個無需翻牆就能天天進階的UI設計網站
    ,幫助設計師們獲得UI方面的設計靈感,提供豐富的設計參考案例,同時還提供收費版的在線設計工具。推薦指數:5顆星網址:http://www.best-infographics.com/Codrops用戶互動設計靈感集合地
  • UID設計培訓中心解讀UI互動設計需要學習什麼軟體
    軟體只是工具,而設計能力才是主要競爭力。你思考的順序應當是:解決什麼問題,需要什麼形式,然後才是用軟體去實現。上海非凡教育UI設計培訓老師來仔細說說UI設計方向應該學習什麼軟體?目前來講:1、Sketch優先級最高,但這個軟體僅限在Mac電腦上才能使用。
  • UI設計中彈窗設計指南
    彈窗又稱為對話框,是App與用戶進行交互的常見方式之一。首先,因為處於獨佔模式,彈框能夠迅速抓住用戶的注意力;其次,層級清晰,半透明遮罩能讓用戶感覺自己沒有離開原頁面,清楚當前在哪裡,接下來要做什麼;其次在當前頁面彈出可以避免二次頁面加載和跳轉,能夠快速向用戶展示信息。
  • 成長 | UI進階產品設計師之互動設計
    早在2015年,阿里巴巴設計高管就提到「全棧設計師」的概念,而「產品設計師」這個概念,更是很早就存在了,只是一直未成大氣候。隨著網際網路「下半場」的到來,產品設計師在行業內的呼聲越來越高,它很可能取代UI和UE,變成它們二者的最終形態。作為一個兼UED的工作的UID,一直未對互動設計進行系統性的思考。今天就來梳理下關於互動設計的一些理論和思路。
  • UI設計和平面設計有什麼區別哪個前景更好
    有很多從事平面設計的朋友問我,UI設計是什麼?和平面設計有什麼區別,UI設計和平面設計的前景哪個會更勝一籌呢?今天胡老師和大家來說一下。UI設計則是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。好的UI設計不僅是讓軟體變得有個性有品味,還要讓軟體的操作變得舒適、簡單、自由、充分體現軟體的定位和特點。UI設計偏重於:手機和網頁的界面圖標設計。 六、學習的內容不同 平面設計需要學什麼?
  • ui設計師必須了解的圖標分類
    ui設計師必須了解的圖標分類。圖標設計作為ui界面設計的重要組成部分,對於信息的傳播具有至關重要的作用。那麼一般情況下圖標可以分為哪幾種呢?今天優行者就跟大家科普一下那些常用的圖標分類。一、交互性圖標交互性圖標在用戶界面發揮的作用不僅僅是展示,還會參與到人機互動當中來,是人機互動過程中不可或缺的組成部分。點擊交互性圖標之後,它會給予一定程度的響應,其中最典型的就是點讚的操作了。同時它也可以幫助用戶執行特定的操作,實現相應的功能。
  • UI設計和UE/UX設計有什麼區別?它們的晉升路徑是什麼?
    而UX,就是用戶體驗設計,是用戶與產品或服務之間的交互。它不是一種技能或者工作技能,而是一種用戶在使用產品過程中產生的經驗及互動體驗。UI是視覺設計,決定產品風格;UX是互動設計,決定產品舒適度。UI決定產品的整個調性,包括風格,甚至可以說UI設計師的風格就決定了產品的風格。而UX著重於整體布局,從用戶角度把握產品,決定產品的舒適度。UI是將idea變成可視化頁面的產品,UX是產品和用戶相關聯。UI主要學習界面設計,UX主要學習用戶體驗設計。
  • 大專畢業學ui設計好找工作麼?
    想要整體提升產品的質量,那麼就需要在前端設計方面下大功夫,其中就包括了UI設計、互動設計、用戶體驗設計等方面。有同學想知道,在大專畢業學ui設計好找工作麼?其實就招聘市場來看,UI設計師仍然是一個人才缺口大的職業;但是能否順利實現就業,關鍵還是在於你學習到的技術能不能達到崗位技術要求。
  • UI設計適合女生學習嗎?女生做UI設計累嗎?
    首先講下什麼是UI設計? UI設計即用戶界面設計,是指對軟體的人機互動、操作邏輯、界面美觀的整體設計。優秀的UI設計師除了要把界面設計的美觀還要考慮到軟體操作的極簡性,要讓軟體的操作變得更貼合用戶需求。 比如我們手機上下載的APP軟體,界面都是屬於UI設計師設計出來的。
  • UIUX用戶界面/體驗/互動設計:超吸金熱門專業
    今天帕特君要介紹的專業UIUX  就是這些簡潔大方的界面設計  以及這些好玩逗趣的體驗設計是什麼?學什麼?怎麼申?去哪學?帕特君這一篇帶你逐一擊破有關UIUX專業的那些疑問。也的確有一些院校會在綜合產品設計/工業設計專業中開設UX細分方向或相關課程。 UIUX 學什麼 倫敦藝術大學倫敦傳媒學院互動設計藝術本科倫敦傳媒學院的互動設計藝術本科是一個實踐主導的、動態的和探索性的課程,旨在通過實驗技術與過程試探人與體驗之間的關係。
  • 互動設計師到底是個什麼組織
    互動設計師一直被作為一個神秘的組織存在。那麼究竟什麼是互動設計師,互動設計師又是做什麼的呢?
  • 微風:什麼是UI設計?
    大家好我是微風,一個愛設計愛生活的平面設計師,最近很多朋友都在問什麼是UI設計?零基礎能學習UI設計嗎?UI設計學習需要使用什麼軟體?就業前景怎麼樣呢!今天微風就來給大家介紹下什麼是UI設計,UI設計學習需要用到的軟體以及UI設計就業情況都給大家詳細的解說。
  • 遊戲設計那些事丨《英雄聯盟》界面互動設計之道(上篇)
    今天就和大家聊聊《英雄聯盟》界面更新的互動設計。排位賽匹配界面更新的ui/互動設計研究15年11月底,在LOL測試服的更新中,遊戲內的排位賽匹配和選人系統進行了一次很大的調整。BP(選人/禁選)不再是一樓的特權,玩家匹配前可以選擇傾向英雄(防止被BAN)和位置(分為主要和次要),全隊五人都在不同程度中參與到了決策,更多人性化的設定,遊戲趣味更足。
  • UI設計師怎樣做,才能達到年薪30w?
    作為一枚界面設計師我真的很想為UI設計抱不平啊!!UI設計真是一個備受不解的職業常會被誤解,然後出現以下場景程序歐巴:界面畫好沒?按鈕圓的方的不都能用嗎?糾結那多幹嘛?產品經理:這次我們就10個頁面,半天能夠搞定吧,都有交互了。
  • 什麼是遊戲互動設計?從設計目標說開去
    以下文章來源於XuX遊戲 ,作者立風Ukyo每當被問遊戲交互和產品交互有什麼不同時,腦子裡飛過各種答案,仿佛哪裡都不同,又一言難盡。兩者同屬互動設計範疇,在共同的原則之下,也存在著許多不同,比如思維方式、設計方法、評價標準……如果從設計目標分析,遊戲交互有什麼獨特之處?
  • 設計師如何將品牌元素融入ui設計
    設計師如何將品牌元素融入ui設計?在為企業提供ui設計服務的過程中,設計師需要將品牌元素有機融合到ui設計中去,使之更加符合企業的基本定位。然而很多在ui培訓學校學習的新人並不清楚應該如何將品牌融入ui設計,接下來小編就給大家簡單講一下這個問題。