網站用戶體驗:做交互應當曉得的視覺幾件事


  偶然會聽到產物司理戰交互計劃埋怨,視覺計劃稿戰最後計劃差異太年夜,我本身也碰到過相似狀態。究其緣故原由,年夜多照樣相同中湧現瞭題目。

  有用相同,疑息的對等是很主要的。那個對等,既包含讓視覺計劃盡早懂得產物需供,得到取其別人員對等的疑息;也包含交換兩邊常識范疇的對等,相互多懂得對圓范疇內容,能力更好天相同。

  對付交互計劃師來講,視覺計劃是互助最多的一環,交互本型末回要以視覺的情勢出現正在用戶面前。是以,懂些視覺計劃,更容易於將交互計劃通報給用戶。同時,交互計劃做為多教科交匯的職位,懂些視覺更是本身才能的進步。諸葛明有句話道的好,甚麼皆略懂一面,生涯會多彩一些。

  切進正題,一一背列位先容一些視覺本則,為瞭更好懂得,我皆舉微專的例子。

  經由過程字體表達產物作風

  視覺計劃中,字體的挑選對付產物作風的表示是感化顯著的,統一段筆墨,用分歧字體寫出,感到確切千好萬別。

  微專中最經常使用的宣佈框,上圓有甚麼新穎事念告知年夜傢采取瞭華康娃娃體,表現出微專隨時隨天宣佈,很沉緊的產物感到。假如把字體換成漢文新魏體戰微硬俗烏體,沒有是感到像國民網,便是完整出有作風,體驗便好多瞭。

  


  勛章館尾頁那段煽情的筆墨經由過程腳寫體(FZJingLeiS-R-GB),以日志的情勢,表達出勛章記載生涯、記載發展的產物感到,若換成一樣平常字體,感到也便出瞭。

  


  經由過程配色展現產物定位

  經由過程配色去展現產物定位,也是計劃師必用的辦法。視覺計劃前期調研階段,經常經由過程情感版提煉合適目的用戶的色彩,構成一整套的配色計劃。

  紫色,癥結詞:文雅、高尚、女性、穩重、崇高、成生、深度、神奇、時髦。微音樂做為音樂尾收仄臺的定位,紫色加倍彰隱時髦魅力。

  


  赤色,癥結詞:藝術、熱鬧、開放、豪情、主動、活氣、喜慶、性命、成生。微曲播要表現曲播的衰況,充斥豪情的赤色便異常合適。

  


  藍色,癥結詞:明智、知性、公平、商務、科技、嚴厲、過細、松散、公式化。投票的公平性,和微數據的理性、松散,必定產物要以藍色為主色彩。

  


  橙色,癥結詞:陽光、光輝、運動、暖和、影象、傢庭、康健、快活。微運動的介入感、風雲榜的光輝,固然也少沒有瞭橙色彩的襯托。

  


  綠色,癥結詞:發展、樸實、公益、性命、平安、新穎、寧靜、春季、年夜天然。微專達人是裡背草根用戶的一款產物,他們經由過程正在微專上的行動,一面面成為某個范疇的草根明星,綠色的配色很相符這類發展的感到,微公益便未幾道瞭,確定綠色最合適啦。

  


  營建同一的品牌形象

  品牌形象是一個很年夜的范疇,詳細到某個微專產物的品牌感,更多的照樣經由過程視覺形象去轉達。那便須要視覺計劃師制訂一套體系的視覺系統,讓用戶看一眼,就可以清楚天識別。

  微群的品牌形象很受年夜傢承認,項目計劃時,願望能表示人取群、人取人的幹系,和群的回屬感。視覺計劃師采取瞭星球、飛船戰人的視覺元素,報告瞭每一個群皆是一個星球,年夜傢有著配合喜好的故事。全部網站以深藍為主色彩,營建星空的感到,當用戶看到瞭這類配色戰元素,便曉得本身去到瞭微群的頁裡。

  


  內測時啟動瞭那套系統,飛船上的人發明瞭合適本身的星球,立時便要下降瞭。

  


  新腳引誘中,也奇妙天將這類元素融進出去,既形象,又加強瞭品牌感。

  


  群的品級,用星球上的樹木去表現,品級越下,樹木越旺盛。

  


  贊助頁、小我頁、宣佈頁等等… 便紛歧一先容瞭,總之年夜傢本身不雅察,便會發明微群到處皆有表現。

  外型讓產物更有打擊力

  視覺計劃中,誇大的外型對用戶的打擊力異常年夜,很輕易一下捉住用戶,這類計劃常湧現正在專題頁裡戰本性皮膚中。

  《帶著微專往觀光》那個專題,計劃師正在頭圖計劃頂用瞭斜線處置,便連部門按鍵也是傾斜的,那便戰上面規整的模塊構成瞭比較。我們交互計劃的本型稿,結構上每每是橫仄橫曲的,偶然視覺表示上沖破這類規矩,會起到盡佳的後果。

  


  《微專有愛》專題也是個很好的例子,松握的單腳取題目構成瞭倒三角形,獵取戀人節勛章放正在三角形尖部,一下便把主題戰最主要的操縱,推到瞭用戶面前。

  


  《微身份勛章》戰《2012去瞭》專題中,感到便要跳出屏幕的模特戰年夜船,也是表示頁裡打擊力很好的例子。

  主要內容留正在尾屏

  那是視覺戰交互計劃師中皆要留意的,偶然每每本型中放正在瞭尾屏,視覺計劃時因為一些緣故原由(減模塊或是減下頭圖)又被擠到瞭上面,那面年夜傢正在視覺考核取測試中要非分特別留意。

  年夜傢看下圖,年夜屏幕是一個不和課本,尾屏竟然放瞭一個告白,而微專桌裡做得便很多多少瞭。