02 youtube官網網頁版設置密碼登錄界面設計(app設計中，常用的界面布局方式有哪些？)

錄頁面包含導航元素（我想到的是DoorDash），但要盡量減少這些元素。其中包括有趣的視覺效果。你不想用文字填滿你的頁面，但你需要以某種方式讓它有吸引力。高質量的圖片是提高用戶對服務興趣的好方法。如果你可以加入視頻，就可以獲得額外積分。包括社會證明。你有沒有收到任何積極的反饋？不要羞于在你的登錄頁面上分享。人類是社會生物。如果你的訪客看到其他人推薦你提供的服務，他們更有可能感興趣。使其具有互動性（如果合適）。讓訪問者與你的網站互動是提高他們興趣的有效方法。測驗、移動酒吧和迷你游戲都是鼓勵游客點擊的好方法。不過，要確保任何互動元素都與你提供的內容相關。否則，你可能會惹惱訪客。了解你的聽眾。你提供什么？它優雅嗎？精力充沛的時髦的？游戲雜志可能會受益于瀏覽器內的迷你游戲。蠟燭店可以有一個小問卷，幫助游客找到理想的蠟燭。從字體到背景色的一切都應該吸引你的目標受眾。

方法1_使用可濕性粉劑頁面生成器

在開始之前，我們需要弄清楚WordPress和。買粉絲和WordPress。組織。

WordPress。org是一個用于創建和管理網站的開源平臺。你可能聽說過大約三分之一的網站是在WordPress上運行的。完全正確。

使用WordPress。org，你需要一個網絡托管提供商和一個域名。但別擔心——這聽起來比實際情況更復雜。

WordPress。買粉絲是WordPress的一個版本，它有自己的主機。與WordPress相比。org，它更像一個傳統的網站建設者。這意味著它更容易管理，但也更有限。

讓我們先用WordPress創建一個登錄頁。組織。如果你只對使用WordPress感興趣。買粉絲，你可以跳到前面。

步驟#1：為自己準備一些主機

在開始之前，你需要一個主機提供商，在那里你可以安裝WordPress和頁面生成器。如果你已經在你的主要網站或網上商店使用了一個，堅持使用它；沒有理由把事情復雜化。如果你還沒有主機提供商，我建議你閱讀我們對2022年最佳主機提供商的評論。

安裝WordPress的過程會因供應商而異，但對于任何應用程序來說都不會太復雜。我和霍廷格一起去翻頁。Hostinger有專門的WordPress托管計劃，所以我所要做的就是創建一個帳戶，并按照自動安裝程序上的說明進行操作。

如果你已經下載了。zip文件，你只需上傳即可。否則，您可以在“搜索插件”欄上搜索首選的生成器，然后單擊“立即安裝”按鈕。

I使用Elementor作為我的登錄頁，但無論頁面生成器如何，步驟都非常相似。如果你不知道該使用哪種生成器，你可以看看下面我的一些最愛。

P無論你選擇哪一個建設者，在開始之前先玩一下。觀看YouTube教程、創建模擬頁面等。在深入研究之前，您希望熟悉構建器的界面和功能。

步驟#3：畫出你的頁面

如果你不清楚你想要什么，你很容易就會得到一個凌亂的登錄頁面，不知道如何修復它。這就是為什么制定計劃很重要。

從制作登錄頁的模型開始。這部分沒有規定。你可以在Photoshop、MSPaint中進行設計，也可以在餐巾紙上繪制。唯一重要的是它足夠清晰，可以使用。

如果你不知道從哪里開始，你可以在你的小眾網站上找到一些很棒的登陸頁面。想想你的品牌、風格，以及你對誰有吸引力。

在本例中，我決定為一家基于訂閱的書店設計一個登錄頁，每月發送個性化建議。除了基礎知識，我還選擇了一個測驗，向用戶推薦新書。

第4步：選擇完美的模板

