朋友網手機客戶端下載頁面的設計分享(圖文)

2024-08-30 08:34:40

字體：大中小

來源：轉載

供稿：網友

　　先讓我們來看看一些簡單的數據：
朋友網手機客戶端下載頁面設計分享三聯教程

　　據谷歌發布的報告顯示，
　?、?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

上一篇：5個步驟實現響應式Web設計方法與瀑布模式說”再見”(圖文教程)

下一篇：25個CSS框架、工具、軟件及樣板分享