正文

分享頁面設計（分享頁面設計方案）

發(fā)布時間：2023-03-08 22:14:36 稿源：創(chuàng)意嶺閱讀： 928 問大家

大家好！今天讓創(chuàng)意嶺的小編來大家介紹下關于分享頁面設計的問題，以下是小編對此問題的歸納整理，讓我們一起來看看吧。

創(chuàng)意嶺作為行業(yè)內優(yōu)秀的企業(yè)，服務客戶遍布全球各地，相關業(yè)務請撥打電話：175-8598-2043，或添加微信：1454722008

本文目錄:

1、怎么樣設計網頁
2、h5頁面設計是什么意思
3、流量引導的頁面設計：視頻列表頁和視頻詳情頁實例
4、文字排版對頁面設計有哪些作用?

分享頁面設計（分享頁面設計方案）

一、怎么樣設計網頁

網頁設計必須首先明確設計站點的目的和用戶的需求，從而做出切實可行的設計方案。

專業(yè)的網頁設計，需要經歷以下幾個階段：

1、需要根據(jù)消費者的需求、市場的狀況、企業(yè)自身的情況等進行綜合分析，從而建立起營銷模型。

2、以業(yè)務目標為中心進行功能策劃，制作出欄目結構關系圖。

3、以滿足用戶體驗設計為目標，使用axure rp或同類軟件進行頁面策劃，制作出交互用例。

4、以頁面精美化設計為目標，使用PS、AI等軟件，調整，使用更合理的顏色、字體、圖片、樣式進行頁面設計美化。

5、根據(jù)用戶反饋，進行頁面設計調整，以達到最優(yōu)效果。

分享頁面設計（分享頁面設計方案）

擴展資料

在進行網站制作前，首先要進行網站頁面的整體設計。一個網站是由若干個網頁構成的，網頁是用戶訪問網站的界面。因此，通常意義上的網站設計，即指的是網站中各個頁面的設計。而網頁設計中，最先提到的就是網頁的布局。布局是否合理、美觀，將直接影響到用戶的閱讀體驗及訪問時間。

在互聯(lián)網高速發(fā)展的今天，網絡已成為人們生活的一部分，成為人們獲取信息資源的重要途徑。信息的呈現(xiàn)離不開網頁這個重要的界面，網頁的主要作用是將用戶需要的信息與資源采用一定的手段進行組織，通過網絡呈現(xiàn)給用戶。

二、h5頁面設計是什么意思

H5是指第5代HTML，也指用H5語言制作的一切數(shù)字產品。所謂HTML是“超文本標記語言”的英文縮寫。我們上網所看到網頁，多數(shù)都是由HTML寫成的?！俺谋尽笔侵疙撁鎯瓤梢园瑘D片、鏈接，甚至音樂、程序等非文字元素。而“標記”指的是這些超文本必須由包含屬性的開頭與結尾標志來標記。瀏覽器通過解碼HTML，就可以把網頁內容顯示出來，它也構成了互聯(lián)網興起的基礎。

HTML的第一版1991年開始研發(fā)，1993年發(fā)布。本來每隔一段時間HTML都應該進行更新，但是自1999年12月HTML4.01發(fā)布以來，就再也沒有更新。此后的十多年，互聯(lián)網行業(yè)發(fā)生了翻天覆地的變化，人們逐漸意識到原有的HTML已經不能適應互聯(lián)網的發(fā)展了。這時出現(xiàn)了兩個組織分別提出了新的方案：WHATWG和W3C。前者開發(fā)了Web Applications 1.0，后者則開發(fā)了XHTML2.0。在2006 年，雙方決定進行合作，來創(chuàng)建新一代的HTML，這就是H5。

H5在2008年發(fā)布草案以來，并未引起廣泛關注，而是進入了長期的迭代優(yōu)化周期。直到去年10月W3C終于宣布，經過長達8年的努力，HTML5標準規(guī)范最終制定完成并向全世界開放。H5標準規(guī)范的開放注定成為一個劃時代意義的事件，H5工具也漸露光芒，比如能可視化制作，不需要寫代碼的H5制作工具互動大師就受到了各方的關注。

H5之所以能引發(fā)如此廣泛的效應，根本在于它不再只是一種標記語言，它為下一代互聯(lián)網提供了全新的框架和平臺，像H5工具互動大師提供免插件的音視頻、圖像動畫、本地存儲以及更多酷炫而且重要的功能，并使這些應用標準化和開放化，從而使互聯(lián)網也能夠輕松實現(xiàn)類似桌面的應用體驗。

H5的最顯著的優(yōu)勢在于跨平臺性：比如用互動大師搭建的站點與應用可以兼容PC端與移動端、Windows與Linux、安卓與IOS。它可以輕易地移植到各種不同的開放平臺、應用平臺上，打破各自為政的局面。這種強大的兼容性可以顯著地降低開發(fā)與運營成本，可以讓企業(yè)特別是創(chuàng)業(yè)者獲得更多的發(fā)展機遇。

