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

編輯導(dǎo)讀：官網(wǎng)是企業(yè)的一張“臉”，記錄了企業(yè)一路的發(fā)展歷程。隨著產(chǎn)品的迭代升級，官網(wǎng)首頁改版設(shè)計(jì)是常常會(huì)遇到的問題。在進(jìn)行首頁改版時(shí)，設(shè)計(jì)師需要考慮哪些因素？本文作者從阿里云官網(wǎng)首頁改版的項(xiàng)目出發(fā)，深入淺出闡述了首頁的重要性以及設(shè)計(jì)思考，與大家分享。

科技公司的首頁——一種平衡「用戶訴求」「業(yè)務(wù)策略」與「品牌定位」的藝術(shù)

自阿里云 2009 年成立以來，已經(jīng)走過了 11 個(gè)年頭；官網(wǎng)作為它的載體，這 11 年間我們交出過很多份關(guān)于首頁的設(shè)計(jì)答卷；但看得見的設(shè)計(jì)背后，更多的是看不見的設(shè)計(jì)思考，是我們對于用戶體量、業(yè)務(wù)體系不斷升級的回應(yīng)，是對品牌的精細(xì)化雕琢與受眾的精準(zhǔn)化匹配。

— 每一份阿里云官網(wǎng)首頁，是設(shè)計(jì)的升級，更是業(yè)務(wù)的升級

在上一個(gè)版本中，基于對業(yè)務(wù)訴求的貼合，我們嘗試了一版在業(yè)界引發(fā)諸多爭議及討論的首頁方案。盡管如此，我們始終認(rèn)為這樣的嘗試是非常必要的，我們由此得以不斷地去驗(yàn)證業(yè)務(wù)、推進(jìn)業(yè)務(wù)，從而達(dá)到設(shè)計(jì)策略與業(yè)務(wù)策略的深度融合。

2020年，借著阿里云官網(wǎng)業(yè)務(wù)升級的契機(jī)，我們再一次把「首頁改版」提上了議程。在對齊業(yè)務(wù)訴求的同時(shí)，我們更加深入地走進(jìn)用戶，期望在新版首頁中，以“人”出發(fā)，打造“用戶訴求”、“業(yè)務(wù)訴求”和“品牌訴求”之間的平衡。

01 用戶研究與設(shè)計(jì)策略設(shè)定

解決問題的前提，是定義真正的問題。

項(xiàng)目啟動(dòng)后，我們并無意于僅做表層視覺的優(yōu)化，而是希望切實(shí)地緊跟用戶訴求，讓設(shè)計(jì)策略為用戶服務(wù)。

對于用戶行為數(shù)據(jù)的觀察，如果僅局限于頁面內(nèi)部，無異于管中窺豹，因?yàn)槎鄶?shù)情況下的頁面數(shù)據(jù)都是受頁面當(dāng)前信息結(jié)構(gòu)深度制約的。對比首頁內(nèi)容本身，我們更加關(guān)注不同客群以首頁為起點(diǎn)，在整個(gè)網(wǎng)站內(nèi)部的流轉(zhuǎn)行為鏈路，從而進(jìn)一步分析深層訴求。通過對于典型用戶的時(shí)序路徑數(shù)據(jù)分析，我們發(fā)現(xiàn)不同客群的確存在行為上的顯著差異。為了客觀的提取差異化行為成因，我們采用深度訪談、電訪/問卷相結(jié)合的方式，針對已有的數(shù)據(jù)結(jié)論，進(jìn)行定性深度解讀，輔助數(shù)據(jù)判斷，并形成初步的客群模型。

清楚的了解我們面對的受眾是誰，他們的特征是什么，他們需要什么樣的服務(wù)，我們才能更好地提交一份我們的答卷。

— 2020版全新官網(wǎng)首頁

02 圍繞阿里云進(jìn)化設(shè)計(jì)語言展開的視覺升級

除首頁架構(gòu)的調(diào)整之外，視覺上的升級也是本次改版中的重要一環(huán)。

經(jīng)歷了2019年快速的品牌色變更、官網(wǎng)運(yùn)營策略的調(diào)整，過去的一年來我們一直在思考和尋找屬于阿里云的品牌特質(zhì)。它應(yīng)該是我們體內(nèi)的某些基因，不隨外在環(huán)境的變化而改變。

