美圖欣賞pptx

1、Top導(dǎo)航欄功能區(qū) 騰訊產(chǎn)品一致性分析風(fēng)格一，內(nèi)容型：登錄注冊(cè)入口位置一律放置于TOP導(dǎo)航欄右側(cè)，字體大小較一致；功能區(qū)位于登錄入口右側(cè)，且多以文字鏈接呈現(xiàn)其功能。功能入口均以文字鏈接的形式展現(xiàn)。信息量小，著重體現(xiàn)信息重點(diǎn)。均不存在第三方賬號(hào)登錄。登錄入口文字多為“登錄”，歡迎詞多為“您好，請(qǐng)”。TOP導(dǎo)航欄內(nèi)容構(gòu)成多為“登錄入口”+“功能”，區(qū)域劃分簡(jiǎn)潔清晰。歡迎詞均位于登錄入口前方。TOP導(dǎo)航欄一律不體現(xiàn)注冊(cè)鏈接，而將“注冊(cè)”移到登錄頁面，將主要任務(wù)流放置于“登錄”上。范圍層：內(nèi)容層：框架層：流程層：視覺層：風(fēng)格二，社交型：騰訊相關(guān)社交型WEB產(chǎn)品TOP導(dǎo)航欄均以LOGO放置于TOP導(dǎo)航欄

2、左側(cè)，個(gè)人中心放置于右側(cè)，中間擺放分區(qū)入口。均以搜索功能為視覺突出功能，輸入框中以灰色字體寫出用戶提示。范圍層：內(nèi)容層：框架層：流程層：視覺層：均以淺漸變或純色色塊為背景底色，以紅色小色塊作為用戶提醒。均存在圖標(biāo)、文字兩種表現(xiàn)形式交替出現(xiàn)。未登錄前無法進(jìn)入社交型產(chǎn)品主頁面，登錄后產(chǎn)品個(gè)人中心入口為文字鏈接，鏈接文字為用戶的用戶名。TOP導(dǎo)航欄范圍層構(gòu)成多為“LOGO”+“分區(qū)入口”+“搜索”+“個(gè)人中心入口”+“功能區(qū)”。分區(qū)中均帶有應(yīng)用區(qū)。將TOP導(dǎo)航欄作為社交型產(chǎn)品的功能中心，整個(gè)產(chǎn)品的內(nèi)容均可以由此到達(dá)。二WEB登錄頁 騰訊產(chǎn)品一致性分析：騰訊產(chǎn)品登錄頁功能一致，均存在”賬號(hào)密碼輸入框“

3、、”登錄按鈕“、”找回密碼鏈接“、”注冊(cè)鏈接”。在登錄頁面下部均有產(chǎn)品相關(guān)描述。在登錄頁面信息輸入框中均有輸入信息提示，如“支持QQ號(hào)”，“輸入密碼”等。騰訊Web產(chǎn)品登錄頁多為獨(dú)立登錄頁。背景多為圖片，左邊區(qū)域?yàn)檎故緟^(qū)，右邊區(qū)域?yàn)榻换^(qū)。輸入框大小多為290px*40px。左上角均為產(chǎn)品LOGO。登錄按鈕下均以文字鏈接為展現(xiàn)形式的功能入口。QQ賬號(hào)體系貫穿騰訊全部產(chǎn)品。自動(dòng)檢索本機(jī)已經(jīng)登錄的賬號(hào)信息，在用戶登錄其他產(chǎn)品時(shí)，給予用戶一個(gè)快速登錄通道，減少操作步驟。登錄按鈕均為圓角矩形，填充凸顯色。注冊(cè)入口均以文字鏈接形式展現(xiàn)。注冊(cè)入口視覺比重均比登錄按鈕低。登錄方式切換表現(xiàn)形式多為TAB條。（

