2022-5-6 ui設(shè)計(jì)分享達(dá)人
在數(shù)字化的浪潮下，政府希望通過人工智能占據(jù)智慧城市的發(fā)展先機(jī)，推動(dòng)民生改善及產(chǎn)業(yè)增長，這離不開政府和科技公司的緊密合作。因此，科技公司不僅面向To B型企業(yè)，同時(shí)面向政府或相關(guān)事業(yè)單位，即是稱之為「To G」這種特殊劃分。
鯤云科技（以下簡稱為鯤云）就是這樣一類科技公司，他們作為一家技術(shù)領(lǐng)先的人工智能公司，以數(shù)據(jù)流技術(shù)為核心，提供高性能低延時(shí)、高通用性、高算力性價(jià)比的下一代人工智能計(jì)算平臺(tái)和軟硬一體化的平臺(tái)解決方案，加速人工智能技術(shù)在智慧城市、智慧安監(jiān)、智慧制造、自動(dòng)駕駛等領(lǐng)域的落地。
當(dāng)用戶接觸一個(gè)產(chǎn)品或物品的第一步，永遠(yuǎn)是外觀視覺。固然，企業(yè)官網(wǎng)作為互聯(lián)網(wǎng)產(chǎn)品，優(yōu)質(zhì)的官網(wǎng)必然是為它的用戶有針對性地服務(wù)。雖然訪客首先感受到的是網(wǎng)站的視覺設(shè)計(jì)，但我們不僅要對網(wǎng)站視覺美觀與否有所重視，更好的訪問體驗(yàn)、更實(shí)用的網(wǎng)站功能、更高的網(wǎng)站辨識(shí)度，以及通過視覺實(shí)現(xiàn)直觀的價(jià)值傳遞表達(dá)，都需進(jìn)行深度探討。
網(wǎng)站呈現(xiàn)給訪客的第一印象尤其重要，而網(wǎng)站首屏則會(huì)作為傳遞網(wǎng)站風(fēng)格及功能的媒介。我們從鯤云的品牌設(shè)計(jì)理念出發(fā)，以直觀的視覺形式來體現(xiàn)科技感。
一個(gè)視覺效果好的網(wǎng)站，80%以上是靠優(yōu)質(zhì)的圖片支撐。我們首先在官網(wǎng)首頁Banner采用產(chǎn)品渲染圖來呈現(xiàn)鯤云核心產(chǎn)品。首屏的功能性常會(huì)被忽視，其實(shí)，企業(yè)官網(wǎng)附帶著商業(yè)屬性，商業(yè)環(huán)境下的視覺應(yīng)該更注重強(qiáng)化產(chǎn)品，滿足需求的產(chǎn)品力加持。
為了提升banner的視覺質(zhì)感，我們對鯤云三款主打產(chǎn)品重新建模渲染，通過主要光源及補(bǔ)光掌握好產(chǎn)品形態(tài)，在將產(chǎn)品細(xì)節(jié)充分展現(xiàn)清晰的前提下，產(chǎn)品暗面加入環(huán)境光使整個(gè)畫面更豐富飽滿。
與此同時(shí)，完成產(chǎn)品渲染后結(jié)合了場景化的特殊版面來營造氛圍，使整個(gè)畫面更具真實(shí)感染力。這樣一來，當(dāng)訪客來到鯤云官網(wǎng)，一個(gè)極具科技感和創(chuàng)造力的鯤云會(huì)給訪客留下深刻的第一印象。
圖標(biāo)是比文字更容易理解的可視化語言，它對于信息傳遞十分高效，可以說圖標(biāo)將這個(gè)世界結(jié)合起來。鯤云圖標(biāo)體系由兩部分構(gòu)成，分別是UI icon和3D icon。
3D icon可幫助訪客更簡易、高效地理解鯤云兩大核心技術(shù)的實(shí)際屬性。UI icon擁有清晰、簡潔單色線性的特征，其風(fēng)格符合鯤云品牌氣質(zhì)，每個(gè)圖標(biāo)特征和細(xì)節(jié)保持一致，在視覺上呈現(xiàn)出更好的統(tǒng)一性。
我們提煉鯤云logo造型輪廓特征、以及根據(jù)產(chǎn)品和服務(wù)方向進(jìn)行圖形發(fā)散，提取鯤云品牌基因，進(jìn)而使圖標(biāo)實(shí)現(xiàn)差異化設(shè)計(jì)。
一個(gè)可以給人留下記憶點(diǎn)的網(wǎng)站，往往需要靠一個(gè)個(gè)精致到位的細(xì)節(jié)設(shè)計(jì)，做到讓網(wǎng)站最終脫穎而出?？梢哉f，細(xì)節(jié)是構(gòu)建起整個(gè)設(shè)計(jì)的基本元素，細(xì)節(jié)不僅是細(xì)節(jié)。
科技類產(chǎn)品復(fù)雜度較高，只查看技術(shù)和產(chǎn)品概念往往會(huì)感到枯燥，如何做到直觀呈現(xiàn)鯤云核心技術(shù)區(qū)別于普通技術(shù)，還能提升趣味性？
在首頁接著往下呈現(xiàn)鯤云核心技術(shù)的第三屏中，我們應(yīng)用柱狀圖結(jié)合交互微動(dòng)效的方式，將鯤云CAISA芯片與普通芯片進(jìn)行利用率、性能及延時(shí)三方面的對比。
當(dāng)訪客點(diǎn)擊查看某一維度對比，可觸發(fā)柱狀圖由下至上勻速的位置及漸變色變化，更直觀地向訪客表明鯤云此款芯片可提供更高的算力性價(jià)比的優(yōu)勢，同時(shí)引導(dǎo)訪客注意力，加強(qiáng)訪客與其互動(dòng)鏈接。
在網(wǎng)站中較為常用且能保障性能的微動(dòng)效有四個(gè)變化屬性：大小、位置、旋轉(zhuǎn)、透明度。這四個(gè)屬性任何一種或是幾種有所變化時(shí)，就能達(dá)到交互微動(dòng)效的目的，如果再加入其它不必要的屬性，則會(huì)影響動(dòng)效的流暢度。
首頁第四屏的四個(gè)核心產(chǎn)品展示中，移動(dòng)鼠標(biāo)放置各個(gè)產(chǎn)品版塊觸發(fā)的微動(dòng)效，緩動(dòng)的效果能讓版塊更自然順滑，看起來十分舒服和諧，符合訪客認(rèn)知及預(yù)期。
我們明確了鯤云官網(wǎng)文案語言要保證表述清晰明了、詳略得當(dāng)，直觀地將產(chǎn)品信息及優(yōu)勢傳達(dá)給訪客，便于訪客理解且能產(chǎn)生記憶點(diǎn)。
關(guān)于鯤云
---------------------
核心技術(shù)
---------------------
產(chǎn)品中心
---------------------
應(yīng)用案例
---------------------
合作伙伴
我們見過不少企業(yè)官網(wǎng)文案，都喜歡用抽象的詞匯來高度概括產(chǎn)品概念。在我們看來，佐證產(chǎn)品使用真實(shí)專業(yè)的語言搭配數(shù)據(jù)內(nèi)容，可體現(xiàn)出產(chǎn)品專業(yè)性的同時(shí)，用更真實(shí)的力量打動(dòng)訪客。
我們利用響應(yīng)式網(wǎng)頁設(shè)計(jì)構(gòu)建網(wǎng)頁布局，使頁面能夠更好地適配不同尺寸屏幕，進(jìn)而使網(wǎng)頁體驗(yàn)更適應(yīng)用戶的需求偏好。
官網(wǎng)建設(shè)需要遵循“不要讓我思考”的原則，這是產(chǎn)品設(shè)計(jì)中廣為流傳的一句話。網(wǎng)站作為單向信息傳播工具，我們難以左右訪客的瀏覽行為。
我們需確定官網(wǎng)的層級結(jié)構(gòu)，做好訪客整體體驗(yàn)的宏觀把控，讓訪客按照我們設(shè)想的行為去操作。我們除了必須滿足訪客基本瀏覽需求之外，更要主動(dòng)展示企業(yè)核心競爭力的內(nèi)容，這是最終實(shí)現(xiàn)增長的有效途徑。
我們從用戶分層入手，站在各個(gè)訪客角色的角度進(jìn)行審視，使得鯤云官網(wǎng)各版塊頁面設(shè)計(jì)上不同的展示區(qū)、功能區(qū)以及CTA按鈕等充分滿足訪客想看到的信息需求。誠然，各版塊信息內(nèi)容之間存在價(jià)值等級，例如知乎的問答會(huì)占據(jù)首頁較大的空間。
根據(jù)鯤云先有技術(shù)再有解決方案的底層邏輯，我們將鯤云「核心技術(shù)」板塊放置在導(dǎo)航欄第一位，先有「核心技術(shù)」，再有「產(chǎn)品中心」，后有「解決方案」及「應(yīng)用案例」。
路徑1：「核心技術(shù)」頁面關(guān)聯(lián)「系列產(chǎn)品」
路徑2：「產(chǎn)品中心」頁面關(guān)聯(lián)「應(yīng)用場景」
路徑3：「解決方案」頁面關(guān)聯(lián)「應(yīng)用案例」
通過設(shè)計(jì)官網(wǎng)層級結(jié)構(gòu)，結(jié)合對訪客心智特點(diǎn)的思考和利用，讓訪客更多行為能夠發(fā)生在直覺系統(tǒng)的判斷中。當(dāng)然，降低訪客跳出率、建立起訪客信任都在上述層級結(jié)構(gòu)設(shè)計(jì)的考慮范圍之內(nèi)。
對于To B和To G產(chǎn)品，企業(yè)更看重的是產(chǎn)品本身能否為企業(yè)帶來價(jià)值。鯤云的客戶群體角色通常為多層級，他們會(huì)從性價(jià)比、效率提升、適配企業(yè)狀況等多個(gè)維度進(jìn)行篩選和考量，本質(zhì)既是要優(yōu)化客戶效率，實(shí)現(xiàn)“降本增效”。
基于這一特點(diǎn)，我們在「核心技術(shù)」板塊Banner圖設(shè)計(jì)了下載白皮書的「 CTA 行動(dòng)號(hào)召按鈕」，并確保CTA顏色對比顯眼且目標(biāo)清晰。
基于鯤云SEM投放需求，我們專門設(shè)計(jì)了專屬落地頁——「解決方案」版塊，將官網(wǎng)首頁與該廣告轉(zhuǎn)化頁分開，各司其職。
大家應(yīng)該多少有聽說過，我們可以通過FABE法則和AIDA模型等經(jīng)典方法搭建出一個(gè)優(yōu)質(zhì)的網(wǎng)頁框架。
一個(gè)落地頁應(yīng)該凸顯對訪客有利的信息，當(dāng)訪客來到廣告轉(zhuǎn)化頁時(shí)，如何快速獲得想要的信息，并為他們建立起對鯤云產(chǎn)品的價(jià)值認(rèn)同進(jìn)而實(shí)現(xiàn)轉(zhuǎn)化，這時(shí)就需重點(diǎn)打造信息分層。
整個(gè)頁面采用相對清晰簡約的視覺設(shè)計(jì)，圍繞「解決方案」這一核心有層次地規(guī)劃整個(gè)布局及各信息點(diǎn)優(yōu)先級。頁面Banner作為門面，也是整個(gè)頁面氛圍的關(guān)鍵所在，我們將重點(diǎn)信息突出，文案傳達(dá)簡潔有力，圖片素材的選取兼顧了鯤云品牌形象，整個(gè)頁面的營銷屬性做到盡量弱化。
訪客瀏覽頁面時(shí)，不一定會(huì)經(jīng)歷完整轉(zhuǎn)化過程才會(huì)轉(zhuǎn)化，我們設(shè)計(jì)了及時(shí)的行為號(hào)召入口，幫助訪客在某一節(jié)點(diǎn)做出行動(dòng)時(shí)，實(shí)現(xiàn)快速轉(zhuǎn)化：
......
鯤云面向的客戶群不僅是面向To B，同時(shí)面向從To B衍生出To G這一種特殊劃分。基于這一行業(yè)特點(diǎn)，我們在整站設(shè)計(jì)中有更多精致度和可視化的思考，它不需要五花八門的Banner、會(huì)員體系以及炫酷的交互動(dòng)效。
我們只需要讓訪客“慣性”操作，制定更符合人性的策略來指導(dǎo)設(shè)計(jì)，讓訪客按照我們設(shè)想的行為去操作，這是最終實(shí)現(xiàn)增長的有效途徑。當(dāng)然，提高轉(zhuǎn)化率是我們引導(dǎo)設(shè)計(jì)的主要目的之外，降低訪客的跳出率、建立起訪客信任都在我們網(wǎng)站引導(dǎo)路徑設(shè)計(jì)的考慮范圍之內(nèi)。
增長超人為客戶做的從來都不僅僅是一個(gè)網(wǎng)站，而是為企業(yè)提供從營銷策劃到落地的一整套互聯(lián)網(wǎng)解決方案。網(wǎng)站只是一個(gè)載體，我們真正的價(jià)值在于能夠幫助企業(yè)找到正確的競爭優(yōu)勢，扭轉(zhuǎn)高成本低轉(zhuǎn)化的現(xiàn)狀，實(shí)現(xiàn)營收增長。
文章來源：站酷 作者：增長超人
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
藍(lán)藍(lán)設(shè)計(jì)的小編 http://sillybuy.com