網頁設計執行個體:微信第三方網頁設計過程

來源:互聯網
上載者:User

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

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

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

大部分的普遍

大部分的微信第三方,和似乎都不太注重展示部分。即視覺部分,隱隱有些暴發戶的感覺。而且現在做這塊的公司似乎已經有當年做團購的景象。多,十分多,最後迷失在一片片營銷的海洋裡。

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

  • 智能導航(調用地理位置地圖介面)
  • 線上支付
  • 全景看圖(自由圖片組合)
  • 抽獎營銷活動

隨便開啟搜尋”微信 營銷 專家”,一堆類似微信第三方網站。現在很多的創業者也在做類似的項目,總之,就是很多很多公司做著類似的嘗試。當然,國內任何的領域基本都是同時存在上百個同類的項目,能真正運營下去到最後也只有3-4家而已。

自己隨便開啟其中一個網站,發現其推廣的核心點,也是如上述說的一樣,功能部分的幾乎所有的微信第三方都做著差不多的事情。如果你隨便開啟這個網頁,你覺得你會主動去聯絡他們嗎?在很多相似產品存在的情況下。

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

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

在這樣的大環境下,怎麼能夠突圍?大致瞭解後會發現,這些騰訊服務都是基於大客戶的解決方案。原因是大部區,長尾中的尾部是難以觸及的部分。就是所謂的中小商鋪。他們的訴求除了展示,更多是希望能告訴使用者他們有這項服務。這點比單純建立微信服務更重要。

 

小部分的獨特

當然上述的分析,在設計階段反而沒有想得這麼深入。都是動筆寫這篇東西時想到,聯想到最近研究生課程中談到的”設計管理原則”,還是一個相當有趣的部分,也屬於視覺設計的一部分。以前並沒有多重視,現在開始多以文章的形式將這部分思考記錄和總結起來。

當看了國外幾個APP網站,會發現其思路和我們有很大的差異。或許是國人更喜歡看到儘可能詳細的資訊,更有可能是客戶喜歡你的東西儘可能豐富。有可能只是慣性思維。至少,大部分人現在看上面和下面的網頁,估計大部分同學還是會選擇偏向於下面的案例。

類似的網站

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

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

那麼,換種模式,是不是應該讓其產品介紹變得更優雅簡潔。

當然,這或許已經和目標使用者群體產生偏離。一般越優美的東西,服務人群的基數也越小。在展示設計這塊,確實國外很多公司,尤其是小型公司做的很精到。或許不想錯過每個進入網站的使用者。就要每個頁面都保持些亮點。

  • 全屏的映像/視頻使用
  • 最簡單的文字說明
  • 展示不同的產品/操作過程

 

我們能做什嗎?

和產品團隊溝通後,覺得我們應該做的更偏向於優雅的方向。要達到這一個目的,其實他們的需求是”高大上”,設計師覺得滿眼都是淚。翻譯成我們的語言,就是優雅大氣,要到達這個目標,參考圖卻是國內些較山寨的微信第三方。

這時候,設計師應該給出自己的參考建議。如果別人給什麼,自己就做什麼。就顯得十分被動。未來團隊,主要是需求方就變得十分強勢,且結果不一定好。因為你給不出任何專業的建議,那麼,產品團隊不以視覺出發的參考就成了一大問題。最後,問題都卡在設計師這邊。所謂做不出該有的感覺。

 

第1步:指出設計師覺得較好的風格,並共同討論

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

當然,需求方的需求僅僅是做個首頁,有圖片輪換、導航和頁尾,即產品介紹圖片就可以。其餘像我們的優勢和 真實案例都是設計師根據自己的體驗和相關頁的參考後提出的新亮點。

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

 

第2步:確定大致風格後,細化主要組件

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

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

隨後,就完成餘下部分的設定工作。基本採用的還是擬物的手段,核心功能按鈕固定位置。背景採用相關的配圖。

 

第3步:統一成扁平化的風格

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

那麼,轉換思路。主要也是大部分內頁的視覺偏向於扁平,此時,轉換成扁平也算是統一的步驟之一。

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

 

產品介紹

為什麼是扁平的風格,也是從這頁開始。差異化是思考的重點,當大部分頁面雖然也是扁平化,不過更多是以單色的形式出現,彩色很多用在行動裝置中。而在網頁中,彩色的部分很多還是採用擬物化的手段。

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

 

關於我們

關於我們,剛開始PM構思時並不是這樣,ux第一版設想也不是這樣。或許這個不是最終的視覺呈現,貌似有同學說,圓圓的像TT…..我在考慮下。

 

微運網站

網址http://wy.city.qq.com/



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。