中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

編輯導(dǎo)讀：在搜索信息的時(shí)候，很多用戶都會(huì)用手機(jī)自帶的瀏覽器。人是視覺動(dòng)物，瀏覽器的頁面設(shè)計(jì)美觀與否直接影響到用戶體驗(yàn)。本文以 vivo海外瀏覽器為例，分析如何做到視覺煥新，希望對(duì)你有幫助。

今天給大家分享海外瀏覽器視覺風(fēng)格升級(jí)的案例，希望可以把整個(gè)產(chǎn)品改版過程中的沉淀以及總結(jié)經(jīng)驗(yàn)分享給大家。

整個(gè)項(xiàng)目從19年6月開始，從設(shè)計(jì)提案到完整方案落地上線持續(xù)了5個(gè)月。前3個(gè)月從【方案探索】到【方案定稿】進(jìn)行了多維度的嘗試，后續(xù)2個(gè)月從【開發(fā)落地】到【數(shù)據(jù)驗(yàn)證】，針對(duì)不同變量的數(shù)據(jù)結(jié)論，進(jìn)行設(shè)計(jì)微調(diào)整，以達(dá)成【正式上線】標(biāo)準(zhǔn)。

接下來，先從背景部分給大家介紹下整個(gè)項(xiàng)目背景。

一、背景部分

外銷瀏覽器整體視覺樣式過于陳舊、以及體驗(yàn)方面存在很多問題、品牌屬性較弱、缺乏一定的品牌認(rèn)知、用戶在使用體驗(yàn)上存在痛點(diǎn)等。

因此需要進(jìn)行全面的體驗(yàn)優(yōu)化升級(jí)，改善當(dāng)前存在問題，以及提升品牌屬性，增強(qiáng)品牌一致性。給用戶提供良好的使用體驗(yàn)，能更好的使用我們的產(chǎn)品。

1. 主視覺樣式同海外主流產(chǎn)品對(duì)比

以下是海外瀏覽器線上效果，以及對(duì)比海外市場(chǎng)的Google系、Chrome產(chǎn)品視覺效果，海外主流產(chǎn)品的視覺風(fēng)格更輕量化，簡潔，把視覺聚焦點(diǎn)放在產(chǎn)品內(nèi)容上，因此我們的產(chǎn)品在視覺上有很大的優(yōu)化空間（關(guān)于海外用戶對(duì)APP風(fēng)格傾向的用研結(jié)論顯示，海外用戶更傾向于Chrome及谷歌系產(chǎn)品風(fēng)格）。

2. 可用性問題梳理

本次體驗(yàn)優(yōu)化，在重新定義視覺風(fēng)格的基礎(chǔ)上，可同步解決目前存在的體驗(yàn)問題。因此和產(chǎn)品運(yùn)營同學(xué)同步優(yōu)化建議，以及提取可用性測(cè)試問題。

經(jīng)過討論并達(dá)成一致，整理待解決問題圖下：

3. 交互及UI整理待改進(jìn)問題

在梳理完成可用性問題后，設(shè)計(jì)側(cè)進(jìn)行了體驗(yàn)問題走查工作，梳理體驗(yàn)上存在的待改進(jìn)問題點(diǎn)，對(duì)問題進(jìn)行篩選及整理，梳理出目前待解決的體驗(yàn)問題如下，后續(xù)視覺風(fēng)格定義過程中，會(huì)同步解決對(duì)應(yīng)問題。

二、競(jìng)品風(fēng)格梳理

1. Google

整體視覺風(fēng)格清爽，干凈，沒有過多的裝飾，善于運(yùn)用輕量化卡片，整合信息，少量使用微漸變區(qū)分不同信息。

整體品牌色使用較謹(jǐn)慎，避免過度使用品牌色，保持整體性及簡約印象。

icon風(fēng)格保留棱角，有質(zhì)感，整體感更強(qiáng)。

2. Chrome

內(nèi)容版式布局上較舒適，沒有擁擠感，層級(jí)清晰，閱讀體驗(yàn)好。

3. YouTube

YouTube采用沉浸式，內(nèi)容呈現(xiàn)清晰，視頻封面/icon元素/模塊間空間，整體比例較大，區(qū)別于國內(nèi)APP，單屏可展示內(nèi)容相對(duì)會(huì)減少，但足夠清晰，保留了呼吸感。