我們經(jīng)歷了品牌原型的推導(dǎo)、提取了用戶調(diào)研的結(jié)果、搜集了多次腦爆的內(nèi)容后，有了“智者”的心理學(xué)品牌原型，并定義了當(dāng)前阿里云進(jìn)化設(shè)計(jì)語言的內(nèi)核和外在。

「虛實(shí)-望其虛握其事」、「秩序-秩序是生命之匙」、「幾何-充滿想象的幾何」、「運(yùn)動(dòng)-運(yùn)動(dòng)體現(xiàn)智能」四大關(guān)鍵詞，體現(xiàn)了阿里云技術(shù)的領(lǐng)先性和設(shè)計(jì)的獨(dú)特點(diǎn)，并成為本次首頁改版視覺升級的核心觀點(diǎn)，給以風(fēng)格的指引和設(shè)計(jì)的推導(dǎo)。

1. 「虛實(shí)」VIRTUAL BEYOND VIRTUAL

將虛擬云產(chǎn)品進(jìn)行具象表達(dá)，一直是我們在研究的課題，經(jīng)過幾年來不斷的摸索和迭代，我們沉淀出200+ 款可以傳達(dá)云產(chǎn)品特征的產(chǎn)品形象系列。

本次首頁焦點(diǎn)圖，在前述基礎(chǔ)之上，采用了GPGPU的代碼技術(shù)，與云產(chǎn)品形象結(jié)合形成了全新的虛實(shí)視覺體驗(yàn)；不僅幫助提升了視覺體驗(yàn)，也進(jìn)一步提高了首焦區(qū)塊的點(diǎn)擊率。

— 從云產(chǎn)品形象到粒子化的互動(dòng)模型

2. 「秩序」ORDER & RYTHM

運(yùn)用合理的模塊切割，將秩序感和節(jié)奏感貫穿在整體的頁面設(shè)計(jì)中，讓信息得到更好的歸類與傳達(dá)；

3. 「幾何」ICON & IMAGE

幾何圖像是對語意的高度概括，簡潔和干脆的幾何圖形可以加強(qiáng)文字信息傳遞以及氛圍渲染的效果。無論是幾十像素的ICON還是大塊面的輔助圖形，都延續(xù)著幾何感、規(guī)律化的視覺風(fēng)格；

4. 「運(yùn)動(dòng)」USER INTERFACE ANIMATION

同樣的動(dòng)畫時(shí)間（Duration）不同的運(yùn)動(dòng)緩沖速率（Ease）對于用戶的視覺體驗(yàn)會(huì)產(chǎn)生微妙的體感差異。為調(diào)試出適用于Web端的動(dòng)畫速率，我們對Quad，Cubic，Exponential等經(jīng)典緩沖運(yùn)動(dòng)進(jìn)行了大量的設(shè)計(jì)實(shí)踐驗(yàn)證，并通過CSS代碼還原出理想的動(dòng)畫速率貝塞爾曲線，達(dá)到整個(gè)頁面各部分在體驗(yàn)上的一致性和優(yōu)雅性。

03 技術(shù)×設(shè)計(jì) GPGPU Particles

「實(shí)時(shí)粒子動(dòng)畫」WEBGL REAL-TIME PARTICLES

如前述段落中提到，本次首頁改版除了常見的設(shè)計(jì)手段以外，我們引入了WebGL技術(shù)，將代碼與云產(chǎn)品模型進(jìn)行結(jié)合，創(chuàng)造出可交互的實(shí)時(shí)粒子動(dòng)畫效果。這是設(shè)計(jì)中心首次將WebGL應(yīng)用到門戶網(wǎng)站，面臨著技術(shù)和性能之間的平衡的挑戰(zhàn)。如何將實(shí)時(shí)渲染的圖形技術(shù)應(yīng)用到消費(fèi)級的用戶端？

1. GRAPHIC TECHNOLOGY — GPGPU x FBO

通常我們要想設(shè)計(jì)與開發(fā)出實(shí)時(shí)渲染（Real-time Rendering）的粒子動(dòng)畫，需要在CPU里計(jì)算，比如通過For循環(huán)語句( e.g for( let i=0; i < particles.length; i++ ) { …. } )的方式計(jì)算粒子的位置。這樣的問題在于可能超過僅1萬粒子普通計(jì)算機(jī)就很難承擔(dān)了，無法表達(dá)更加科技、細(xì)膩與豐富的粒子效果。