4、詳見視覺趨勢(shì)分析）范圍層：內(nèi)容層：框架層：流程層：視覺層：三 Web注冊(cè)頁四騰訊產(chǎn)品一致性分析：注冊(cè)頁面內(nèi)容簡(jiǎn)潔清晰，用戶識(shí)別程度高。頁面內(nèi)容包含”用戶信息填寫“，注冊(cè)按鈕”，“注冊(cè)方式切換”，“小范圍推廣信息區(qū)域”四部分。注冊(cè)頁面信息量小，突出主要注冊(cè)內(nèi)容。注冊(cè)方式切換按鈕下具有簡(jiǎn)潔的注冊(cè)方式說明，給予用戶不同注冊(cè)方式的信息。注冊(cè)頁面主交互區(qū)域均位于頁面中央。輸入框大小為300px*33px。注冊(cè)頁面說明警示文字均位于輸入框右側(cè)。騰訊相關(guān)產(chǎn)品均以自身QQ賬號(hào)為用戶登錄賬號(hào)，用戶使用騰訊大部分產(chǎn)品注冊(cè)時(shí)均轉(zhuǎn)到QQ賬號(hào)注冊(cè)流程。只有少數(shù)社交或信用類產(chǎn)品并不直接使用QQ賬號(hào)注冊(cè)流程，而更注重于賬號(hào)

5、的安全性以及個(gè)人信息的完整性。但注冊(cè)后均生成QQ號(hào)，可以以此QQ賬號(hào)使用其他騰訊產(chǎn)品。頁面整體為簡(jiǎn)潔風(fēng)格，信息量小。按鈕以及輸入框造型均以圓角矩形。注冊(cè)按鈕上文字均為“立即注冊(cè)”。統(tǒng)一以紅色為警告色警告用戶出現(xiàn)錯(cuò)誤。 范圍層：內(nèi)容層：框架層：流程層：視覺層： Web用戶中心五騰訊產(chǎn)品一致性分析：騰訊產(chǎn)品用戶中心均具有用戶頭像以及用戶相關(guān)操作，將用戶所需的產(chǎn)品功能統(tǒng)一整合進(jìn)個(gè)人中心，使用戶在個(gè)人中心即可完成所有操作。個(gè)人中心相關(guān)操作排列均為列表。用戶中心列表多以左側(cè)圖標(biāo)右側(cè)文字的形式展現(xiàn)。騰訊相關(guān)產(chǎn)品在用戶中心中將用戶頭像、信息與相關(guān)用戶操作緊密結(jié)合，形成一列固定組合區(qū)塊（如圖紅色虛線框所示）用

6、戶頭像在上，相關(guān)操作列表在下。個(gè)人中心主要個(gè)人信息，交互區(qū)塊多展現(xiàn)在個(gè)人中心頁面左側(cè)。騰訊產(chǎn)品在用戶中心中皆以白色為頁面主背景色，大多頁面相關(guān)元素均以簡(jiǎn)潔的設(shè)計(jì)語言體現(xiàn)。除去用戶自定義的圖片信息外（如：用戶自定義頭像）。無多色系融合，均以單色系完成頁面設(shè)計(jì)。視覺設(shè)計(jì)重心清晰，均為個(gè)人相關(guān)信息。 范圍層：內(nèi)容層：框架層：視覺層： 騰訊產(chǎn)品一致性分析風(fēng)格一：簡(jiǎn)潔風(fēng)格范圍層：內(nèi)容層：框架層：視覺層：安卓客戶端Loading頁以“色塊背景”+“LOGO”+“標(biāo)語”+“簡(jiǎn)短產(chǎn)品敘述”的簡(jiǎn)潔風(fēng)格，突出產(chǎn)品品牌感，提產(chǎn)品品牌意識(shí)。LOADING頁面中多不存在產(chǎn)品讀取進(jìn)度條。Loading頁以簡(jiǎn)潔為主，單色的

