APP產(chǎn)品設(shè)計大揭秘

日期：2019年6月13日

一、前言：揭秘APP名字和Icon的來源

主講人：楊萌（網(wǎng)易傳媒內(nèi)容運營中心運營經(jīng)理）

一、名字來源

Step1：了解市面上產(chǎn)品名稱，總結(jié)好名字的規(guī)律。一個好的名字應(yīng)具備以下特點：

a. 有辨識度、區(qū)分度，能讓用戶在眾多產(chǎn)品中快速識別出我們的產(chǎn)品；

b. 傳播成本低，便于打字、說起、好記，避免英文，以及元音結(jié)尾，朗朗上口，易于傳播；

c. 具有對目標(biāo)用戶使用產(chǎn)品喚起的能力，能夠吸引用戶的注意力。

Step2：結(jié)合產(chǎn)品定位，通過頭腦風(fēng)暴擬定產(chǎn)品名稱。列出產(chǎn)品定位關(guān)鍵詞（如生活日常、溫暖、治愈、真實、年輕、平凡等），根據(jù)這些關(guān)鍵詞發(fā)散出多個產(chǎn)品名稱。

Step3：通過300名目標(biāo)用戶投票選出產(chǎn)品名“咕?！?。

二、Icon來源

Step1：確定設(shè)計方向。結(jié)合產(chǎn)品名稱、內(nèi)容風(fēng)格及產(chǎn)品定位，與現(xiàn)有APP有區(qū)分度，并保持色調(diào)一致。

Step2：通過50個種子用戶投票選出最終的Icon設(shè)計。

三、App產(chǎn)品交互設(shè)計解析

主講人：徐琳琳（網(wǎng)易高級交互設(shè)計主管）

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

交互設(shè)計主要處理的是“人-機-環(huán)境”之間的對話。為了讓機器（產(chǎn)品）能夠理解人的需求，并作出相應(yīng)的反饋，需要進行交互設(shè)計。如何讓雙方（人和機器）明白對方的意思，知道對方的進度，知道對方的困難，并有效解決，是交互設(shè)計的核心。一個好的交互設(shè)計能夠讓用戶在使用過程中獲得更好的體驗，從而提高產(chǎn)品的競爭力。

一、交互設(shè)計的核心內(nèi)涵

交互設(shè)計，是用戶在使用一個系統(tǒng)或產(chǎn)品時所經(jīng)歷的一段“旅程”。在這段旅程中，用戶的每一次點擊、滑動或是其他操作，都是與產(chǎn)品的一次“對話”。這種對話的流暢度、直觀性，決定了用戶的使用體驗。

二、交互設(shè)計在工作中的地位與作用

交互設(shè)計在整個產(chǎn)品流程中扮演著至關(guān)重要的角色。不同于產(chǎn)品經(jīng)理的工作，雖然兩者有交融，但各有側(cè)重。產(chǎn)品經(jīng)理更注重產(chǎn)品的框架和策略，而交互設(shè)計則專注于為用戶打造極致的使用體驗。交互設(shè)計師的工作內(nèi)容包括： a.深入了解用戶的特性、需求和目標(biāo)，以便更好地把握用戶心理。 b.梳理用戶的任務(wù)流程，確保用戶能夠順暢地完成操作。 c.整理信息，構(gòu)建清晰的頁面結(jié)構(gòu)，使用戶能夠迅速找到所需內(nèi)容。 d.提出設(shè)計方案草稿，制作原型，為產(chǎn)品的視覺和交互效果奠定基礎(chǔ)。 e.跟進設(shè)計和開發(fā)過程，確保設(shè)計方案得以完美實現(xiàn)。 f.在產(chǎn)品上線后，繼續(xù)跟進并進行迭代優(yōu)化，不斷提升用戶體驗。

三、咕嚕產(chǎn)品的交互設(shè)計概述

咕嚕作為一款獨特的產(chǎn)品，其交互設(shè)計也與眾不同。讓我們從它的產(chǎn)品結(jié)構(gòu)開始探討。