綜上，目前海外主流競(jìng)品均采用簡潔留白，保持視覺清晰，慎重使用品牌色，避免主色過度使用，將視覺重心聚焦在內(nèi)容上，icon風(fēng)格為棱角切面。整體視覺風(fēng)格和產(chǎn)品提議及用戶期望的風(fēng)格方向一致，也便于我們后續(xù)確定視覺風(fēng)格方向。

三、風(fēng)格提煉

基于調(diào)研用戶期望的風(fēng)格方向，以及產(chǎn)品提議的視覺風(fēng)格定位均傾向于谷歌系等海外產(chǎn)品風(fēng)格。因此視覺設(shè)計(jì)前期進(jìn)行了相關(guān)的競(jìng)品風(fēng)格梳理整理，提煉主流競(jìng)品風(fēng)格如下：保持簡潔清爽，輕量化，品牌化，層級(jí)清晰，保留呼吸空間。

icon風(fēng)格棱角切面處理：

品牌主色&輔色定義：

1. 線上品牌色使用效果

整體視覺感受，主色飽和度過高，在白色區(qū)域及模塊，視覺對(duì)比過高亮，會(huì)有刺眼的感受，閱讀使用體驗(yàn)效果不佳。

2. 海外產(chǎn)商競(jìng)品品牌色

小米，oppo，三星整體品牌色彩傾向藍(lán)色及同色系。三星，oppo品牌色使用整體性更好，在產(chǎn)品設(shè)計(jì)中品牌主色使用相對(duì)克制。

3. 產(chǎn)品設(shè)計(jì)中品牌主色使用定位

• 傳遞信息：界面清晰，明確的層級(jí)關(guān)系，高效舒適的閱讀體驗(yàn)
• 引導(dǎo)操作：清晰合理的操作引導(dǎo)
• 品牌價(jià)值：品牌一致性，品牌歸屬

4. 主色定義

基于項(xiàng)目組決策產(chǎn)品定位延續(xù)不變的背景下，本次主色定義過程中延續(xù)使用舊版本中產(chǎn)品定位，即提供穩(wěn)定，安全，快速的信息獲取服務(wù)。

從這三種主要情感要素進(jìn)行色彩探索及提煉。

色彩不只是一種視覺語言，它更是傳播情感的途徑。根據(jù)對(duì)產(chǎn)品定位的細(xì)分拆解，結(jié)合產(chǎn)品的感知路徑，從品牌及體驗(yàn)緯度提煉產(chǎn)品可傳遞的情感基因。

結(jié)合產(chǎn)品定位相關(guān)的核心關(guān)鍵詞，聯(lián)想接近定位的品牌主色，同時(shí)可覆蓋到產(chǎn)品定位的顏色為藍(lán)色，能夠表達(dá)穩(wěn)定，安全，快速，同時(shí)有科技色彩。

品牌色優(yōu)化方向往簡潔，干練，富有科技感的方向貼近，因此選擇方案3為主色方向。同時(shí)定義中性色色彩層級(jí)，便于指導(dǎo)后續(xù)產(chǎn)品設(shè)計(jì)。

5. 品牌延展覆蓋場(chǎng)景

6. 同色系輔色延展定義

同色系是指在色環(huán)上相距不超過45度的兩種顏色，在主色的同色系范圍內(nèi)，我們可以選擇主色的同色系范圍內(nèi)的顏色來豐富產(chǎn)品配色，可以選出同色系顏色作為延展色使用。

四、設(shè)計(jì)單元

1. 設(shè)計(jì)語言概述

結(jié)合產(chǎn)品風(fēng)格定位，視覺語言使用柔和圓角為基礎(chǔ)。

圓角風(fēng)格更接近目前主流視覺風(fēng)格，圓角的包容性更強(qiáng)，復(fù)用場(chǎng)景豐富，更容易達(dá)成統(tǒng)一性。同時(shí)延續(xù)外銷“地球”的視覺符號(hào)，綜上，整體搜索、名站、卡片、以及btn、均采用圓角為基礎(chǔ)進(jìn)行統(tǒng)一設(shè)計(jì)。

2. 信息認(rèn)知簡化

我們希望用戶更專注于內(nèi)容，因此對(duì)承載內(nèi)容的容器、卡片信息的構(gòu)成及樣式進(jìn)行了簡化設(shè)計(jì)。

采用卡片的形式，卡片可以較好的聚合信息，使信息流內(nèi)信息展示更清晰。

卡片結(jié)構(gòu)上，本次采用更清晰的大圖樣式，閱讀清晰可見，文字信息部分，允許展示更多文案，以解決用戶看不全標(biāo)題文案的痛點(diǎn)。