7、背景圖來凸顯LOGO。標(biāo)顯品牌意識(shí)。LOADING頁面與風(fēng)格一種均保持了相似的框架性，將“LOGO”與“產(chǎn)品名稱”，“文字描述”放置于頁面中?！癓OGO”與“產(chǎn)品名稱”所占區(qū)域約為頁面中央350px*460px。輕量化的視覺效果，由(去掉)淺漸變的背景（簡(jiǎn)約的背景，通過淺漸變來凸顯產(chǎn)品質(zhì)感。），更好的突出了畫面中央的產(chǎn)品圖標(biāo)。中央圖標(biāo)與文字簡(jiǎn)潔明快，對(duì)于樹立品牌具有良好效果 。以大幅圖畫為背景，配合品牌文字宣傳，傳達(dá)出情感化的產(chǎn)品設(shè)計(jì)思路。以寫實(shí)圖片為主，內(nèi)容質(zhì)感、色彩相對(duì)豐富。封面背景采用全版面插圖的形式呈現(xiàn)。良好的情感化宣傳理念，讓用戶知道騰訊在這里做的不是產(chǎn)品，是情感。風(fēng)格二：寫實(shí)風(fēng)格范

8、圍層：內(nèi)容層：框架層：視覺層：安卓客戶端LOADING頁十二 安卓客戶端用戶引導(dǎo)頁頁面內(nèi)容統(tǒng)一為（去掉）上部擺放“宣傳畫”+“簡(jiǎn)短文字描述”，下部擺放頁面指示器。騰訊引導(dǎo)頁內(nèi)容表現(xiàn)形式中多使用了（了去掉）情感化的敘事手段，言之有物，將產(chǎn)品更新特點(diǎn)揉入日常用戶的使用情境中。頁面內(nèi)框架擺放均以宣傳畫為最優(yōu)先，占據(jù)頁面面積四分之三以上，其下（去掉，改宣傳畫下方）放置簡(jiǎn)短文字說明。于（去掉）頁面底端擺放頁面指示器，不搶占用戶注意力但卻（去掉）易于找到，且固定位于頁面下方50px高度的區(qū)域內(nèi)。騰訊用戶引導(dǎo)頁于軟件初始安裝后（添加）顯示，用戶引導(dǎo)頁2-7頁不等，最后一頁統(tǒng)一點(diǎn)擊進(jìn)入。騰訊產(chǎn)品引導(dǎo)頁多以整色

9、塊或淺漸變?yōu)楸尘埃谥胁考尤胄麄鳟嬘靡员憩F(xiàn)新產(chǎn)品的內(nèi)容。十三范圍層：內(nèi)容層：框架層：流程層：視覺層：騰訊產(chǎn)品一致性分析：安卓客戶端登錄頁 騰訊產(chǎn)品一致性分析：騰訊客戶端產(chǎn)品登錄界面內(nèi)容簡(jiǎn)約，信息量少并突出“登錄”這一主要功能，僅社交類客戶端登錄頁面具有注冊(cè)入口。按鈕文字均為“登錄”。輸入框中均以灰色字體告知用戶填寫內(nèi)容，文字內(nèi)容均為“QQ號(hào)”，“密碼”。登錄頁面輸入框大多為490px*60px左右，保持較高的一致性。登錄按鈕寬度多與信息輸入框相同。登錄流程統(tǒng)一、簡(jiǎn)單（去掉）。均為“輸入QQ號(hào)碼”與“密碼登錄”。僅少部分產(chǎn)品需要通過QQ賬號(hào)激活使用。騰訊產(chǎn)品均以QQ號(hào)為賬號(hào)體系。相關(guān)視覺元素具有

