朋友網手機客戶端下載頁面設計分享

　　朋友網手機客戶端下載頁面設計分享

　　先讓我們來看看一些簡單的數據：

　　據谷歌發布的報告顯示，

　　① 97%的中國城市已擁有手機，其中35%擁有智能手機;

　　② 在電視與智能手機兩者之間，50%的受訪者表示寧願放棄電視而非智能手機;

　　③ 中國城市智能手機用戶隨時隨地都在使用智能手機，其中家裡(66%)，旅途中(59%)，乘坐交通工具中(52%)，餐廳(38%)及商場(30%)是使用智能手機最頻繁的地方;

　　(數據來源《中國城市智能手機數據調查報告》;http://www.dianru.com/news-56)

　　可預知在未來的互聯網領域，移動端的平台構建會逐漸成為互聯網企業的發展核心。

　　而隨著目前國內外移動設備的越來越多，用戶對於移動服務的需求也隨之增多，不論在何時何地，用戶都樂於通過手機獲取互聯網信息;

　　目前，75%中國城市智能手機用戶每周會用智能手機進行社交，正接近用傳統網絡進行社交的比例(84%)，隨著移動互聯網的發展日趨成熟，通過手持移動設備獲取互聯網信息有望在不久未來成為主流網絡接入口。

　　在現階段的網絡服務產品中，web端完整展示手機端內容，手機端濃縮web端精華，兩者是相輔相成的，在互相影響也互相促進。主流的設計流程是從 web端到手機端;而國外已經有部分產品開始嘗試倒序設計，優先考慮手機端，而後根據手機端功能進行延伸與擴展到web端，我相信，這同樣是未來網絡服務產品設計中的一個趨勢。

　　當然，目前web端已有朋友網這個較為成熟的產品，在這個前提下，這次設計我們需要做的是，通過增強web設計來吸引用戶下載APP。

　　1 前期討論

　　在接到需求單之後，首先是從自身產品出發，結合國內外優秀的APP下載頁進行分析。

　　而後確定這次朋友網手機客戶端下載頁面的幾個關鍵點，分別是：輕量輕薄、頁面空間感、浏覽舒適度。

　　1.1 輕薄輕量

　　在字面意思上，輕薄輕量歸根到底就是一個字“少”;

　　在對文案、畫面等元素進行精簡提煉，保證浏覽者對於頁面以及客戶端有足夠的認知，同時在細節上做功夫，才能做到“少即是多”的效果;不失用戶認知而完整表達，是我們對於這次頁面設計中“輕薄輕量”的定義;

　　1.2 頁面空間感

　　其實在頁面中對於信息的浏覽，與在現實圖書館中的浏覽狀態大同小異;

　　沒有誰會喜歡約束在狹小的空間裡浏覽信息，而我們盡可能地提供透氣舒適的頁面空間感給用戶，才能保證用戶願意在這個頁面停留多一些時間，因為起碼這裡不算太擁擠。

　　這一塊我們主要是針對頁面設計元素的處理，不需要太多的素材堆積，把握住最能表達客戶端功能特點的核心內容。

　　1.3 浏覽舒適度

　　用戶在頁面中對文字信息的浏覽就像使用電腦，而過多的文案信息就像電腦系統中無用的沉積文件，會影響浏覽速度與理解的;

　　關於文案信息的浏覽，我們對於舒適度的定義是：快速浏覽文案信息，輕易獲取文案主旨;所以對於文案反復討論，一減再簡，在保證信息表達完整的情況下，盡可能地用一兩句話去描述朋友網手機客戶端的功能。

　　2 設計過程

　　我們覺得，設計，是要找到一個大多數人認可同時視覺美觀的臨界點;

　　而設計的過程則是一個從無到有，從有到優的一個更新迭代的過程。

　　2.1 這個頁面的設計過程是曲折的

　　這張圖的4個方案，代表著設計過程中的四個階段，從傳統的頁面設計到打破框架力求簡單化，再到生活情感畫，以及最後的確認定稿;

　　這是一個探索與進步的過程，雖然有些曲折，但是通過期間的反復討論，不斷推倒已有的設計並重新構思，最終我們所設想的方向是對的，大家只是想做出更好的頁面設計。

　　針對產品與設計本身，我們最基本的願望是希望當用戶看到這個頁面時，不至於說太難看。

　　當然我們也相信可以做得更好。

　　2.2 我們在設計中的堅持

　　前後一共出了4版設計方案。在不斷的優化設計中，也在持續優化提煉設計中的元素;但是最基本的堅持底線是保證頁面的輕量輕薄、頁面空間感與浏覽舒適度。

　　這個是在前期討論中定下的關鍵點，在頁面設計的整個過程中，每一個版本的設計中心要點都在下一版中得到保留並優化;無論是做了刪簡還是做了延伸，都將最初的三個關鍵點定為頁面設計中最基本的堅持。

　　2.3 最後的定稿

　　在經歷長期的工作後，反而是到最後階段是最要求細心的。

　　在大的頁面風格與畫面元素已經定下來的前提下，接下來的工作是對細節的推敲;從按鈕的顏色漸變到文案的標點符號都反復推敲。並非說是說盲目的去扣細節，而是不希望在這細節處犯錯，所以在文案的調整，怎麼做到最精簡的文案而又利於用戶理解，這是我們最後的設計工作中主要部分。

　　3設計要點回顧

　　3.1 模擬用戶場景

　　戶外餐廳、隨走隨拍地逛街、結伴同行、咖啡館、屋頂上的聊天;

　　這些在日常生活中常見的場景，其實也是我們對朋友網手機客戶端用戶的情景定位;而用戶在相應場的場景中，對客戶端的功能使用也被我們涵括到了畫面中;

　　比如和閨蜜在逛街的時候，自拍的照片可以立刻通過朋友網分享給好友;而大家結伴同行，希望你樂於通過朋友網分享你們的快樂;我們希望通過模擬使用場景，對用戶進行情感定位。

　　3.2 情景化物品輔助

　　打招呼、照相機、紙飛機、咖啡杯、紙杯飲料;

　　畫面代表著客戶端使用場景，而畫面裡的輔助物品則包含了場景寓意與客戶端功能的兩層含義，烘托場景主題，輔助客戶端功能這是我們對加入這些情景化物品的初衷。

　　就好像“面對面的聊天，或許你們需要兩杯飲料解解口渴，因為在朋友網聊天就是這麼直接，所以需要聊的太多了。”這是我們想傳達給用戶的一個信號，想讓用戶知道，朋友網手機客戶端其實真的很有意思。

　　3.3 文案一減再簡

　　抓住主題，把最想表達的內容最大限度地突出，減少不必要的視覺干擾。文案不需要太多，太多文案反而因為閱讀困難而抓不住主旨。所以我們強調浏覽舒適度，就是把文案不斷地精簡提煉。力求讓用戶在最短時間裡聽到我們想說的話。

　　4 總結陳詞

　　初稿和最終稿是不一樣的，期間不斷調整優化，大到頁面風格畫面元素，小到標點符號背景透明度。

　　雖然最後做出了相對滿意的設計成果，但是還是有一些問題不能含糊過去的，比如畫面多處陰影的整體感覺，輔助物體的處理，背景與主題的融合度等等設計上的問題沒有得到完善處理。而在後續我們已經在逐步在調整與優化，雖然只是細微處的調整，但是大家真的有用心在做這個東西。

　　文章來源：騰訊ISUX