3.1 獨特的產(chǎn)品結(jié)構(gòu)

在咕嚕產(chǎn)品中，頁面的轉(zhuǎn)換方式別具一格。傳統(tǒng)的產(chǎn)品往往通過點擊來進入不同的頻道或內(nèi)容，而在咕嚕中，用戶可以通過左右滑動來切換同一主題下的其他視頻內(nèi)容。這種設(shè)計既流暢又直觀，為用戶帶來了全新的使用體驗。

==============================

一、UI設(shè)計師的多維能力

UI設(shè)計師在打造一款成功的App產(chǎn)品時，不僅僅是技術(shù)上的高手，更需要擁有多方面的能力。這些能力如同設(shè)計師的“刷子”，是他們手中的利器。我們稱之為“T”型能力結(jié)構(gòu)。在設(shè)計交互能力方面，設(shè)計師需要掌握如何使界面更加直觀、易用。運營能力也是關(guān)鍵，如何讓產(chǎn)品從眾多競爭對手中脫穎而出，吸引更多用戶，這都需要設(shè)計師對市場有深入的了解和把握。市場研究能力和數(shù)據(jù)分析能力也不可忽視。只有深入了解用戶的需求和行為，才能設(shè)計出更符合他們期待的產(chǎn)品。除此之外，行業(yè)積累能力也是UI設(shè)計師必備的素質(zhì)。每個行業(yè)都有其獨特之處，設(shè)計師需要不斷積累行業(yè)經(jīng)驗，才能更好地將設(shè)計與實際應(yīng)用結(jié)合。

二、探索“咕?！痹O(shè)計風(fēng)格

在APP設(shè)計過程中，首先要明確產(chǎn)品的目標(biāo)是什么，這決定了我們的設(shè)計方向。我們需要思考產(chǎn)品要滿足哪些用戶需求，這些用戶的需求點是什么。接下來，我們要明確產(chǎn)品的目標(biāo)用戶是誰，他們的特征是怎樣的。只有深入了解用戶，我們才能設(shè)計出更符合他們習(xí)慣和喜好的產(chǎn)品。我們還要思考如何提供獨特而優(yōu)質(zhì)的用戶體驗，讓用戶在享受產(chǎn)品的也能感受到我們的品牌魅力。在這個過程中，“咕?！痹O(shè)計風(fēng)格是否適合我們的產(chǎn)品，也需要我們進行深入的研究和探索。

三.彈幕熱力圖初探

隨著網(wǎng)絡(luò)視頻的普及，彈幕已經(jīng)成為了一種重要的互動方式。彈幕熱力圖作為展示彈幕數(shù)據(jù)的一種可視化工具，可以幫助我們更好地了解用戶的行為和喜好。在App產(chǎn)品視覺設(shè)計中，我們可以利用彈幕熱力圖來優(yōu)化界面設(shè)計，提高用戶體驗。例如，通過彈幕熱力圖，我們可以了解用戶在觀看視頻時哪些部分關(guān)注度最高，從而調(diào)整界面布局和交互設(shè)計，提供更加符合用戶習(xí)慣的產(chǎn)品。

四、彈幕互動的重要性

彈幕互動是提升用戶參與感和歸屬感的重要手段。通過彈幕，用戶可以實時表達(dá)自己的看法和感受，與其他觀眾進行交流。這種實時的互動方式可以激發(fā)用戶的活躍度和粘性，提高產(chǎn)品的用戶留存率。通過彈幕互動，我們也可以收集用戶的反饋和建議，為產(chǎn)品的優(yōu)化和改進提供重要的參考。在App產(chǎn)品視覺設(shè)計中，我們需要充分考慮彈幕互動的因素，為用戶提供一個良好的互動環(huán)境。

五、產(chǎn)品設(shè)計中的細(xì)節(jié)把握