10、一致性（視覺上具有較高一致性），輸入框、按鈕均為圓角矩形。登錄按鈕均以突出色填充。注冊(cè)入口均以按鈕形式展現(xiàn)。 范圍層：內(nèi)容層：框架層：流程層：視覺層： 十四 騰訊系列產(chǎn)品在客戶端中較少出現(xiàn)“注冊(cè)”功能，僅在幾個(gè)（去掉）社交類產(chǎn)品應(yīng)用中出現(xiàn)。注冊(cè)頁面內(nèi)容大致相同，均存在“手機(jī)號(hào)所在地選擇”、“手機(jī)號(hào)輸入”、“返回”、“確認(rèn)用戶協(xié)議”與“下一步” 。于（去掉）輸入框中均有文字提示用戶“請(qǐng)輸入手機(jī)號(hào)碼”。注冊(cè)頁面呈現(xiàn)形式固定，均為獨(dú)立彈出頁。信息輸入框?qū)挾认嗨凭鶠?90PX左右，而單輸入框高度為61PX。騰訊產(chǎn)品注冊(cè)流程均分為三部分，“輸入信息”，“輸入密碼”，“驗(yàn)證完成”。QQ賬號(hào)可使用客戶端直接

11、注冊(cè)。視覺上注冊(cè)頁面簡(jiǎn)潔明了，視覺信息少。界面均以簡(jiǎn)潔為主旨（去掉）。注冊(cè)按鈕均以頁面凸顯色填充。安卓客戶端注冊(cè)頁騰訊產(chǎn)品一致性分析：范圍層：內(nèi)容層：框架層：流程層：視覺層：十五 安卓客戶端首頁均在上部狀態(tài)欄中央放置“當(dāng)前頁面”，并且騰訊產(chǎn)品狀態(tài)欄高度保持相對(duì)一致，狀態(tài)欄中央具有當(dāng)前頁面描述，文字識(shí)別性強(qiáng)。（如圖所示）下部具有TAB條，均為功能區(qū)塊切換（描述有錯(cuò)。），多放置4個(gè)按鈕。標(biāo)題欄文字均以系統(tǒng)字體顯示，大小相近。下部TAB條上按鈕均以“上部圖標(biāo)”+“下部文字”的方式表現(xiàn)。上部狀態(tài)欄高度為66px。下部TAB條高度約為73px，而其中圖標(biāo)與文字高度約為65px*65px，圖標(biāo)大小約為47

12、px*47px。其底部文字與頁面底端間距數(shù)據(jù)多為10px與2px兩種。客戶端內(nèi)部均以“紅色圓框”+“白色文字”為警示標(biāo)志。 TAB條狀態(tài)顯示統(tǒng)一，均以圖表填充顏色該表為激活標(biāo)識(shí)。TAB條圖標(biāo)設(shè)計(jì)風(fēng)格統(tǒng)一均為單色填充，剪影風(fēng)格。 TAB圖標(biāo)設(shè)計(jì)方式統(tǒng)一，上部圖標(biāo)+下部文字。 安卓客戶端首頁騰訊產(chǎn)品一致性分析：范圍層：內(nèi)容層：框架層：視覺層：十六 安卓客戶端二級(jí)頁面騰訊產(chǎn)品一致性分析：騰訊產(chǎn)品在二級(jí)界面中無明顯LOGO元素，標(biāo)題欄左側(cè)統(tǒng)一具有“返回”按鈕，而右側(cè)是產(chǎn)品功能區(qū)，不同產(chǎn)品形態(tài)功能不同。標(biāo)題欄中央均以系統(tǒng)文字字體（去掉）標(biāo)識(shí)當(dāng)前頁面。左側(cè)返回按鈕上文字多為“返回”。二級(jí)頁面中均不存在產(chǎn)品

