淺談更優(yōu)雅的微信第三方設計技巧發(fā)布者：本站     時(shí)間：2021-12-31 10:12:07

最近比較忙，整理作品的速度明顯放緩了許多。今天總結些前段時(shí)間做的微信第三方網(wǎng)站。要清楚，它是網(wǎng)站不是單獨的一個(gè)網(wǎng)頁(yè)。需要考慮更多是整體性的問(wèn)題。

在拿到項目時(shí)，首先需要冷靜下來(lái)。而不是急著(zhù)去動(dòng)手，大部分同學(xué)肯定都理解了解其緣由。這邊要說(shuō)的更多是前期先看看相似對手的情況。因為視覺(jué)設計相對于產(chǎn)品功能，是最容易拉開(kāi)差異感的部分?；蛟S一套不同的視覺(jué)策略就能讓產(chǎn)品迅速脫離大部分同類(lèi)作品走出來(lái)。

大部分的普遍

大部分的微信第三方，和似乎都不太注重展示部分。即視覺(jué)部分，隱隱有些暴發(fā)戶(hù)的感覺(jué)。而且現在做這塊的公司似乎已經(jīng)有當年做團購的景象。多，十分多，最后迷失在一片片營(yíng)銷(xiāo)的海洋里。

做為設計師，先跳出來(lái)觀(guān)察下。其實(shí)我們會(huì )驚訝的發(fā)現，這些站的普遍性都是為你做個(gè)微信mini站，就是所謂的新時(shí)代營(yíng)銷(xiāo)。最核心的功能基本也是一致，如下：

智能導航(調用地理位置地圖接口)

在線(xiàn)支付

全景看圖(自由圖片組合)

抽獎營(yíng)銷(xiāo)活動(dòng)

隨便打開(kāi)搜索”微信 營(yíng)銷(xiāo) 專(zhuān)家”，一堆類(lèi)似微信第三方網(wǎng)站?，F在很多的創(chuàng )業(yè)者也在做類(lèi)似的項目，總之，就是很多很多公司做著(zhù)類(lèi)似的嘗試。當然，國內任何的領(lǐng)域基本都是同時(shí)存在上百個(gè)同類(lèi)的項目，能真正運營(yíng)下去到最后也只有3-4家而已。

自己隨便打開(kāi)其中一個(gè)站點(diǎn)，發(fā)現其推廣的核心點(diǎn)，也是如上述說(shuō)的一樣，功能部分的幾乎所有的微信第三方都做著(zhù)差不多的事情。如果你隨便打開(kāi)這個(gè)網(wǎng)頁(yè)，你覺(jué)得你會(huì )主動(dòng)去聯(lián)系他們么?在很多相似產(chǎn)品存在的情況下。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

除了外面的第三方，騰訊內部也有兩個(gè)很出色的第三方平臺，”風(fēng)鈴和微生活”。從界面上可以看出兩者還是有差異，解決的方向也是分屬不同的類(lèi)別。

風(fēng)鈴訴求展示和營(yíng)銷(xiāo)(偏向于資訊號)

微生活訴求則是移動(dòng)端的店家會(huì )員解決方案(偏向于服務(wù)號)

在這樣的大環(huán)境下，怎么能夠突圍?大致了解后會(huì )發(fā)現，這些騰訊服務(wù)都是基于大客戶(hù)的解決方案。原因是大部區，長(cháng)尾中的尾部是難以觸及的部分。就是所謂的中小商鋪。他們的訴求除了展示，更多是希望能告訴用戶(hù)他們有這項服務(wù)。這點(diǎn)比單純建立微信服務(wù)更重要。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

小部分的獨特

當然上述的分析，在設計階段反而沒(méi)有想得這么深入。都是動(dòng)筆寫(xiě)這篇東西時(shí)想到，聯(lián)想到最近研究生課程中談到的”設計管理策略”，還是一個(gè)相當有趣的部分，也屬于視覺(jué)設計的一部分。以前并沒(méi)有多重視，現在開(kāi)始多以文章的形式將這部分思考記錄和總結起來(lái)。

當看了國外幾個(gè)APP站點(diǎn)，會(huì )發(fā)現其思路和我們有很大的差異?；蛟S是國人更喜歡看到盡可能詳細的信息，更有可能是客戶(hù)喜歡你的東西盡可能豐富。有可能只是慣性思維。至少，大部分人現在看上面和下面的網(wǎng)頁(yè)，估計大部分同學(xué)還是會(huì )選擇偏向于下面的案例。

類(lèi)似的站點(diǎn)

PAPER http://www.fiftythree.com/paper

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

ANY.DO http://www.any.do/

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

那么，換種模式，是不是應該讓其產(chǎn)品介紹變得更優(yōu)雅簡(jiǎn)潔。