此外，H5的本地存儲特性也給使用者帶來了更多便利；基于H5開發(fā)的輕應用比本地APP擁有更短的啟動時間，更快的聯(lián)網速度，而且無需下載占用存儲空間，特別適合手機等移動媒體。而互動大師讓開發(fā)者無需依賴第三方瀏覽器插件即可創(chuàng)建高級圖形、版式、動畫以及過渡效果，這也使得用戶用較少的流量就可以欣賞到炫酷的視覺聽覺效果。

三、流量引導的頁面設計：視頻列表頁和視頻詳情頁實例

最近在考慮一個問題，如何從主app里合理地引導流量到自己的子功能，主要是兩種手段：

（1）設置合理的功能入口

（2）在用戶正常的使用路徑上增加引導功能

在考慮過程中，參考了大量app的頁面設計，發(fā)現(xiàn)不同視頻app的設計各有千秋，遂總結如下。

微博視頻是微博app中的視頻功能，僅對核心功能進行分析。

視頻消息的格式和其它微博消息的格式相同，描述區(qū)、常規(guī)操作區(qū)的交互與其它消息類型保持一致，因此針對視頻類型的個性化功能，僅有視頻區(qū)是可發(fā)揮空間

猜想，視頻類型有以下特點：

（1）視頻類型需要全屏播放

（2）同一個上傳用戶的視頻類型不會太多

（3）視頻有分發(fā)訴求：用戶看文字、看圖片，往往有強烈的人格訴求，即只看某些博主發(fā)布的，但是看視頻更高的為內容訴求，有在不同博主的作品間瀏覽的訴求

針對視頻類型的以上特點，微博設計了一個巧妙的視頻詳情頁。

視頻詳情頁暫且分為沉浸狀態(tài)和高亮狀態(tài)。

首次進入某個視頻詳情頁時，均為高亮狀態(tài)。

進入視頻頁的方法有：從微博動態(tài)列表進入，從另一個視頻詳情頁滑動切入，從全屏視頻頁退出。

高亮和沉浸狀態(tài)下，可以上下滑動切換視頻。

高亮狀態(tài)下，可以使用評論、點贊、分享功能。

這個頁面設計得很巧妙：

和傳統(tǒng)的視頻詳情頁對比，傳統(tǒng)的視頻詳情頁往往在頁面下部設計視頻列表承載分發(fā)功能。

傳統(tǒng)視頻詳情頁的推薦列表的展示效率有限，要展示全部信息，展示3條已經占用大量空間。推薦視頻列表和該頁面的其他功能爭搶空間，導致頁面越做越長，用戶不容易發(fā)現(xiàn)推薦區(qū)域，功能之間互相搶流量。無論展示幾條推薦，用戶只能點擊一次視頻，播放視頻數(shù)：展示視頻數(shù)遠小于1。

可滑動的列表用戶滑動只需要滑動即轉到另外一個視頻，跳轉到新視頻的成本比較小，比較符合用戶連續(xù)瀏覽的習慣。用戶的發(fā)現(xiàn)新視頻--瀏覽行為合二為一，播放視頻數(shù)：展示視頻數(shù)=1。雖然沒有具體數(shù)據(jù)支持，這種滑動的分發(fā)方式分發(fā)效率一定更高。

但是這種頁面也有缺點，由于沉浸模式的存在，以及滑動的過程中盡可能不要被其他操作打斷，這種設計中評論等操作的使用頻度一定會低于常規(guī)的設計。

但是微博這個頁面并非視頻類型消息的唯一入口，很多用戶會從微博動態(tài)列表瀏覽視頻，在微博動態(tài)列表進行轉評贊等操作明顯容易的多。

動態(tài)列表承載將用戶關注的內容推送給用戶，用戶對該內容進行轉評贊等操作，增加微博的互動度。

視頻列表承載將更多用戶可能感興趣的視頻推送給用戶，用戶瀏覽更多視頻，進而關注新的博主，增加微博內容的擴散度。

全屏頁的設計是為了承載視頻播放的全屏訴求，視頻列表的設計上，很多交互會與用戶習慣的全屏觀看視頻時的交互沖突，所以視頻全屏的功能不能由視頻列表頁承擔。

有一些產品會在全屏播放頁面增加滑動切換視頻的功能，結果就是屏幕左側滑動調節(jié)亮度，屏幕右側滑動調節(jié)音量，屏幕底部滑動調節(jié)進度，屏幕中間滑動切換視頻，甚至還有長按屏幕、雙擊屏幕彈出視頻列表等復雜的交互，使用起來頗為不便。

設計上比較中規(guī)中矩，故不進行詳細分析。

抖音類產品的設計均與微博視頻列表的思路類似，滑動即切換，自動播放視頻。

抖音能采用這種設計是與抖音的視頻類型分不開的。

（1）抖音幾乎全是手機錄制視頻，絕大多數(shù)為豎屏，分辨率基本全為手機分辨率，直接使用手機全屏為播放框即可

（2）抖音是短視頻，沒有調整視頻進度和屏幕亮度等需求

但是這種設計帶來的弊端也是顯而易見，這種設計會導致評論數(shù)較低，比如截圖，34w的贊數(shù)只有幾千評論。如果將評論內容外放，在視頻頁設置直接可評論的功能入口，評贊比應該會更高。抖音這種設計自有他們取舍的原因。