13、LOGO。二級(jí)頁面上部（去掉）狀態(tài)欄高度均為66px。視覺上以簡(jiǎn)潔為主。標(biāo)題欄沒有太多視覺元素，將用戶視覺中心讓給二級(jí)界面中的產(chǎn)品內(nèi)容。（問下喵喵表述）標(biāo)題欄左側(cè)“返回按鈕”外形多以左側(cè)為（去掉）箭頭的圓角矩形（ ），而右側(cè)功能區(qū)大多外形為圓角矩形（ ）。標(biāo)題欄均以淺漸變或純色塊填充。范圍層：內(nèi)容層：框架層：視覺層：十七 安卓客戶端個(gè)人中心騰訊產(chǎn)品一致性分析：個(gè)人中心上部擺放用戶相關(guān)信息，如：“頭像名稱”，下部則為用戶相關(guān)信息總匯與操作列表，在大框架上保持一致性。工具類應(yīng)用列表高度多為56px左右。列表設(shè)計(jì)風(fēng)格均為純文字風(fēng)格。在頁面下部?jī)?nèi)容列表中，均以”表示可以點(diǎn)擊并有下層界面。產(chǎn)品均以淺色系

14、填充一應(yīng)視覺元素，突出了頁面中的重點(diǎn)元素。范圍層：框架層內(nèi)容層：視覺層：十八騰訊每個(gè)登錄框中都有“提示性語句”。騰訊“賬號(hào)”、“密碼”、“登錄”、“注冊(cè)”術(shù)語大多數(shù)用“QQ賬號(hào)”、“QQ密碼”、“登錄”、“注冊(cè)”。 騰訊IOS產(chǎn)品登錄頁輸入框大小多為578px*176px，圓角大小為10px。登錄按鈕多與輸入框同寬，且圓角數(shù)值相同。騰訊框架左右兩邊留一定的空隙，保持居中狀態(tài)。登錄框都選用圓角矩形，圓角像素保持10像素。騰訊保持在登錄頁面只有一個(gè)強(qiáng)調(diào)色，提示用戶這個(gè)頁面的關(guān)注點(diǎn)，引導(dǎo)用戶進(jìn)行下一步操作?！暗卿洝卑粹o統(tǒng)一用強(qiáng)調(diào)色填充。提示性話語采用弱色弱化。登錄框背景色統(tǒng)一用白色。登錄框都選用圓角

15、矩形，圓角像素保持10像素。詳情參照視覺趨勢(shì)分析范圍層：內(nèi)容層：框架層：流程層：視覺層：騰訊產(chǎn)品一致性分析：騰訊統(tǒng)一有“登錄”、“返回”功能，社交型產(chǎn)品（如微博、朋友網(wǎng)等）才有“注冊(cè)”功能。IOS登錄頁六 風(fēng)格二背景圖以寫實(shí)、插畫效果為主，文字無統(tǒng)一規(guī)范。封面背景采用全版面插圖的形式呈現(xiàn)。風(fēng)格二的以全版面寫實(shí)、插畫內(nèi)容為主，圖形質(zhì)感、顏色比較豐富。詳情參照視覺趨勢(shì)分析背景與LOGO形成鮮明的對(duì)比，突出品牌感。騰訊產(chǎn)品一致性分析：風(fēng)格一：范圍層：內(nèi)容層：框架層：視覺層：封面背景采用單色，由上到下的內(nèi)容依次是“LOGO”、“產(chǎn)品名稱”、“標(biāo)語”、（版權(quán)）。大部分騰訊產(chǎn)品LOGO都擺放在視覺焦點(diǎn)的中

16、心。據(jù)頁面頂端220px出擺放封面內(nèi)容（LOGO圖標(biāo)框架大小約固定為270px*270px，其下為產(chǎn)品文字與簡(jiǎn)短文字介紹，框架大小約為270px*180px），在頁面下方（位于頁面底端框架約為525px*44px）擺放版權(quán)。風(fēng)格二：范圍層：內(nèi)容層：框架層：視覺層：風(fēng)格一以簡(jiǎn)潔為主，單色的背景圖來凸顯LOGO，標(biāo)顯品牌意識(shí)。風(fēng)格二以全版面框架為主，“Logo”、“文字”擺放隨意。IOS Loading頁七 騰訊產(chǎn)品一致性分析：騰訊產(chǎn)品用戶引導(dǎo)頁上部分統(tǒng)一“色塊背景”+“中央圖片”+“簡(jiǎn)短產(chǎn)品敘述”。下部分統(tǒng)一以頁面指示器引導(dǎo)用戶，在用戶引導(dǎo)頁的最后一頁統(tǒng)一為“立即開啟”&“立即體驗(yàn)”。騰訊產(chǎn)品多

