產(chǎn)品體驗(yàn)探索之時(shí)尖科技官網(wǎng)設(shè)計(jì)（設(shè)計(jì)篇）

*本文僅代表個(gè)人的設(shè)計(jì)觀點(diǎn)，如有更好的優(yōu)化方案，也希望與廣大設(shè)計(jì)師們多多交流，以評(píng)促優(yōu)，以友會(huì)師。

在該項(xiàng)目的產(chǎn)品篇文章中，結(jié)尾處提到了對(duì)時(shí)尖科技企業(yè)官網(wǎng)的改版設(shè)計(jì)思路，對(duì)其原有未上線的官網(wǎng)demo進(jìn)行了功能與視覺重構(gòu)，結(jié)合企業(yè)服務(wù)的對(duì)象與其使用場(chǎng)景進(jìn)行了整合。在滿足其使用場(chǎng)景合理化的前提下，加之以功能的交互操作改良與對(duì)應(yīng)板塊的視覺重構(gòu)，來綜合提升整個(gè)產(chǎn)品的用戶體驗(yàn)，達(dá)到在用戶、場(chǎng)景不固定化形態(tài)下，依然能夠無縫銜接，將用戶體驗(yàn)達(dá)到相對(duì)極致的狀態(tài)。

本篇就項(xiàng)目改版設(shè)計(jì)，從產(chǎn)品功能、交互體驗(yàn)、視覺設(shè)計(jì)等維度繼續(xù)進(jìn)行分享。

一、視覺規(guī)范的定義

基于產(chǎn)品的企業(yè)背景、面向?qū)ο笠约捌放频恼w調(diào)性，進(jìn)行官網(wǎng)設(shè)計(jì)規(guī)范的延伸，從視覺設(shè)計(jì)的角度，進(jìn)行了統(tǒng)一的色彩屬性、文字屬性的規(guī)范。

1.色彩的選用

對(duì)于官方網(wǎng)站整體的配色而言，從品牌標(biāo)識(shí)中擷取了藍(lán)色和橙色作為網(wǎng)站的基礎(chǔ)色。

藍(lán)色進(jìn)行了深化處理，一方面是結(jié)合行業(yè)的屬性，企業(yè)是為省內(nèi)各大高校提供智慧校園、智慧教室的軟硬件配套設(shè)施的服務(wù)，采用“科技藍(lán)+工業(yè)質(zhì)感的深色”相結(jié)合，提煉出工業(yè)藍(lán)色（R:13   G:47   B:84）；另一方面也為后期的交互與視覺考慮出發(fā)，深藍(lán)與亮橙加大視覺對(duì)比，能夠讓用戶的視覺更加具有頁面功能的聚焦感，將產(chǎn)品的重要功能與次要功能做出視覺對(duì)比，重點(diǎn)突出某些想要讓用戶快速捕獲到的功能區(qū)域。

橙色進(jìn)行了高亮化處理，一方面是產(chǎn)品的主色，面向的用戶對(duì)象一是高校項(xiàng)目管理者，二是高校學(xué)生，橙色更具活力號(hào)召感，能夠直入學(xué)生內(nèi)心，關(guān)注到產(chǎn)品企業(yè)，在企業(yè)長(zhǎng)期發(fā)展中，學(xué)生的龐大基數(shù)數(shù)量也不失是一個(gè)品宣的重要主體；另一方面自然也是為做功能板塊的對(duì)比區(qū)分，將重要的功能板塊進(jìn)行高亮處理。

2.文字的規(guī)范

文字的規(guī)范上，中文采用國(guó)內(nèi)商免的阿里巴巴普惠體，英文采用了常規(guī)的三番體進(jìn)行設(shè)計(jì)。

3.產(chǎn)品尺寸規(guī)范

鑒于企業(yè)站項(xiàng)目對(duì)接的甲方提出后期要適配于多端設(shè)備的需求，因此為了產(chǎn)品有更好的向下兼容性和設(shè)備普適性，設(shè)計(jì)尺寸應(yīng)用了1920*1080px。

二、產(chǎn)品視覺組件定義

為了達(dá)到產(chǎn)品視覺在團(tuán)隊(duì)設(shè)計(jì)時(shí)的高度一致化，同時(shí)考慮到后續(xù)項(xiàng)目改版的視覺統(tǒng)一性以及項(xiàng)目交付開發(fā)團(tuán)隊(duì)后的開發(fā)周期成本，針對(duì)項(xiàng)目低保真demo的功能、標(biāo)題、裝飾等效果區(qū)域進(jìn)行了組件化的設(shè)計(jì)延展，在保證功能不丟失、不缺少的前提下，進(jìn)行視覺層面的優(yōu)化改良，以此來縮短整個(gè)項(xiàng)目的周期成本，提高團(tuán)隊(duì)項(xiàng)目運(yùn)營(yíng)效率。

*這里展示部分出現(xiàn)頻率較高的項(xiàng)目組件

 

三、功能板塊的設(shè)計(jì)思考

B端產(chǎn)品重在功能與信息的設(shè)計(jì)，在特定的場(chǎng)景環(huán)境下，能夠降低用戶的認(rèn)知成本，提高產(chǎn)品的操作效率，明確對(duì)應(yīng)的信息傳遞，快速捕獲到對(duì)自己有用的數(shù)據(jù)信息，短時(shí)間內(nèi)高效無誤地完成工作任務(wù)，才是在產(chǎn)品設(shè)計(jì)前需要綜合考究的問題。