在阿里云官網(wǎng)的場景中，我們在WebGL技術(shù)框架下（Three.js + 自研Shader），運(yùn)用GPGPU + FBO（Aka. FrameBufferObject，幀緩沖區(qū)對象）的圖形技術(shù)，對粒子的三維運(yùn)動(dòng)、聚合散開、力場渦旋風(fēng)向等在Shader層里進(jìn)行演算，最大化地利用了WebGL這一主要利用顯卡的圖形技術(shù)，僅需一張消費(fèi)級的獨(dú)立顯卡，便可實(shí)現(xiàn)實(shí)時(shí)計(jì)算數(shù)十萬級的粒子動(dòng)畫。

GPGPU通用圖形處理（General-purpose computing on graphics processing units，簡稱GPGPU），是一種基于WebGL的高級圖形技術(shù)，通過Shader以及顯卡的幀緩沖區(qū)對象（FBO），由GPU去計(jì)算圖形；

GPGPU計(jì)算的粒子可承擔(dān)到100萬級+（e.g FBO幀緩沖區(qū) 1024 x1024+）的粒子數(shù)量高速計(jì)算渲染，目前我們根據(jù)用戶的顯卡設(shè)備進(jìn)行自動(dòng)檢測、適配和分層，開放到約9 ～ 29萬粒子實(shí)時(shí)渲染，用技術(shù)的設(shè)計(jì)方式去演繹云計(jì)算公司的首頁焦點(diǎn)動(dòng)畫。

FBO幀緩沖區(qū)對象的原理，即通過顯存緩沖區(qū)里不斷更新與計(jì)算的一張動(dòng)態(tài)位圖，e.g 512×512即26萬像素，每一顆像素的RGBA通道可存儲(chǔ)每一個(gè)粒子的XYZW三維空間訊息，以達(dá)到CPU無法承擔(dān)的如此多粒子的高速計(jì)算負(fù)荷。

2. THE HIGHLY PERFORMANT ICONS OF ALIBABA CLOUD PRODUCTS

在設(shè)計(jì)過程中，為了保證頁面加載的速度與運(yùn)行的性能，我們使用Blender把模型的面數(shù)、節(jié)點(diǎn)與拓?fù)洌═opology）優(yōu)化到極致（e.g 最終的glTF 3D模型的K數(shù)為40 ~ 150K，比一張圖片還輕量），并將代碼與模型解藕，按照優(yōu)化規(guī)范輸出模型，便可以零代碼、去人工化地生成新粒子

3. PARTICLES & INTERACTIONS

粒子效果在流動(dòng)和光影之下呈現(xiàn)出最佳的視覺沖擊力，區(qū)別于黑的神秘和白的純凈，灰色具有一種不帶任何感情色彩的、冷靜的中性氣質(zhì)，同時(shí)它也可以讓首屏的文案信息和行動(dòng)點(diǎn)更明顯。

在將技術(shù)與門戶網(wǎng)站結(jié)合的過程中，我們遇到了很多挑戰(zhàn)和質(zhì)疑，諸如效果和性能，最終我們在權(quán)衡之中找到了兩者的平衡，而且我們相信這就是未來。

04 一切從這里開始

「首頁」是用戶瀏覽和使用「阿里云官網(wǎng)」的開始，而我們的「改版」也是不斷精細(xì)化打磨阿里云官網(wǎng)體驗(yàn)的開始。和人的蹣跚學(xué)步一樣，設(shè)計(jì)在往前走的路上，也會(huì)有很多跌跌撞撞；會(huì)有階段性設(shè)計(jì)突破的欣喜，也會(huì)有走了彎路的遺憾；最終在泥濘之中，探索出一條正確的道路。

我們交出過很多份關(guān)于官網(wǎng)設(shè)計(jì)的答卷；這些設(shè)計(jì)升級的背后，是我們對于用戶體量、業(yè)務(wù)體系不斷升級的回應(yīng)，是對品牌的精細(xì)化雕琢與受眾的精準(zhǔn)化匹配的反饋。

我們的堅(jiān)持，不是源于它的「不同」，而是源于它的「正確」。

作者：阿里云設(shè)計(jì)中心；公眾號：AlibabaDesign

來源：https://mp.weixin.qq.com/s/bntPjROWz8XqUvDBL6h-kA

本文由 @AlibabaDesign?授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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