17、以情感性引導(dǎo)為主，讓用戶置身在新功能的情境中。來體現(xiàn)產(chǎn)品人性化，可以為用戶提供更多他在生活中能用到的功能，達(dá)到的宣傳效果比功能性引導(dǎo)更強(qiáng)。圖片區(qū)域約為540px*770px、頁面指示器則位于頁面下方中央50px以內(nèi)。騰訊用戶引導(dǎo)頁于軟件初始安裝顯示，用戶引導(dǎo)頁2-7頁不等，最后一頁統(tǒng)一點(diǎn)擊進(jìn)入。用戶引導(dǎo)頁采用統(tǒng)一簡(jiǎn)潔背景來凸顯主題。情感性視覺傳遞給予用戶全新的視覺體驗(yàn)。詳情參照視覺趨勢(shì)分析范圍層：內(nèi)容層：框架層：流程層：視覺層：IOS用戶引導(dǎo)頁八 騰訊在視覺上質(zhì)感和造型從整體上保持較高的一致性，在上面都有標(biāo)題欄，標(biāo)題欄中間都有所處的標(biāo)題。下面是TAB條。TAB條根據(jù)產(chǎn)品形態(tài)不同有些許差異。騰訊

18、產(chǎn)品一致性分析：狀態(tài)欄均以淺漸變矩形色塊構(gòu)成（除朋友網(wǎng)外）用戶視覺一致感強(qiáng)。中間文字均為標(biāo)題文字，具有較強(qiáng)的一致性。TAB條按鈕激活狀態(tài)均圖標(biāo)填充色，以區(qū)塊體現(xiàn)。TAB條圖標(biāo)多以2D質(zhì)感為主。（詳見視覺趨勢(shì)分析）范圍層：內(nèi)容層：框架層：流程層：視覺層：騰訊大多數(shù)產(chǎn)品標(biāo)題欄與狀態(tài)欄高度統(tǒng)一。標(biāo)題欄高度統(tǒng)一90px。TAB條高度不同風(fēng)格存在些許差異。TAB條高度保持在100px，圖標(biāo)與文字高度為78px，圖標(biāo)大小約為53px*53px，而其圖標(biāo)文字距離頁面底端距離約為7px10px。騰訊大多數(shù)產(chǎn)品在標(biāo)題欄中間都會(huì)顯示當(dāng)前位置或產(chǎn)品名稱。TAB條頻道內(nèi)容均以圖標(biāo)+文字的方式呈現(xiàn)。流程保持相對(duì)一致。Loading頁完即進(jìn)入首頁。IOS首頁九 騰訊二級(jí)頁面多以內(nèi)容展示為主，大多數(shù)產(chǎn)品取消TAB條。標(biāo)題欄均以中間顯示當(dāng)前位置，左邊返回按鈕，右邊功能區(qū)。騰訊產(chǎn)品一致性分析：標(biāo)題欄及TAB條在視覺元素上，存在較強(qiáng)的一致性，如返回。大部分返回元素都是 ，2D質(zhì)感。標(biāo)題欄多以“藍(lán)、黑、灰”漸變色呈現(xiàn) ，標(biāo)題字體多以黑白形成對(duì)比色。詳情參照視覺趨勢(shì)分析范圍層：內(nèi)容層：框架層：流程層：視覺層：標(biāo)題欄均以中間當(dāng)前位置，均以白、黑字體與背景形成對(duì)比色呈現(xiàn)。騰訊大多數(shù)產(chǎn)品標(biāo)題欄與狀態(tài)欄高度統(tǒng)一。標(biāo)題欄高度均為85-9