3. 整體視覺感知全面優(yōu)化（卡片信息與背景的關(guān)系）

當(dāng)一部分元素處在明確的邊界區(qū)域內(nèi)，則用戶感知這些元素是一個(gè)整體，聚合在一起。

為使整體視覺風(fēng)格輕量化，背景底色不宜過重，達(dá)到卡片聚合的目的，對(duì)卡片進(jìn)行統(tǒng)一的0.5px的淺描邊，達(dá)到明確邊界的同時(shí)，不過度表現(xiàn)，與背景產(chǎn)生過強(qiáng)的分割感，使整個(gè)卡片與背景有即清晰又相對(duì)統(tǒng)一的視覺效果。

4. 天氣模塊全新icon

天氣模塊延續(xù)簡化處理的方式。

和舊版本中，面性的，多色的icon相比，更清晰，安靜。不過度搶掉頭部模塊視覺吸引，可以滿足用戶對(duì)天氣信息使用的功能。

5. 強(qiáng)化搜索核心功能

搜索框采用大圓角的風(fēng)格，和舊版相比提高了搜索框的高度，樣式更飽滿。當(dāng)用戶進(jìn)入主頁，能夠提升對(duì)核心的搜索功能的聚焦。

為了更好地和整體視覺風(fēng)格相融合，以及凸顯搜索區(qū)域，采用弱陰影進(jìn)行輔助，使整體視覺風(fēng)格趨于統(tǒng)一。

6. 搜索落地頁

搜索落地頁采用和主頁一致的背景。icon風(fēng)格延續(xù)采用6px描邊，棱角切面的風(fēng)格樣式。信息排布方面，保留足夠的間距，提升品質(zhì)以及清晰的閱讀體驗(yàn)。

7. 信息流置頂

信息流置頂，聚焦搜索模塊，弱化色塊以及裝飾，加載刷新提示信息樣式進(jìn)行風(fēng)格優(yōu)化，與整體視覺語言達(dá)成一致。

8. icon風(fēng)格重新定義

icon風(fēng)格進(jìn)行了降噪處理，依據(jù)我們前面明確的icon風(fēng)格定位，延續(xù)棱角切面，線條明朗，概括，結(jié)合整體視覺風(fēng)格，更具有質(zhì)感。

9. 名站icon優(yōu)化

名站icon采用25px小圓角，達(dá)成與兩邊垂直相切的狀態(tài)，當(dāng)陣列排布時(shí)，整體性更強(qiáng)。

10. 品牌一致性（菜單頁）

菜單內(nèi)第一層級(jí)icon使用品牌輔助色，避免像市場(chǎng)上競(jìng)品使用與品牌色無相關(guān)的五彩色。使用輔色可以增強(qiáng)品牌的一致性以及特有的品牌認(rèn)知，區(qū)別與競(jìng)品的彩色化。使整個(gè)產(chǎn)品的用色更有依據(jù)，逐漸給用戶記憶點(diǎn)。

11. 情感化設(shè)計(jì)（信息流loading）

在loading區(qū)域，可以在保持風(fēng)格一致的前提下，進(jìn)行個(gè)性化設(shè)計(jì)。結(jié)合印度網(wǎng)絡(luò)環(huán)境不穩(wěn)定的背景，將tab下頻道符號(hào)化處理，聯(lián)系起來進(jìn)行連播式設(shè)計(jì)，傳達(dá)產(chǎn)品的內(nèi)容及特性。

在情感化方面，當(dāng)網(wǎng)絡(luò)情況不好的場(chǎng)景下，可能給用戶小驚喜。

下拉刷新最先展示品牌符號(hào)（地球元素），在連播過程中，依次展示視頻，資訊，圖片，游戲娛樂等類目符號(hào)，采用路徑追蹤的形式有效銜接起來五個(gè)符號(hào)。

12. 跟進(jìn)行業(yè)主流趨勢(shì)（ Dark Mode，2019年11月已上線）

用戶使用暗黑模式的場(chǎng)景很多，第一種是在暗光環(huán)境下可減少視覺疲勞，另外在白天很多用戶也會(huì)長期打開深色模式。

這意味著在暗黑模式下首先要考慮產(chǎn)品的可讀性，需要滿足WCAG 2.0 (Web內(nèi)容可訪問性指南)中規(guī)定的AA級(jí)標(biāo)準(zhǔn)，即最低4.5:1的對(duì)比度。

Material Design 中推薦暗黑模式默認(rèn)最底層顏色為#121212，而在這之上的層級(jí)則使用不同透明度的白色透明層遮罩獲得層級(jí)區(qū)分。

