11.13日(rì)音(yīn)訊,微(wēi)信第三≠"方網頁設計(jì)解讀(dú)。大(dà)部分₽>↑(fēn)的(de)微(wēi)信第三方，和(hé)似乎都(dōu)不(b∞≥ù)太注重展示部分(fēn)。即視(shì)覺部分(fēn)，隐隐有(y•§≤©ǒu)些(xiē)暴發戶的(de)感覺。而且現(≈ xiàn)在做(zuò)這(zhè)塊的(de)公司似乎已經有(yǒu)當 ×♦年(nián)做(zuò)團購(gòu)的(de)景象©&。多(duō)，十分(fēn)多(duō)，最後✘≥±迷失在一(yī)片片營銷的(de)海(hǎi)洋≥> 裡(lǐ)。
做(zuò)為(wèi)設計(jì)σ↔™π師(shī)，先跳(tiào)出來(lái)觀察下(xià)。其實我們±$會(huì)驚訝的(de)發現(xiàn)，這(zh•∞∞è)些(xiē)站(zhàn)的(de)普遍性都(dōu)是(shì)為(wè♠i)你(nǐ)做(zuò)個(gè)微(wēi)信mini站(zhànβ)，就(jiù)是(shì)所謂的(de)新時(shí)代營銷。最核心的(deδΩ)功能(néng)基本也(yě)是(shì)一(yβ™≠ī)緻，如(rú)下(xià)：
智能(néng)導航（調用(yòng)地(dì)理(lǐ)位置λ✔∑地(dì)圖接口）
在線支付
全景看(kàn)圖（自(zì)由圖片組合）
抽獎營銷活動
随便打開(kāi)搜索”微(wēi)信營 銷專家(jiā)”，一(yī)堆類似微(wēi)信第三方₽÷ε網站(zhàn)。現(xiàn)在很(hěn)多(d"→®βuō)的(de)創業(yè)者也(yě)在做(zuò)類似的(de)項目，總之♠λ，就(jiù)是(shì)很(hěn)多(duō)很(hěn)多(d ÷λuō)公司做(zuò)著(zhe)類似的(de)嘗試。¶••α當然，國(guó)內(nèi)任何的(de)領域基本都×£ π(dōu)是(shì)同時(shí)存在上(shàng)百個(gè)同類的™↑$(de)項目，能(néng)真正運營下(xià)♣≈δ去(qù)到(dào)最後也(yě)隻有("✘yǒu)3-4家(jiā)而已。
自(zì)己随便打開(kāi)其中一(yī)個(gè)站(Ω$zhàn)點，發現(xiàn)其推廣的(de)核心≈Ω✔≤點，也(yě)是(shì)如(rú)上(shàn"★g)述說(shuō)的(de)一(yī)樣，功能 ✔☆(néng)部分(fēn)的(de)幾乎所有π¶₽(yǒu)的(de)微(wēi)信第三方都(dōu)做≈↑ε(zuò)著(zhe)差不(bù)多(duō)的(de)事(shì)情。如 (rú)果你(nǐ)随便打開(kāi)這(zhè)個(gè)網頁，你(←>♣nǐ)覺得(de)你(nǐ)會(huì)主動↑ ™去(qù)聯系他(tā)們麽？在很(hěn"§)多(duō)相(xiàng)似産品存在的(de)情況下(xià)。
除了(le)外(wài)面的(de)第三方，騰訊內δ♣(nèi)部也(yě)有(yǒu)兩個(gè)很(hěn)出色的(de×♣)第三方平台，”風(fēng)鈴和(hé)微 (wēi)生(shēng)活”®&✔。從(cóng)界面上(shàng)可(kě& ★π)以看(kàn)出兩者還(hái)是(shì)有(yǒu)差異，解決的∞>€₽(de)方向也(yě)是(shì)分(fēn)屬不(bù)同的<≠♣(de)類别。
風(fēng)鈴訴求展示和(hé)營銷（偏向于資訊号）
微(wēi)生(shēng)活訴求則是(shì)移動端&×的(de)店(diàn)家(jiā)會(hu≤★ì)員(yuán)解決方案（偏向于服務号）
在這(zhè)樣的(de)大(dà)環境下(xià÷♥)，怎麽能(néng)夠突圍？大(dà)緻了(le)解後會(huì)發現(x♠∞§iàn)，這(zhè)些(xiē)騰訊服務都(dōu)是(shì¥♥")基于大(dà)客戶的(de)解決方案。原因是(®≥shì)大(dà)部區(qū)，長(cháng)尾中的(de)尾部是(sh•δ§ ì)難以觸及的(de)部分(fēn)。就(j↑®iù)是(shì)所謂的(de)中小(xiǎo)商鋪。他(tā)們的(de₹✘)訴求除了(le)展示，更多(duō)是(shì)希望能(nén₩∑¥g)告訴用(yòng)戶他(tā)們有(yǒu)這(zhè≈≠)項服務。這(zhè)點比單純建立微(wēi)信服務★↑更重要(yào)。
小(xiǎo)部分(fēn)的(de)獨₩<∑↓特
當然上(shàng)述的(de)分(fēn)析，在設計(jì)階段反而沒& Ω有(yǒu)想得(de)這(zhè)麽深入。都(dōu)是φ≈(shì)動筆(bǐ)寫這(zhè)篇東(d¥∑φōng)西(xī)時(shí)想到(dào)，聯想到(dà"γ↕o)最近(jìn)研究生(shēng)課程中談到(dào€≈☆÷)的(de)”設計(jì)管理(lǐ)策略σ∞γβ”，還(hái)是(shì)一(yī)個(gè)相(x₹€≈&iàng)當有(yǒu)趣的(de)部分(fēn)，也 >φ(yě)屬于視(shì)覺設計(jì)的(de)一(yī)部分(fēn ←)。以前并沒有(yǒu)多(duō)重視(shì)，現(xiàn)在開(kā≤★★i)始多(duō)以文(wén)章(zhāng)的 ★(de)形式将這(zhè)部分(fēn)思考記錄和(h€≠₩é)總結起來(lái)。
當看(kàn)了(le)國(guó)外(wài)幾個(gè)APP站(β↕γzhàn)點，會(huì)發現(xiàn)其思路(lù)和>(hé)我們有(yǒu)很(hěn)大(dà)的(de÷₹♥)差異。或許是(shì)國(guó)人(rén)更喜歡看(kàβΩn)到(dào)盡可(kě)能(néng)詳細的(de)∞>σσ信息，更有(yǒu)可(kě)能(néng)是(shì ₽§)客戶喜歡你(nǐ)的(de)東(dōng)西(xī)盡•σ可(kě)能(néng)豐富。有(yǒu)可(kě)能(nén£÷≤Ωg)隻是(shì)慣性思維。至少(shǎo)，大(dà)部♦÷≤$分(fēn)人(rén)現(xiàn)在看(kàn)上(shàng)面和 ¥"φ(hé)下(xià)面的(de)網頁，估計(jì)大(dà÷☆)部分(fēn)同學還(hái)是(shì)會(huì)選擇偏向于下(xi✘¶à)面的(de)案例。
那(nà)麽，換種模式，是(shì)不(bù)是(shì)應該←£讓其産品介紹變得(de)更優雅簡潔。
當然，這(zhè)或許已經和(hé)目标用(yòng)戶群體© φ (tǐ)産生(shēng)偏離(lí)。一(yī)般越優美(měi)的(de)™∞∏東(dōng)西(xī)，服務人(rén)群的(de)基數(β♦'shù)也(yě)越小(xiǎo)。在展示∞™¥設計(jì)這(zhè)塊，确實國(guó)外(wài)很(hěλ∑ αn)多(duō)公司，尤其是(shì)小(xi✔Ωǎo)型公司做(zuò)的(de)很(hěn)§>®§精到(dào)。或許不(bù)想錯(cuò)過每÷"¥個(gè)進入網站(zhàn)的(de)用(yòng)₹戶。就(jiù)要(yào)每個(gè)頁面都(dōu)保持些(xi↑>ē)亮(liàng)點。
全屏的(de)圖像/視(shì)頻(pín)使用(yòng)
最簡單的(de)文(wén)字說(shuō)•®明(míng)
展示不(bù)同的(de)産品/操作(zuòπ<↕)過程
我們能(néng)做(zuò)什(sh±↔✔én)麽？
和(hé)産品團隊溝通(tōng)後，覺得(de)我們應該做(zuò''&)的(de)更偏向于優雅的(de)方向。要(yào)達到(dào) ≠這(zhè)一(yī)個(gè)目的(de)，其實他(tā)們的(de)需求φΩ¥是(shì)”高(gāo)大(dà)上(shàngΩ&β♠)”，設計(jì)師(shī)覺得(de)滿眼都(dō $u)是(shì)淚。翻譯成我們的(de)語言，就(jiù)是(sh™γì)優雅大(dà)氣，要(yào)到(dào)達這(zhè)個(gè)β¶>目标，參考圖卻是(shì)國(guó)內(nèi)些(xiē)較山(★shān)寨的(de)微(wēi)信第三方。
這(zhè)時(shí)候，設計(jì)師(shī)應該給出自(zì)≈<己的(de)參考建議(yì)。如(rú)果别人(rén)給什(shén)麽Ω✔λ，自(zì)己就(jiù)做(zuò)什(πΩ shén)麽。就(jiù)顯得(de)十分(fēn)被動。未來(lái)團隊✘σ，主要(yào)是(shì)需求方就(jiù)變得(de)十分(f©₹×ēn)強勢，且結果不(bù)一(yī)定好(h≈γ↔ǎo)。因為(wèi)你(nǐ)給不(bù)出任何專業(yè)的(de)£∞♠建議(yì)，那(nà)麽，産品團隊不(bù)以視(shì)覺Ω¶§¥出發的(de)參考就(jiù)成了(le)一(yī)大(dà)問(wβ¥↕αèn)題。最後，問(wèn)題都(dōu)卡在設計(jì)師(shī)這(zh≤ δè)邊。所謂做(zuò)不(bù)出該有(yǒu)的(de)感覺。
第1步：指出設計(jì)師(shī)覺得(de)€¥≥較好(hǎo)的(de)風(fēng)格，并共同討(tǎo)論
可(kě)能(néng)會(huì)出現(xi₩φ•àn)下(xià)面這(zhè)種半成品，α<不(bù)需要(yào)多(duō)少(shǎo)細節性的(de)東(dō₩©ng)西(xī)。隻是(shì)根據上(sh÷♣γ₹àng)面自(zì)己提出的(de)參考≠≥♠ 方案得(de)出的(de)視(shì)覺稿。
當然，需求方的(de)需求僅僅是(s♥♣→ hì)做(zuò)個(gè)首頁，有(yǒu)圖片Ω→輪換、導航和(hé)頁腳，即産品介紹圖片就(jiù)可(kě)以。其餘像我們的↔↓¶♦(de)優勢和(hé)真實案例都(dōu)是(shì)設計(jì) ®師(shī)根據自(zì)己的(de)體(t©☆↑ǐ)驗和(hé)相(xiàng)關頁的(de)參考後提出的(d≈✔σ♦e)新亮(liàng)點。
确實這(zhè)是(shì)種好(hǎo)辦法，能(nén&₹β"g)多(duō)為(wèi)需求方多(duō)想§✔點，他(tā)們才覺得(de)你(nǐ)專業(yè≤")。未來(lái)溝通(tōng)起來(l✔λλ×ái)的(de)成本就(jiù)小(xiǎo)了(le)許多(du€×ō)。
第2步：确定大(dà)緻風(fēng< δ)格後，細化(huà)主要(yào)部件(jiàn)→≈
其實這(zhè)部分(fēn)是(shì)最↑λ↑麻煩的(de)部分(fēn)。就(jiù)像老(lǎo)師(shī)說(♥ shuō)，大(dà)家(jiā)都(dōu)覺得(₩∑≤ de)做(zuò)動畫(huà)很(hěn)帥。其實真正創意部分<∞(fēn)就(jiù)前面就(jiù)那(nà)一(yī)小(xiǎo₹∑↕)點，更多(duō)的(de)是(shì)如(rú)工(gōng) φ₹≥匠(jiàng)般的(de)打磨餘下(xià)繁瑣<ε™的(de)機(jī)械工(gōng)序。不≤¶(bù)能(néng)偷懶。就(jiù)是(shì)一(yī)™'™點點磨
确定完一(yī)道(dào)工(gōng)序，再進入下(xi≤♦®à)一(yī)個(gè)環節。這(zhè)個(gè)很(hěn)重要(yào)δλ，不(bù)然很(hěn)多(duō)辛辛苦苦做(zuò)的(®∏de)東(dōng)西(xī)就(jiù)容易有(yǒu)全盤否定的(de)¥←β可(kě)能(néng)。
随後，就(jiù)完成餘下(xià)部分(fēn)π₹§的(de)設定工(gōng)作(zuò)。基本采用(yòng)Ω♣ 的(de)還(hái)是(shì)拟物(wù)的(de×♠)手段，核心功能(néng)按鈕固定位置αφ。背景采用(yòng)相(xiàng)關的(de)♦∑配圖。
第3步：統一(yī)成扁平化(huà)的(de)風(fēng)格
為(wèi)什(shén)麽要(yào)扁平化(huà)。因為(wèi♣•)團隊討(tǎo)論中發現(xiàn)，那(nà)個(gè)'$羅馬柱和(hé)強效廣告都(dōu)顯得(de)很(hěn)奇怪。确實，實物(φ∑wù)的(de)造型在光(guāng)感，質感和(hé)形狀方面，©≤如(rú)果不(bù)進行(xíng)統一(yī)的(←¶de)實景拍(pāi)攝，整體(tǐ)有(yǒu)可(kě)能☆≈€×(néng)顯得(de)亂。硬要(yào)結合在一(yī)起的(de)®σσ®時(shí)候，也(yě)需要(yào)相(xiàng)當多(←♦>duō)的(de)時(shí)間(jiān)統一(yī)細節。
那(nà)麽，轉換思路(lù)。主要(yào)也(yě)是(shì)大→γ&(dà)部分(fēn)內(nèi)頁的(de)視(shì)覺偏α∏™£向于扁平，此時(shí)，轉換成扁平也(yě)算(suàn)是(shì±π)統一(yī)的(de)步驟之一(yī)。
扁平不(bù)意味著(zhe)簡單處理(lǐ)↕ ，越簡單的(de)東(dōng)西(xī)，不(bù)能(néng)以準确的¥•(de)方式呈現(xiàn)。就(jiù)顯β♦得(de)很(hěn)粗糙，讓每個(gè)©÷≥扁平的(de)圖形都(dōu)能(néng)以主題關∞σ聯才是(shì)最難的(de)東(dōng)西(xī)。
産品介紹
為(wèi)什(shén)麽是(shì)扁平的(de)Ω↑←風(fēng)格，也(yě)是(shì)從(cóng≥↕)這(zhè)頁開(kāi)始。差異化(huà)是(shì)思考的(d♣e)重點，當大(dà)部分(fēn)頁面雖然也(yě)&©∑是(shì)扁平化(huà)，不(bù)過更多(duō)是(shì)以單色α的(de)形式出現(xiàn)，彩色很(hěn)多(duō)"用(yòng)在移動設備中。而在網頁中，彩色的(de)部分(fēn)很(hěn∑)多(duō)還(hái)是(shì)采用(yòng)拟•∞'↓物(wù)化(huà)的(de)手段。
所以，核心的(de)功能(néng)扁平+彩色。