在這里，就產(chǎn)品的功能與視覺融合的設(shè)計(jì)進(jìn)行復(fù)盤解析。

在產(chǎn)品首頁中，95%以上的導(dǎo)航設(shè)計(jì)都是居于頂部位置，如以下示例：

雖然在用戶操作時(shí)，這種設(shè)計(jì)下的導(dǎo)航欄可以固定常駐，但其缺陷有二：

一是在產(chǎn)品設(shè)備化延展適配后，由于現(xiàn)在市場(chǎng)中，移動(dòng)電子產(chǎn)品的屏幕尺寸加大，通過費(fèi)茨法則 Time = a + b log2 ( D / S + 1 ) 可以得知，當(dāng)目標(biāo)按鈕距離游標(biāo)越遠(yuǎn)，所需耗費(fèi)的點(diǎn)按成本也會(huì)越高，同樣的道理應(yīng)用在移動(dòng)手持設(shè)備上，就可以理解為，當(dāng)用戶在單手操控手機(jī)時(shí)，其手指的肌肉拉伸感會(huì)加大，帶來的用戶體驗(yàn)也就相對(duì)越差；當(dāng)用戶在使用平板設(shè)備操作時(shí)，慣用右手操作自然也需要延展到屏幕頂端，這樣不僅加大了操作成本，在操作的同時(shí)，也會(huì)因手臂遮擋屏幕而降低良好的視覺體驗(yàn)；

另一方面，從產(chǎn)品感知的角度，市面上大部分導(dǎo)航都如出一轍，而作為當(dāng)前產(chǎn)品的甲方，既想讓產(chǎn)品易用好用，快速讓用戶捕獲到有效信息；同時(shí)也想讓用戶能夠沉浸在產(chǎn)品當(dāng)中，加深對(duì)企業(yè)和業(yè)務(wù)的認(rèn)知了解，從而多點(diǎn)多維達(dá)成業(yè)務(wù)合作?；诖?，在能夠讓客戶在快速定位到自己關(guān)注的信息板塊同時(shí)，也要考慮產(chǎn)品的視覺差異化，從而讓客戶能夠沉浸在產(chǎn)品中，通過視覺優(yōu)化功能結(jié)構(gòu)板塊的方式來增強(qiáng)用戶體驗(yàn)，并引導(dǎo)用戶不斷探索產(chǎn)品的業(yè)務(wù)服務(wù)，滿足用戶的獵奇心理。

為此，對(duì)于該產(chǎn)品的導(dǎo)航，基于不同的平臺(tái)，給出了不同的方案（由于該產(chǎn)品需要企業(yè)為高校管理人員在閱覽時(shí)進(jìn)行不同方案講解，并在客戶選定方案后可直接在官網(wǎng)提交申請(qǐng)表單，因此考慮到使用場(chǎng)景，項(xiàng)目只做PC與pad端使用，暫無手機(jī)端）：

to pc——導(dǎo)航集中在產(chǎn)品右側(cè)  

結(jié)合上文提出的費(fèi)茨法則，為了快速促發(fā)用戶切換信息板塊，在一稿設(shè)計(jì)時(shí)，將導(dǎo)航放置在了頁面右側(cè)

但該形式的展現(xiàn)，結(jié)合PC硬件本身的特點(diǎn)與用戶眼動(dòng)熱區(qū)的分析，又經(jīng)過反復(fù)的體驗(yàn)測(cè)試，發(fā)現(xiàn)：常態(tài)中，用戶在使用PC端進(jìn)行界面瀏覽時(shí)，眼動(dòng)路徑一般是從左至右的，而且產(chǎn)品本身也希望客戶在瀏覽時(shí)能快速定位業(yè)務(wù)對(duì)應(yīng)的導(dǎo)航板塊，為此，進(jìn)行了進(jìn)一步的調(diào)整，將PC端的全部導(dǎo)航移至界面左側(cè)：

to pad：

pad端與PC端不同，客戶可以直接用右手手指點(diǎn)觸（暫無左手設(shè)計(jì)，畢竟左撇子的人數(shù)占比量較低，針對(duì)此類特殊人群可由企業(yè)人員陪同操作），這樣屏幕右側(cè)就成為觸控?zé)釁^(qū)，左側(cè)則可以用作信息閱覽

因此，對(duì)于pad端產(chǎn)品設(shè)計(jì)就采用了PC端的一稿設(shè)計(jì)方案：

這樣設(shè)計(jì)既符合了用戶的使用場(chǎng)景，也能為開發(fā)節(jié)省一定的時(shí)間成本。

四、產(chǎn)品高保真視覺效果

首頁設(shè)計(jì)：

二級(jí)頁面設(shè)計(jì)：

ok，對(duì)于時(shí)尖科技官網(wǎng)站的產(chǎn)品設(shè)計(jì)到此也就告一段落了，該項(xiàng)目于2021年4月完成設(shè)計(jì)，不僅于此，對(duì)于這個(gè)項(xiàng)目，團(tuán)隊(duì)還為甲方提供了其產(chǎn)品logo與產(chǎn)品畫冊(cè)的設(shè)計(jì)，后續(xù)也會(huì)陸續(xù)更新……