當然，這或許已經(jīng)和目標用戶(hù)群體產(chǎn)生偏離。一般越優(yōu)美的東西，服務(wù)人群的基數也越小。在展示設計這塊，確實(shí)國外很多公司，尤其是小型公司做的很精到?；蛟S不想錯過(guò)每個(gè)進(jìn)入網(wǎng)站的用戶(hù)。就要每個(gè)頁(yè)面都保持些亮點(diǎn)。

全屏的圖像/視頻使用

最簡(jiǎn)單的文字說(shuō)明

展示不同的產(chǎn)品/操作過(guò)程

我們能做什么?

和產(chǎn)品團隊溝通后，覺(jué)得我們應該做的更偏向于優(yōu)雅的方向。要達到這一個(gè)目的，其實(shí)他們的需求是”高大上”，設計師覺(jué)得滿(mǎn)眼都是淚。翻譯成我們的語(yǔ)言，就是優(yōu)雅大氣，要到達這個(gè)目標，參考圖卻是國內些較山寨的微信第三方。

這時(shí)候，設計師應該給出自己的參考建議。如果別人給什么，自己就做什么。就顯得十分被動(dòng)。未來(lái)團隊，主要是需求方就變得十分強勢，且結果不一定好。因為你給不出任何專(zhuān)業(yè)的建議，那么，產(chǎn)品團隊不以視覺(jué)出發(fā)的參考就成了一大問(wèn)題。最后，問(wèn)題都卡在設計師這邊。所謂做不出該有的感覺(jué)。

第1步：指出設計師覺(jué)得較好的風(fēng)格，并共同討論

可能會(huì )出現下面這種半成品，不需要多少細節性的東西。只是根據上面自己提出的參考方案得出的視覺(jué)稿。

當然，需求方的需求僅僅是做個(gè)首頁(yè)，有圖片輪換、導航和頁(yè)腳，即產(chǎn)品介紹圖片就可以。其余像我們的優(yōu)勢和 真實(shí)案例都是設計師根據自己的體驗和相關(guān)頁(yè)的參考后提出的新亮點(diǎn)。

確實(shí)這是種好辦法，能多為需求方多想點(diǎn)，他們才覺(jué)得你專(zhuān)業(yè)。未來(lái)溝通起來(lái)的成本就小了許多。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

第2步：確定大致風(fēng)格后，細化主要部件

其實(shí)這部分是最麻煩的部分。就像老師說(shuō)，大家都覺(jué)得做動(dòng)畫(huà)很帥。其實(shí)真正創(chuàng )意部分就前面就那一小點(diǎn)，更多的是如工匠般的打磨余下繁瑣的機械工序。不能偷懶。就是一點(diǎn)點(diǎn)磨

確定完一道工序，再進(jìn)入下一個(gè)環(huán)節。這個(gè)很重要，不然很多辛辛苦苦做的東西就容易有全盤(pán)否定的可能。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

隨后，就完成余下部分的設定工作?；静捎玫倪€是擬物的手段，核心功能按鈕固定位置。背景采用相關(guān)的配圖。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

第3步：統一成扁平化的風(fēng)格

為什么要扁平化。因為團隊討論中發(fā)現，那個(gè)羅馬柱和強效廣告都顯得很奇怪。確實(shí)，實(shí)物的造型在光感，質(zhì)感和形狀方面，如果不進(jìn)行統一的實(shí)景拍攝，整體有可能顯得亂。硬要結合在一起的時(shí)候，也需要相當多的時(shí)間統一細節。

那么，轉換思路。主要也是大部分內頁(yè)的視覺(jué)偏向于扁平，此時(shí)，轉換成扁平也算是統一的步驟之一。

扁平不意味著(zhù)簡(jiǎn)單處理，越簡(jiǎn)單的東西，不能以準確的方式呈現。就顯得很粗糙，讓每個(gè)扁平的圖形都能以主題關(guān)聯(lián)才是最難的東西。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

產(chǎn)品介紹

為什么是扁平的風(fēng)格，也是從這頁(yè)開(kāi)始。差異化是思考的重點(diǎn)，當大部分頁(yè)面雖然也是扁平化，不過(guò)更多是以單色的形式出現，彩色很多用在移動(dòng)設備中。而在網(wǎng)頁(yè)中，彩色的部分很多還是采用擬物化的手段。

所以，核心的功能扁平+彩色。

淺談更優(yōu)雅的微信第三方設計技巧,PS教程,

關(guān)于我們

關(guān)于我們，剛開(kāi)始PM構思時(shí)并不是這樣，ux第一版設想也不是這樣?；蛟S這個(gè)不是最終的視覺(jué)呈現，貌似有同學(xué)說(shuō)，圓圓的像TT…..我在考慮下。