在App產(chǎn)品視覺設(shè)計中，細(xì)節(jié)決定成敗。設(shè)計師需要關(guān)注每一個細(xì)節(jié)，從色彩、字體、圖標(biāo)到交互設(shè)計、動畫效果等都需要精心打磨。只有這樣，才能打造出用戶體驗極佳的產(chǎn)品。我們還需要注重產(chǎn)品的整體風(fēng)格統(tǒng)一性。無論是哪個頁面、哪個元素，都要與產(chǎn)品的主題和風(fēng)格保持一致。這樣才能讓用戶在使用產(chǎn)品時感受到統(tǒng)一、和諧的整體感受。

以上就是關(guān)于彈幕熱力圖與App產(chǎn)品視覺設(shè)計的一些分享。希望對大家有所幫助和啟發(fā)！情緒設(shè)計與UI開發(fā)流程中的關(guān)鍵步驟解析

一、情緒板設(shè)計推導(dǎo)

在UI設(shè)計中，情緒板是表達(dá)設(shè)計情感與風(fēng)格的重要工具。其設(shè)計推導(dǎo)過程如下：

Step 1：原生關(guān)鍵詞的誕生

設(shè)計之初，需從項目主題中提煉出核心關(guān)鍵詞，這是設(shè)計的原點。

Step 2：發(fā)散思維與頭腦風(fēng)暴

基于原生關(guān)鍵詞，運用頭腦風(fēng)暴法發(fā)散思考，挖掘更多相關(guān)詞匯和概念，確定最終的衍生關(guān)鍵詞。

Step 3：圖片查找與元素搜集

搜集與關(guān)鍵詞相關(guān)的圖片素材，拼貼整合，為后續(xù)設(shè)計提供視覺參考。

Step 4：關(guān)鍵詞映射

視覺、心情、物化三個維度的關(guān)鍵詞與素材進行映射，確保設(shè)計元素與主題緊密相關(guān)。

Step 5：情緒版建立與色彩提取

利用高斯模糊或馬賽克處理手法，建立情緒版，從中提取關(guān)鍵色彩。

Step 6：最終配色方案

基于提取的色彩，結(jié)合項目需求，確定最終配色方案。

二、Icon設(shè)計的演變

在UI設(shè)計中，Icon是重要視覺元素之一。其設(shè)計演變過程包括：

a. Icon的種類：線性（粗、細(xì)）、面性（扁平、寫實）以及線面結(jié)合等。

b. Icon元素的比重：根據(jù)設(shè)計需求調(diào)整元素大小與比例。

c. Icon的變化：根據(jù)流行趨勢與項目需求進行適時調(diào)整與創(chuàng)新。

三、排版布局——首頁設(shè)計

在首頁設(shè)計中，排版布局至關(guān)重要。需明確點擊區(qū)域的劃分，如綠色代表單手輕松可點擊區(qū)域，橙色代表單手勉強可點擊區(qū)域，紅色代表單手無法點擊區(qū)域。確保用戶操作的便捷性。

四、其他頁面的排版布局

這部分設(shè)計同樣重要，需要考慮到整體風(fēng)格的一致性以及用戶體驗的流暢性。通過合理的排版布局，提升用戶的使用體驗。

五、UI設(shè)計開發(fā)中項目的開發(fā)流程

UI設(shè)計師在產(chǎn)品開發(fā)流程中扮演著重要角色。隨著規(guī)范的產(chǎn)品設(shè)計流程的引入，每個崗位的職責(zé)越來越清晰。一個常規(guī)性互聯(lián)網(wǎng)產(chǎn)品項目的開發(fā)流程應(yīng)包括：

制定MRD（Market Requirements Document），即市場需求文檔。獲得項目發(fā)起部門的認(rèn)同后，產(chǎn)品進入實施階段。MRD需包含市場與競爭對手分析、商業(yè)目的功能實現(xiàn)方式、功能優(yōu)先級等關(guān)鍵內(nèi)容。在此基礎(chǔ)上，UI設(shè)計師需與其他團隊成員緊密合作，共同推進項目的開發(fā)進程。在這個過程中，UI設(shè)計師不僅要關(guān)注設(shè)計本身，還要了解并熟悉產(chǎn)品開發(fā)的全流程，包括產(chǎn)品策劃、開發(fā)、測試等環(huán)節(jié)，以確保設(shè)計的實現(xiàn)與產(chǎn)品的順利推出。產(chǎn)品發(fā)展階段的多元產(chǎn)出與細(xì)化