所以，你已經選擇了一個托管提供商，你已經安裝了WordPress，你已經啟動并運行了你的頁面生成器。你準備好開始有趣的部分了吧？差不多了。你仍然需要選擇一個模板。當然，你可以從一個空白頁面開始，然后從那里開始構建，但是你需要做的大量微小的設計決定——比如字體、顏色、動畫和背景設計——可能會讓你感到驚訝。現有的模板越符合你的理想設計，你就越不需要為實現你的愿景而努力。

WordPress。org有大量模板可供選擇。您的頁面生成器可能還內置了多種選項。如果你感到不知所措，我們列出的2022年最佳登錄頁面模板會有所幫助。

I從Elementor的在線生活教練主題開始。盡管我把它改編成了一個不同的目的（問任何人，我無法告訴你如何生活），但它優雅的字體和整齊排列的元素給了我一個很好的起點。

第5步：定制你的頁面

定制登錄頁面的具體過程對每個人來說都是不同的。就我個人而言，我喜歡從一般的方面開始，然后深入到具體的方面。

要使用Elementor進行編輯，只需轉到WordPress儀表板，創建一個新頁面，然后選擇“使用Elementor編輯”您將看到一個包含各種小部件選項的菜單。點擊左上角的漢堡菜單（這是三條水平線），然后點擊“站點設置”在這里，您可以自定義頁面更一般的方面，如全局字體、背景色等。

無論哪種方式，您都可以簡單地將任何小部件拖放到希望它出現在頁面上的位置。然后你可以點擊你的小部件來打開小部件菜單。根據小部件的不同，您可以自定義顏色、邊框甚至動畫等內容。

對于我自己的頁面，我從cha開始

app設計中，常用的界面布局方式有哪些？

您已經對如何使用網格有了基本的了解，您可能想知道如何將其應用于您在網絡上看到的布局。響應式網格是一種系統地調整您的設計，分配命令，建立層次結構和“邏輯”設計的方法。它使事情看起來不那么浮動，您通常可以分辨出誰在使用網格以及誰沒有使用網格。隨著人們成為更好的設計師，他們的眼睛不斷在各處繪制水平和垂直線，以創建這種順序和對齊方式。

在該注釋上，我經常會遇到諸如“等等，粘性面板如何在網格布局中工作?”之類的問題。或“您對端到端的Web應用程序做什么?”我們將研究響應式網格的一些應用程序，以及它們如何按比例縮小到移動設備。更重要的是，我想教您如何混合和匹配布局以適應您的設計需求。

如果不確定如何在響應式設計中使用網格，請閱讀第一部分：響應式網格以及如何實際使用它們。還是順其自然，一切都很好。

免責聲明：我不在這些公司中任職，也不知道他們如何建立自己的網格。這純粹是一個學習練習，我僅以這些網站為例。

單列布局

又名全頁布局。這是最簡單的布局，用于登錄頁面。您有足夠的空間來顯示大圖像，以創建可增強您的產品或品牌的聲明。一欄式布局中的事物充當單獨的模塊，并且易于在移動設備上擴展，因為事物已經按照您希望它們顯示的順序進行了堆疊。因為它在激發情緒方面非常強大，所以這是主頁，簡介，操作指南或新產品等的通用布局。即使在模塊中，也有可能將事物分成不同的網格列，整體而言正在利用12列作為主要內容。

網格使用

您可以清楚地看到，WeWork在其設計中使用了網格，因為盡管每一行都劃分了所有內容，但它們仍然排列在一起。一個簡單的贈品是元素之間的填充量是一致的(在4張卡片和兩個客戶成功案例之間)，并且外部邊緣的寬度相同，這使此設計非常令人賞心悅目。我也喜歡這個示例，因為它表明您仍然可以在執行基于行的模塊的同時以有趣的方式分解頁面。

例子

這是一列布局的其他一些示例。請注意，父元素內的元素可能如何劃分為不同的列，但整個父元素位于一個主容器下。

兩列布局

這可能是最常見的布局之一，只是因為您不希望文本的寬度超過6_8列。另一個好處是您可以將其他元素置于折疊上方，并使用此側欄進行導航，廣告，號召性用語，類似清單等。您應將8欄用作主要內容，并將4欄用作側面內容。這樣，您的兩面都是偶數，如果需要，您可以將主要內容切成兩半，以很好地并排顯示內容。

