網(wǎng)頁設(shè)計過程思考:更優(yōu)雅的微信第三方設(shè)計

2013-11-13    藍(lán)藍(lán)設(shè)計的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(   sillybuy.com  )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供有效的   BS界面設(shè)計 、 cs界面設(shè)計 、  ipad界面設(shè)計   、  包裝設(shè)計 、  圖標(biāo)定制 、  用戶體驗 、交互設(shè)計、   網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

來源:http://www.uisdc.com/100-things-you-should-know-about-design

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中,   請點這里

更優(yōu)雅的微信第三方設(shè)計

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

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

 

大部分的普遍

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

做為設(shè)計師,先跳出來觀察下。其實我們會驚訝的發(fā)現(xiàn),這些站的普遍性都是為你做個微信mini站,就是所謂的新時代營銷。最核心的功能基本也是一致,如下:

  • 智能導(dǎo)航(調(diào)用地理位置地圖接口)
  • 在線支付
  • 全景看圖(自由圖片組合)
  • 抽獎營銷活動

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

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

更優(yōu)雅的微信第三方設(shè)計

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

  • 風(fēng)鈴訴求展示和營銷(偏向于資訊號)
  • 微生活訴求則是移動端的店家會員解決方案(偏向于服務(wù)號)

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

更優(yōu)雅的微信第三方設(shè)計更優(yōu)雅的微信第三方設(shè)計

 

小部分的獨特

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

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

類似的站點

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

更優(yōu)雅的微信第三方設(shè)計

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


更優(yōu)雅的微信第三方設(shè)計

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

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

  • 全屏的圖像/視頻使用
  • 最簡單的文字說明
  • 展示不同的產(chǎn)品/操作過程

 

我們能做什么?

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

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

 

第1步:指出設(shè)計師覺得較好的風(fēng)格,并共同討論

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

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

確實這是種好辦法,能多為需求方多想點,他們才覺得你專業(yè)。未來溝通起來的成本就小了許多。

更優(yōu)雅的微信第三方設(shè)計

 

第2步:確定大致風(fēng)格后,細(xì)化主要部件

其實這部分是最麻煩的部分。就像老師說,大家都覺得做動畫很帥。其實真正創(chuàng)意部分就前面就那一小點,更多的是如工匠般的打磨余下繁瑣的機(jī)械工序。不能偷懶。就是一點點磨

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

更優(yōu)雅的微信第三方設(shè)計

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


更優(yōu)雅的微信第三方設(shè)計更優(yōu)雅的微信第三方設(shè)計

 

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

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

那么,轉(zhuǎn)換思路。主要也是大部分內(nèi)頁的視覺偏向于扁平,此時,轉(zhuǎn)換成扁平也算是統(tǒng)一的步驟之一。

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

更優(yōu)雅的微信第三方設(shè)計更優(yōu)雅的微信第三方設(shè)計更優(yōu)雅的微信第三方設(shè)計

 

產(chǎn)品介紹

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

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

更優(yōu)雅的微信第三方設(shè)計

 

關(guān)于我們

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

更優(yōu)雅的微信第三方設(shè)計

分享本文至:

日歷

鏈接

個人資料

存檔