一、思維圖與產(chǎn)出物概述

在實際工作中，產(chǎn)品開發(fā)的初始階段會產(chǎn)生一系列的產(chǎn)出物。這些可能包括但不限于使用Mind Manager等工具生成的思維圖，以及Excel的特征列表等。這些工具幫助我們梳理和規(guī)劃產(chǎn)品的方向，為后續(xù)的產(chǎn)品需求文檔（PRD）打下堅實基礎(chǔ)。

二、產(chǎn)品需求文檔（PRD）的精細(xì)化編寫

作為產(chǎn)品開發(fā)的核心環(huán)節(jié)，產(chǎn)品需求文檔（PRD）的編寫是PM（產(chǎn)品經(jīng)理）工作中最為重要的一部分。這份文檔不僅僅是對功能的描述，更包含了傳統(tǒng)意義上的需求分析，如UC（Use Case，用例）文檔的詳細(xì)撰寫。其中，每個用例都包含了簡述、行為者、前置條件、后置條件、UI描述以及流程細(xì)節(jié)，如子流程、分支流程等。還可能包含Visio制作的功能點業(yè)務(wù)流程界面的說明demo等。這些demo有時會使用dreamweaver、ps甚至簡單的畫圖板工具來制作，而在項目需求允許的情況下，可能會有UI/UE的支持，制作出高保真的demo以供開發(fā)團隊直接使用。

三、用戶分析報告的重要性

了解目標(biāo)用戶是產(chǎn)品成功的重要前提。搜集相關(guān)資料，分析目標(biāo)用戶的使用特征、情感、習(xí)慣、需求等，提出用戶研究報告和可用性設(shè)計建議，是產(chǎn)品發(fā)展的重要環(huán)節(jié)。在條件允許的情況下，更可以制定實景用戶分析，深入挖掘用戶的真實需求。

四、產(chǎn)品架構(gòu)設(shè)計的策略與方法

產(chǎn)品架構(gòu)設(shè)計是連接用戶需求與實際操作的關(guān)鍵橋梁。在了解用戶分析結(jié)果的基礎(chǔ)上，制定交互方式、操作與跳轉(zhuǎn)流程、結(jié)構(gòu)、布局、信息和其他元素。這是一個綜合了界面交互與流程設(shè)計的環(huán)節(jié)，為產(chǎn)品的整體架構(gòu)提供了設(shè)計藍(lán)圖。

五、產(chǎn)品原型設(shè)計的視覺呈現(xiàn)

產(chǎn)品原型設(shè)計是將頁面模塊、元素進行粗放式的排版和布局的過程。深入一些的設(shè)計還會加入一些交互性的元素，使設(shè)計更加具體、形象和生動。這一環(huán)節(jié)的設(shè)計對于產(chǎn)品的視覺呈現(xiàn)至關(guān)重要。

六、界面UI設(shè)計的核心要素

界面UI設(shè)計是圖形界面設(shè)計的重要環(huán)節(jié)。在這一環(huán)節(jié)中，設(shè)計師需要結(jié)合循環(huán)討論過的分析結(jié)果進行設(shè)計，同時注重色調(diào)、風(fēng)格、界面、窗口、圖標(biāo)、皮膚等關(guān)鍵要素的表現(xiàn)。只有結(jié)合用戶需求的分析結(jié)果進行設(shè)計，才能確保設(shè)計的有效性。

七、界面輸出與實現(xiàn)

界面輸出是頁面工程師與前端程序員的工作重點。他們將界面代碼化，使設(shè)計轉(zhuǎn)化為實際可操作的界面。這是連接設(shè)計與實際產(chǎn)品的關(guān)鍵環(huán)節(jié)。