“但是等等，有8列?然后我的設計空間就大大減少了!”你可能會說。在網絡上，切勿讓文本使用全部12列。這是一個基本的排版原則，舒適的閱讀寬度在16px處約為60_80個字符，而在桌面上恰好不超過8列。其實8列是真正推動它，因為你必須要考慮那些誰使用了大量的桌面，所以我不會設計的東西多比。即使在單列主頁布局中，內容也居中并具有最大寬度。因此，“更少的空間”確實是沒有問題的，甚至可以使您的設計更好。

這種布局用途廣泛，適用于網站的內頁，例如，當您有大量文本要閱讀時。一些頁面示例是博客，說明，常見問題解答，操作方法，您希望在其中使導航或其他方便用戶使用的內容。

移動

三列布局

由于您要處理三列，因此您可以選擇如何分配它們。讓我們先來看一個簡單的示例-均勻的4_4_4分布。

4_4_4分布

當您需要發布大量圖像時，這對于布局很有用。如果設計將不使用最大寬度，則可以由您選擇。我在下面顯示了兩個示例。

分布不均(3_6_3)

分布不均勻是一種布局，用于當您擁有可以處理較長內容的產品時，您還希望突出顯示用戶可以做的其他事情。當主要內容不需要很多水平空間時，這是最合適的。

這是Dribble設計工作板上3_6_3布局的示例。紫色輪廓指示內容位于網格上的位置，紫色塊指示它們為元素提供的其他填充。我非常喜歡這個示例，因為它提醒您可以按自己的喜好分解頁面。在這里，標題和大號的CTA是一個模塊，用作三列之前的標題語句。但是，如果仔細看，它實際上仍在中間的6列之內。

就像兩列布局一樣，您需要決定如何顯示內容，而這取決于信息的重要性。使用相同的Dribbble示例，在平板電腦上，左面板完全消失。在移動設備上，右側面板會塞入過濾器按鈕。單擊過濾器按鈕可展開該部分并將內容推入下面。僅出于理論上的考慮，如果左側是導航，則可以將其堆疊在主要內容的頂部，放在抽屜中，嘗試水平滾動的錨點，或者創建帶有導航元素的粘性頁腳。

Dribble的3列布局更改為平板電腦上的2列(左)。在移動設備上，右側面板會塞入過濾器按鈕(中間)。單擊過濾器按鈕可展開該部分，并將內容推入下方(右)。

分布不均(2_5_3)

Facebook和Twitter使用這種布局，其中主要內容是供稿的長滾動區域。您可能會注意到左側和右側的列數不均。他們的左側面板是導航欄，右側是一列較寬的欄，其中包含生日，精彩集錦，提醒和趨勢等雜項。

如果您回想起我以前的文章，則12列是臺式機上最基本和最標準的列，但這并不意味著您需要使用它。不同的頁面可能需要不同的網格設置，具體取決于您的產品。在這里，布局之所以有用，是因為提要不需要太寬，而且分布不均勻也使提要具有層次結構和注意力。

粘板

粘性面板是指您的區域具有粘性，或者在用戶向下滾動頁面時“跟隨”用戶。粘性面板中的信息可以是靜態的，例如帶有號召性用語的警告消息，也可以是動態面板，該面板會在您更改信息時進行更新。布局本身與兩列布局相同，但粘性內容要短得多。它之所以非常有效，是因為它可用于反映用戶在非粘性方面所做的事情，并始終吸引號召性用語。使號召性用語保持一致很重要，因為它可以提醒用戶下一步應該做什么，從而增加轉化次數。與滾動兩列布局相比，當您要突出顯示用戶可以執行的單個操作時，最好使用粘性列，而對于多個操作則最好使用不粘滯。

如果使用網格系統進行設計，則面板應位于網格內部。在臺式機上，面板將占用外部3或4列。其余的，無論是右側還是左側，將是滾動的8列或9列。

重要：如果您決定設計粘性面板，則

很赞哦!（19168）