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