八、用戶反饋的循環(huán)研究及完善調(diào)整

在產(chǎn)品開發(fā)過程中，不斷收集和分析使用者的報告是完善產(chǎn)品的關(guān)鍵。這包括多部門的共同參與，如可用性循環(huán)研究、用戶體驗回饋、測試回饋等。設(shè)計師應(yīng)根據(jù)反饋進行完善調(diào)整，持續(xù)改進產(chǎn)品以滿足用戶需求。改掉設(shè)計后不愿修改的習(xí)慣，保持產(chǎn)品的持續(xù)優(yōu)化。

通過上述八個環(huán)節(jié)的細(xì)致工作，我們可以確保產(chǎn)品從思維圖到最終輸出的每一階段都能得到精細(xì)化的管理和調(diào)整，從而打造出滿足用戶需求、具有良好用戶體驗的優(yōu)質(zhì)產(chǎn)品。UI設(shè)計的誤區(qū)與改進之道：從概念到用戶反饋的完整流程

一、UI設(shè)計的現(xiàn)狀與挑戰(zhàn)

如今，許多公司在產(chǎn)品界面設(shè)計環(huán)節(jié)，往往只提供一份沒有說明的VISO圖給UI設(shè)計師。這種情況容易讓設(shè)計師產(chǎn)生一種誤解，認(rèn)為他們只需要完成效果圖即可，無需關(guān)心其他環(huán)節(jié)。這導(dǎo)致在設(shè)計產(chǎn)品界面時，因信息掌握不足，設(shè)計出的界面往往依據(jù)個人喜好，缺乏市場競爭力。

二、UI設(shè)計師應(yīng)參與項目初期

為了改善這一現(xiàn)狀，我認(rèn)為UI設(shè)計師在項目初期就應(yīng)該積極參與。這包括深入了解項目的市場定位、盈利模式、競爭對手等關(guān)鍵信息。通過分析競爭對手的用戶界面，UI設(shè)計師可以獲得初步的圖形概念。參與用戶調(diào)研和用戶分析，能夠獲取用戶的特征、年齡、需求、喜好等關(guān)鍵信息，這些對于風(fēng)格定位和把握具有至關(guān)重要的作用。

三. UI設(shè)計師如何定位和設(shè)計產(chǎn)品

在了解產(chǎn)品架構(gòu)后，UI設(shè)計師應(yīng)明確什么功能應(yīng)該做，什么功能應(yīng)該突出。通過參與以上工作的制定，設(shè)計師能夠更準(zhǔn)確地把握產(chǎn)品的設(shè)計方向，對自己要設(shè)計的產(chǎn)品充滿信心。這不僅有助于設(shè)計出更符合市場需求的界面，還能提高設(shè)計效率。

四、后期調(diào)整與用戶反饋

在產(chǎn)品設(shè)計后期，UI設(shè)計師應(yīng)通過收集使用者報告、用戶反饋等信息，對界面進行調(diào)整。這是一個不可或缺的階段，有助于優(yōu)化產(chǎn)品體驗，提高用戶滿意度。通過不斷地調(diào)整和優(yōu)化，一個完善的產(chǎn)品才能面市。

五、超越個人喜好的產(chǎn)品設(shè)計

一個成功的產(chǎn)品設(shè)計，再也不是僅憑UI設(shè)計師個人喜好所設(shè)計出來的產(chǎn)品。通過遵循從項目初期參與、了解用戶需求、設(shè)計定位、后期調(diào)整到用戶反饋的完整流程，UI設(shè)計師能夠確保產(chǎn)品設(shè)計更加符合市場需求，更具競爭力。這不僅有助于提升UI設(shè)計師的價值，也有助于產(chǎn)品的成功推廣和市場接受度。

UI設(shè)計師需要擺脫只關(guān)注設(shè)計的誤區(qū)，積極參與到項目的各個環(huán)節(jié)中，從用戶的角度出發(fā)，設(shè)計出更符合市場需求的產(chǎn)品界面。