項目三

風(fēng)格定位教師：XXX班級：XXXUserInterfaceDesign

風(fēng)格定位的本質(zhì)就是設(shè)計一套有利于競爭的視覺形象。

在UI設(shè)計中，形成統(tǒng)一的設(shè)計風(fēng)格不僅能給用戶帶來良好的使用體驗，還有利于建立該產(chǎn)品的品牌形象。用戶可以通過統(tǒng)一的設(shè)計風(fēng)格加深對品牌的印象和認(rèn)同感，同時，統(tǒng)一的風(fēng)格定位能夠方便設(shè)計團(tuán)隊制定與產(chǎn)品相關(guān)的設(shè)計規(guī)范，減少因設(shè)計風(fēng)格不同而產(chǎn)生的溝通成本和修改成本，從而提高整體的工作效率。因此，掌握UI設(shè)計的風(fēng)格定位，是開發(fā)系列UI界面的首要工作，本項目將從UI設(shè)計風(fēng)格定位的步驟開始進(jìn)行詳細(xì)講解。項目導(dǎo)讀學(xué)習(xí)指南

學(xué)習(xí)指南學(xué)習(xí)目標(biāo)知識目標(biāo)技能目標(biāo)素質(zhì)目標(biāo)1.了解UI界面風(fēng)格定位的基本范疇。2.了解UI界面風(fēng)格定位的流程。1．能夠根據(jù)產(chǎn)品需求完成一款產(chǎn)品的風(fēng)格定位。2．掌握UI界面設(shè)計風(fēng)格定位的基本方法。挖掘?qū)W生積極探索、勇于創(chuàng)新的精神。知識鞏固基于一款自己喜歡的App，分析并思考其風(fēng)格定位，嘗試整理出該款A(yù)pp的基本色彩規(guī)范、文字規(guī)范和圖標(biāo)規(guī)范。3.1

需求分析和梳理開發(fā)一款產(chǎn)品，確定產(chǎn)品UI設(shè)計風(fēng)格定位，首先需要分析和梳理需求，包括梳理產(chǎn)品屬性、了解目標(biāo)用戶、競品分析3個方面。3.1.1

梳理產(chǎn)品屬性梳理產(chǎn)品屬性，確定產(chǎn)品定位，是確定UI設(shè)計風(fēng)格的關(guān)鍵?；ヂ?lián)網(wǎng)產(chǎn)品的屬性分類隨著人們需求的變化而不斷創(chuàng)新和變化，目前互聯(lián)網(wǎng)產(chǎn)品的屬性大致可分為五大類，分別是社交媒體類、電商類、內(nèi)容媒體類、工具和實用類、游戲娛樂類。（1）社交媒體類產(chǎn)品：這類產(chǎn)品側(cè)重于用戶之間的交流、分享和社交關(guān)系建立，提供內(nèi)容創(chuàng)作和社交互動的功能，如微信、QQ等應(yīng)用程序。其UI設(shè)計通常采用明亮、輕松和友好的色彩，注重用戶頭像、照片和個人資料的展示，以及易于分享、評論和點贊的界面設(shè)計。（2）電商類產(chǎn)品：這類產(chǎn)品提供在線購物和交易服務(wù)，用戶可以在平臺上購買商品和服務(wù)，并進(jìn)行支付和訂單管理等操作，如淘寶、京東、拼多多等。其UI設(shè)計通常采用清晰簡潔、直觀易用的設(shè)計風(fēng)格，重點展示商品圖片、價格和購買按鈕，提供多種篩選和排序功能，便于用戶瀏覽和購買。（3）內(nèi)容媒體類產(chǎn)品：這類產(chǎn)品提供各種形式的媒體內(nèi)容，如新聞、文章、視頻、音頻等，用于用戶獲取信息、娛樂和學(xué)習(xí)，如ZAKER、演示新聞、百家新聞。其UI設(shè)計根據(jù)不同類型的內(nèi)容，界面風(fēng)格可以多樣化，但通常注重內(nèi)容的呈現(xiàn)和分類，提供搜索、推薦和訂閱等功能，以及清晰的閱讀/觀看界面。（4）工具和實用類產(chǎn)品:這類產(chǎn)品提供各種實用工具和服務(wù)，幫助用戶提高工作效率、解決問題及獲取所需的解決方案，如美顏相機、WPS等。其UI設(shè)計通常采用簡約、整潔的設(shè)計，注重功能的可用性和操作的簡易性，提供直觀的操作界面和豐富的功能選項。（5）游戲娛樂類產(chǎn)品:這類產(chǎn)品提供多種娛樂和游戲體驗，包括電子游戲、在線游戲平臺、娛樂應(yīng)用程序等，如王者榮耀、第五人格等。其UI設(shè)計根據(jù)游戲類型的不同，界面風(fēng)格可以多樣化，通常注重游戲畫面、角色和操作控制的設(shè)計，以及簡潔的用戶界面和交互。3.1.2

了解目標(biāo)用戶

了解目標(biāo)用戶是UI設(shè)計中至關(guān)重要的一部分。為了實現(xiàn)設(shè)計的優(yōu)化和創(chuàng)新，UI設(shè)計師可以通過市場調(diào)研、用戶畫像、用戶測試、數(shù)據(jù)分析和競品分析等方法來了解目標(biāo)用戶。1．明確目標(biāo)用戶明確目標(biāo)用戶，即了解用戶群體的個性、氣質(zhì)、行為和習(xí)慣，通過研究和分析，挖掘出目標(biāo)用戶與產(chǎn)品可能存在的共性，為風(fēng)格定位奠定整體基調(diào)。例如，網(wǎng)易云音樂初期的定位是一群音樂發(fā)燒友，所以通過對用戶氣質(zhì)、行為的分析，定義了網(wǎng)易云音樂的主題基調(diào)為紅、黑的組合，如圖3-1所示。圖3-1