層級(jí)越高，對(duì)應(yīng)的不透明度越大，本次Dark Mode設(shè)計(jì)，概括定義7個(gè)層級(jí)，便于后續(xù)場(chǎng)景拓展設(shè)計(jì)。

以下是核心頁面視覺效果：

13. 更高效的及時(shí)反饋（ 無痕模式）

對(duì)無痕模式展示位置進(jìn)行優(yōu)化，當(dāng)用戶啟動(dòng)無痕模式時(shí)，底tab內(nèi)icon為清晰的高亮色展示，給用戶一個(gè)明確的狀態(tài)（解決舊版本中無痕模式狀態(tài)開啟后，用戶對(duì)狀態(tài)的感知弱的問題）。

可在多窗口落地頁內(nèi)進(jìn)行開啟以及關(guān)閉操作。

14. 桌面掛件（ 無痕模式）

添加桌面掛件功能，為本次改版新增功能。添加桌面掛件，用戶能快捷啟動(dòng)瀏覽器并迅速定位到搜索，提升活躍度，以及搜索滲透率。

視覺風(fēng)格上，延續(xù)主頁內(nèi)搜索組件的樣式，視覺上會(huì)有通透感。

從功能角度看，差異化競(jìng)品的樣式。

五、數(shù)據(jù)驗(yàn)證

在數(shù)據(jù)驗(yàn)證階段，進(jìn)行了多個(gè)不同變量的測(cè)試版本，針對(duì)啟動(dòng)頁，名站，搜索區(qū)域位置，以及信息流卡片高度，文字字號(hào)大小，以及部分交互方式，進(jìn)行微調(diào)整設(shè)計(jì)。

在整個(gè)數(shù)據(jù)驗(yàn)證的過程中，需要根據(jù)實(shí)際問題，進(jìn)行微調(diào)整設(shè)計(jì)，逐個(gè)變量進(jìn)行排除原因，尋找合理的方案。

具體的數(shù)據(jù)表格就不貼出來啦，以下是羅列的對(duì)應(yīng)數(shù)據(jù)結(jié)論：

• 印度的日活提升了2.6%，印尼日活、日活率均有明顯提升。
• 因信息流/首頁交互方式及視覺風(fēng)格優(yōu)化，更多用戶進(jìn)入瀏覽器后瀏覽了信息流內(nèi)容，印度和印尼的信息流滲透率比上個(gè)版本分別上升了18.5%和9.36%，且整體來看信息流的人均使用時(shí)長分別上升了2.12%和6.69%，兩地的數(shù)據(jù)上升明顯。
• 因信息流回到首頁的交互方式改變，名站的人均曝光次數(shù)（名站曝光人數(shù)/日活）提升21.5%。
• 上線后一周內(nèi)，設(shè)置頁添加掛件按鈕和浮層add now 按鈕占比分別為15.75%、0.9%，其余部分推測(cè)為來自桌面掛件直接添加。
• 大盤中搜索組件的點(diǎn)擊次數(shù)和點(diǎn)擊人數(shù)分別上升7.39%和8.36%，搜索量中來源為掛件的數(shù)值提升了8.58%，該功能對(duì)搜索量有正向提升。

六、復(fù)盤總結(jié)

在本次改版設(shè)計(jì)到落地過程中相對(duì)順利，但也存在一些問題。

由于涉及整體的改版落地，分期進(jìn)行開發(fā)，在項(xiàng)目前期缺少對(duì)齊整個(gè)項(xiàng)目的落地范圍。在開發(fā)過程中，有場(chǎng)景缺失，以及Dark Mode 適配范圍不明確的問題等，這些都需要在過程中進(jìn)行補(bǔ)充設(shè)計(jì)。

因此在涉及大改版的項(xiàng)目，主視覺風(fēng)格確定后，需要和項(xiàng)目組各角色同學(xué)明確對(duì)齊開發(fā)范圍及落地場(chǎng)景，是否分期落地？

核心頁面的改版，一定涉及很多深層級(jí)的頁面邏輯，是否需要適配新風(fēng)格，適配到哪個(gè)度？

這些在前期都要對(duì)齊，才能在方案推進(jìn)過程中會(huì)更順利，也降低項(xiàng)目各成員的溝通成本，團(tuán)隊(duì)配合更默契。

作者：SSP，微信公眾號(hào)：VMIC UED

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

題圖來自Pexles，基于 CC0 協(xié)議