覺不覺得現在的手機網站已經變得越來越可憐了?現在的手機網頁們基本上都變成了App的附屬品,地位十分可憐。但是現在我們有工具去改變這種糟糕的狀況了,隨著mobile-first概念的深入人心,和響應設計的發展,相信未來的手機網頁將會擁有更加優秀的使用者體驗。但是別高興得太早,如果你沒有獲得使用許可,你將無法使用即將改變手機網頁的工具。

是什麼讓我們的手機網頁難以進步?使用者的使用習慣就是一大阻礙。手機網頁想獲得成功的難度就在於,你必須讓使用者擺脫在電腦上使用瀏覽器和程式形成的使用思維定式,讓使用者接受一種新的瀏覽方式。

首先得承認做手機網站吃力不討好

我們必須面對一個現實:用響應設計的方式去優化手機網頁將會花費大量的時間和成本。

當我們要面對如此多不同大小的螢幕,考慮如此多不同效能的設配,我們需要花費太多時間和成本去做不同型別的響應設計。設計者們需要考慮不同的頁面佈局,不同的互動方式,以及使用者使用不同的裝置是否有相應功能來支援網頁的流暢執行,這些都需要花費大量的時間做測試。不過這種時間和成本的花費也是不可避免的,尤其開發者們想在不同的特定裝置上不斷優化自己的網頁。其實經過這麼長的時間,完全有機會去改變這種局面,可惜的是,大公司們都耗費太多資源在這種手機網頁開發模式上,他們已經失去了改變的決心和動力。

改變困難重重

懼怕改變本來就是人類的天性之一,更何況現在面對的是一個關係到切實利益的改變,如果改變不成功,企業有可能會失去上億的市場,誰又敢輕易以身犯險?就算花費了大量的成本和人力去做響應設計,大家也沒勇氣去挑戰使用者的使用習慣——這必須和傳統的網站對使用者培養了十幾年的使用定式作鬥爭!你去隨便找一個使用者來問,他眼中的網頁是什麼樣子,他當然會告訴你那是一個960畫素寬,舒舒服服的鑲嵌進瀏覽視窗裡的頁面,可以幹許多事,有許多實用有趣的內容。而當你問他手機網頁是什麼樣子時,他大概只會想到App了……使用者會把手機網描繪成一個可憐的,有少量內容,以導航功能為主的東西。這真是一個讓人難過的現實——都是叫網頁的,手機網頁和傳統網頁差距咋就這麼大哩?!

手機網站設計“白皮書”

 

從使用者最根本的需求你改變手機網頁

我們必須腳踏實地的深入瞭解使用者的需求,才能最好的對手機網頁進行改造。這說起來簡單,但做起來是十分困難的,我們必須面對問題的本質才行。下面,我將分享我所認為的,如何改變使用者使用手機網頁習慣的方式——當然我的觀點只是一家之言,希望各位高人來一同探討。

用理性的思考去設計

開始你就必須設想你的網頁如何去吸引你的目標客戶,你必須用盡全力去研究你的目標客戶需求。如果使用者喜歡現在的手機使用方式,你要改變他們的使用習慣,讓他們拋棄眾多的App而愛上手機網頁,你必須有強大的邏輯性,你的理論必須經得起不斷的推敲,閉門造車的去想象一種模式,絕對是做開發的大忌!

你必須瞭解你現在要做的是:

1.讓使用者拋棄他們傳統的使用習慣。

2.在你切實理論和強大邏輯支援下,創造一個能讓使用者接受的新東西。

很多情況下,使用者也無法描述出他們究竟想要什麼樣的產品,但是你必須要獨立思考,去找出使用者的真實需求和問題的關鍵。

用草圖去思考!

在做一個手機網站時,首先要建立一個站點的草圖。這可以幫助團隊進行思考,研究你的理論是否可行,邏輯還有那些缺點和錯誤。在草圖上討論,並不可以代替使用者,但是這樣會幫助你更清醒的認識到自己做的網頁到底是個什麼東西。

手機網站設計“白皮書”

 

手機網站設計藍圖模板

下面是一份標準的手機網站設計步驟藍圖。在設計中,對於不同的步驟要用不同的思考方式,有的時候用獨立決策,有的地方要用發散思維和頭腦風暴。在設計中,團隊難免有意見分歧的時候,要接受這種分歧,因為這些意見的分歧往往能碰撞出很多設計的閃光點。

1.設立目標和標準。

A.建立任務的優先順序。這個直接關係到團隊的工作效率,不能把有限的資源浪費在無限的問題上,要抓住重點。

B.定義目標使用者。這個絕對是關係到生死的問題,設計必須全方位的符合自己目標使用者群的需求。

C.頭腦風暴。在建立好初始目標後,還要多即將開始的工作進行一次全員大討論,這可以發現問題,防範於未燃。

2.開始製圖。

A.隨便畫一些關於產品的故事

用簡筆畫用最直接有趣的方式把你關於產品設計的任何想法給畫出來,這也可以考察你對產品的認識和定位是否清晰。

這項內容一般人數不要求過多,2-3人可以用30分鐘的時間一邊討論一邊作圖。草圖只要和產品相關,內容可以不受任何限制。你可以設想一個故事,比如你是一個使用者,突然遇到了一個好的產品,從此拋棄了以前的舊產品。或者是使用者在使用你們設計產品時的裝置或是情境,遇到了什麼故事。這樣的草圖看似和產品不是密切相關,但是其實這是一種發散思維方式,能讓你最大化的設想出自己設計的產品到底是怎麼回事。

手機網站設計“白皮書”

 

B.確定網站的實際設計

這項內容由團隊領導2-3人完成,時間不用過長。直接畫出網站在裝置上可能顯示的草圖,一般會設計出三個版式,以適應不同的移動裝置。

手機網站設計“白皮書”

 

設計完板式後,要畫出網站內容的連線邏輯。

手機網站設計“白皮書”

 

這一部草圖不再要求任何的發散思維,一般整個草圖的定稿要有團隊領導或設計權威拍板,其他成員可以參與討論,但是最終的決策必須確定。

作圖的意義

製作草圖可以在設計時讓團隊每個人都參與近來,貢獻自己的想法,讓團隊每個成員感覺到產品是由自己親自參與設計的,加強團隊的凝聚力。而且通過草圖,讓開發者也不再是閉門造車,他將可以直接面對所有人對產品的推敲,從而發現問。通過頭腦風暴,也可以讓產品在開發過程中遇到的問題得到迅速的解決