網(wǎng)易云音樂產(chǎn)品風(fēng)格基調(diào)2．建立用戶卡片明確目標(biāo)用戶群體，了解用戶需求后，綜合數(shù)據(jù)和信息采集，總結(jié)該用戶群體的核心特征和痛點，通過建立用戶卡片的形式，將目標(biāo)用戶形象化。用戶卡片的信息元素一般包含用戶基本信息（性別、年齡、職業(yè)、所在地）、用戶特征、需求場景/使用場景、關(guān)注因素、行為過程、滿意度等，如圖3-2所示。圖3-2

用戶卡片示例3．創(chuàng)建用戶體驗圖

用戶體驗旅程圖是一種可視化手段，在產(chǎn)品設(shè)計中扮演著重要角色。它通過發(fā)現(xiàn)用戶觸點、行為、痛點、爽點及內(nèi)心的想法，指導(dǎo)設(shè)計決策，以提升用戶滿意度。如圖3-3所示。圖3-3

途家App

用戶體驗地圖示例3.1.3

競品分析從UI設(shè)計的維度來看，競品分析是對競爭對手的產(chǎn)品進(jìn)行綜合評估和比較的過程。通過研究競爭對手的UI設(shè)計風(fēng)格、交互模式、色彩運用、排版布局等方面，UI設(shè)計師可以了解當(dāng)前市場上的最佳實踐和趨勢。色彩運用布局示例圖3-4

競品分析3.2

產(chǎn)品風(fēng)格創(chuàng)作產(chǎn)品風(fēng)格創(chuàng)作階段的工作量非常大，UI設(shè)計師需要先收集整理前期的用戶調(diào)研資料、競品分析資料、靈感資料和其他參考資料，確定基本設(shè)計基調(diào)，然后使用設(shè)計工具進(jìn)行初期設(shè)計，以探索不同的風(fēng)格方向和創(chuàng)意想法，并及時與團(tuán)隊和利益相關(guān)者進(jìn)行反饋，不斷地優(yōu)化、調(diào)整。圖3-5

新聞App首頁不同的界面風(fēng)格3.3

制定設(shè)計規(guī)范設(shè)計規(guī)范是產(chǎn)品風(fēng)格定位的基本輸出物。在確定好產(chǎn)品的設(shè)計方案后，UI設(shè)計師需要定義和整理產(chǎn)品的視覺設(shè)計，保持設(shè)計的統(tǒng)一性，方便設(shè)計團(tuán)隊根據(jù)設(shè)計規(guī)范輸出設(shè)計產(chǎn)物，減少后期的溝通成本，提高團(tuán)隊的工作效率。產(chǎn)品的視覺設(shè)計主要包括對色彩、文字、圖標(biāo)等進(jìn)行統(tǒng)一的梳理和規(guī)范。3.3.1

色彩規(guī)范色彩是設(shè)計語言中最重要的元素，UI界面的設(shè)計品質(zhì)感和風(fēng)格調(diào)性由色彩的運用和搭配來決定。在界面設(shè)計中，色彩的使用規(guī)范主要體現(xiàn)在品牌視覺、文本顏色、界面顏色（背景色、線框色）等，如圖3-6所示。圖3-6

色彩規(guī)范3.3.2

文字規(guī)范文字是UI設(shè)計的主題部分，是傳達(dá)信息最重要的視覺元素。文字的設(shè)計與形態(tài)在一定程度上會影響用戶瀏覽信息的體驗。同時，文字的風(fēng)格也會影響一個產(chǎn)品的調(diào)性。因此，在前期準(zhǔn)備工作中需要對文字的設(shè)計規(guī)范進(jìn)行梳理，下面從文字的類型和文字的規(guī)范兩個方面進(jìn)行講解。如圖3-7所示。圖3-7

字體規(guī)范3.3.3

圖標(biāo)規(guī)范圖標(biāo)是一種具有象征意義、標(biāo)識性質(zhì)的符號，是具有國際通用性的視覺語言。作為UI設(shè)計的一個重要的設(shè)計模塊，幾乎每個頁面都會使用到圖標(biāo)，因此在開發(fā)前需要對圖標(biāo)進(jìn)行規(guī)范定義，根據(jù)圖標(biāo)的用途，圖標(biāo)可以分應(yīng)用圖標(biāo)和功能圖標(biāo)。應(yīng)用圖標(biāo)是用于識別應(yīng)用程序的標(biāo)志，用戶可以根據(jù)應(yīng)用圖標(biāo)在應(yīng)用商店下載相應(yīng)的應(yīng)用程序。功能圖標(biāo)是在應(yīng)用程序界面中具有實際作用的標(biāo)志。規(guī)范中應(yīng)標(biāo)明圖標(biāo)的風(fēng)格、格式與使用方式，比如原生App，需要標(biāo)注圖標(biāo)導(dǎo)出格式與尺寸，如圖3-8所示。

圖3-8

圖標(biāo)規(guī)范3.4

制作獨立界面通過前期的用戶調(diào)研和風(fēng)格定位，整理設(shè)計規(guī)范，開始制作系列的頁面，輸出設(shè)計稿。UI設(shè)計