文章目錄

前言
一、我真的需要一個登錄頁面嗎？
- 1.1、用戶眼中不確定持續使用的系統
- 1.2、免登陸實現的功能可以滿足用戶需求
二、舉個移動端登陸例子
三、前端學習不是造火箭
四、前端的布局設計
五、PC 端遷移到移動端的問題與挑戰
- 5.1、手機屏幕的展示方式
- - 5.1.1、尺寸更小、寬度更窄
  - 5.1.2、頁面的內容更大
  - 5.1.3、滾動實現的內容更長
  - 5.1.4、適應用戶的“短耐心”
- 5.2、用戶與設備的控件交互差異
- - 5.2.1、拇指操控
  - 5.2.2、特殊樣式
- 5.3、編碼
- - 5.3.1、form 標簽
  - 5.3.2、label 標簽
  - 5.3.3、button 標簽
- 5.4、兼容性
六、充滿陷阱的輸入框
- 6.1、輸入框太多
- 6.2、focus 后效果不佳
- 6.3、錯誤提示不可見
- 6.4、強制重復輸入
- 6.5、保存已填項
- 6.6、預覽確認
- 6.7、input 不僅僅是個輸入框
- - 6.7.1、屬性
  - 6.7.2、樣式
  - 6.7.3、自帶檢查
六、“云層之下”-代碼的邏輯流程
- 6.1、性能檢查
- 6.2、頁面打開流程
- 6.3、資源請求
- - 6.3.1、請求數量
  - 6.3.2、請求時間
- 6.4、瀏覽器渲染
- 6.6、開始瀏覽、交互
- 6.7、后續行為
總結
- 對于頁面布局
- 對于設計編碼
- 對于結構流程
- 程序員的目標

前言

作為開發工程師與產品經理，我們需要站在產品本身與用戶的角度對系統進行設計與思考，而非僅僅是為了滿足某一項“迫切”的功能。如何才能使產品、程序員和用戶都對 H5 頁面滿意？本文我們將從登陸頁面開始，體會移動端開發的典型特征。

在這里插入圖片描述

一、我真的需要一個登錄頁面嗎？

登錄注冊頁面是絕大多數系統的門面擔當，是用戶看到和使用當前系統的第一個頁面，無論對于產品經理還是前端設計的工程師，這是我們必須要打贏的第一場戰爭。然而在前期需求的考察中與設計應用之前，我們需要思考：這個系統真的需要一個登錄頁面嗎？ 那我們就需要進行更深層次的思考。

1.1、用戶眼中不確定持續使用的系統

在不確定是否會后期持續使用某個系統之前，作為用戶本身是不愿意去進行注冊與登錄操作的。

雖然現在信息的透明度很高，每個人幾乎是“穿著褲衩在互聯網上奔跑”，然而隨著個人隱私信息保護的逐漸普及與完善，大家更加注重信息安全、保護個人信息隱私，“謹慎能捕千秋蟬，小心駛得萬年船”，保護自己身上僅存的“褲衩”。

在此情況下，如果該系統強制的要求用戶注冊登錄，那么極有可能會損失大量的潛在用戶。

這個反面教材就很多，比如廣大學生黨，偶爾上網查個資料，剛好看到了原題，心花怒放，然而該網站卻要求你登陸之后才可以查看答案，在登陸又需要你注冊并完善一系列的個人信息，這個時候的你會心生反感，甚至厭惡，“老子換個網站看！”

應對方式：我們只需在關鍵的功能步驟處做一個卡點的提示，對該系統感興趣的用戶自然會轉化力+1。在這一點百度文庫就做得很好。

1.2、免登陸實現的功能可以滿足用戶需求

當用戶能夠免登錄就可以查看我們所需的內容時，那自然也就更沒必要去進行注冊與登錄。

運營者與開發者應明晰真正要獲取的東西。這里為廣大用戶安利-華為云官網：

華為云官網超過 100 W 張頁面，均可以在不登陸的情況下通過瀏覽器或華為云 APP 訪問海量信息和知識，只等著你去獲取。

二、舉個移動端登陸例子

請仔細觀察如下登錄界面布局情況以及代碼實現，想一想你發現的問題：

在這里插入圖片描述
實現代碼如下：

<body><div class="phone-screen"><div class="form-title">華為云社區</div><div id="login-form" class="login-form"><div class="login-form-item"><span class="login-form-item-label">手機號</span><input class="login-form-item-input"></div><div class="login-form-item"><span class="login-form-item-label">密碼</span><input class="login-form-item-input"></div><div class="login-form-btn">提交</div></div></div>
</body>

可能現在有很多人已經有了吐槽的想法，哈哈，別急，我們往下面走！

我們將分別從頁面布局、編碼和流程幾個方面對上面的例子進行分析。

三、前端學習不是造火箭

對于前端內容的學習，可能有人會說，前端內容太難了，技術點與層出不盡的框架太多、太雜了。

在這里插入圖片描述
但是呢，搞前端不是造火箭，不需要你是天才選手，只要掌握了一定規律，一樣可以上天入地。

四、前端的布局設計

設計師提供的只是設計稿，真正的布局要程序員自己實現。

更何況要是遇到可以自由發揮的項目，種種樣式可不要太“精彩”。

五、PC 端遷移到移動端的問題與挑戰

絕大多數同學對于 H5 的初步學習與應用是基于 PC 端，而 PC 端遷移到移動端是存在一些輕微的修改與更正的，我們將在如下的內容中結合上面的案例進行分析。

5.1、手機屏幕的展示方式

手機屏幕的展示方式較于 PC 端的改變我們將其歸類為小、大、長、短四類。

5.1.1、尺寸更小、寬度更窄

隨著時代的發展與科技的進步，現在的手機廠商已經摒棄了當初的 pad 大屏，轉向相較于 PC 機小巧很多的 cellphone，這就限制了手機屏幕所承載的內容是有限的。

在這里插入圖片描述

5.1.2、頁面的內容更大

為了大大提升用戶與系統的交互性，PC 端到移動端的遷移，就需要將原本在 PC 端上的內容做更大的調整。比如我們常見的在 PC 端的字號為 12、14 號字，而在移動端就需要再放大 2 號以滿足用戶的閱覽需求。當然，我們可以在 CSS 根節點的的樣式里面進行統一調整。

而頁面內容更大的挑戰不僅僅存在于字號、字體方面，其他的諸如對齊方式、線條、圖標等等，一些在 PC 端很小的瑕疵可能會在移動端被用戶無限放大甚至是產生新的問題，這都是完全有可能的，這就對開發人員提出了更深層次的要求。

在這里插入圖片描述

5.1.3、滾動實現的內容更長

豎向使用的手機屏幕導致閱讀效果是從上到下的以及手機所特有的手指滑動操控效果，為防止誤觸，這就要求用戶所瀏覽的移動端內容是在手機上屏幕的 Safe Area，而不同手機也是存在不同的差異，如對劉海屏的適應等。

在這里插入圖片描述
注：上圖源自《蘋果開發者指南》。

5.1.4、適應用戶的“短耐心”

高效率、快節奏的時代，作為研發者我們只能去適應用戶的“沒耐心”。如果你了解設計，那么你一定知道“尼爾森十大可用性原則”，里面有一條就是“優美且簡約原則”——對話中的內容應該去除不相關的信息或幾乎不需要的信息。任何不相關的信息都會讓原本重要的信息更難被用戶察覺。在界面設計中，我們可以對重點內容加大、加粗，非重點內容采用折疊菜單，隱藏消息內容的方式來處理。

例如：在當前版本華為云 APP（3.0.1）中，控制臺界面，標題明顯很大，而正文部分相對較小，同時做了折疊菜單的處理，這就是優美簡約原則的體現，如下圖所示：

在這里插入圖片描述

5.2、用戶與設備的控件交互差異

5.2.1、拇指操控

原本在 PC 機上，用戶使用鼠標對頁面進行操控，對于整個頁面每個部分的操控性是一致的，而用戶在手機上，絕大對數人習慣于大拇指滑動屏幕進行操控，由于大拇指本身與其他手指相比與屏幕的接觸是最大，容易誤觸之外，對于屏幕內容的操控也很難達到一致，屏幕下方總是比上方更容易操控。

這就需要我們開發者對于屏幕內容（菜單等信息）做出處理，擴大可操作范圍，以滿足用戶的需求。

我們不僅需要在開發設計的階段考慮這些問題，在項目上線之前也一定要在真機環境下測試，而非僅僅在瀏覽器中點點即可。

在這里插入圖片描述
例如：我們日常所使用的微信，雖然底部 4 個菜單的占用位置不大，但是可觸控的范圍卻是很大的，大家可以試一下，如下圖所示：

在這里插入圖片描述

5.2.2、特殊樣式

實現多種特殊控件的交互，如多選、下拉菜單等等。

例如：如下圖所示，在華為云官網的彈性云服務器的控制臺這里就做了一個很好的處理，我們可以看到在 PC 端和移動端的交互方式也是不一樣的。

PC 端的控制臺如下圖所示：

在這里插入圖片描述
移動端的控制臺如下圖所示：

在這里插入圖片描述
小結：曾經的我們是以簡單的自適應來滿足對系統功能的需求，而現在簡單的自適應已經無法滿足日益增長的用戶移動端需求了。很多開發商都是專門做兩套不同端的應用以滿足用戶。

5.3、編碼

編碼是開發人員的立足之本，只是“會寫”是不行的，更要結構堅固、形式優美……

對于上面例子的表單內容，我們在代碼方面做如下分析：

我們使用了如下幾個熟悉的前端標簽：<form>、<label>、<input>、<button>

可能有人會說，“哎你為什么不直接用<div>呢，<div> 和 js 不香嗎？”

<div> 和 js 能有什么壞心眼兒呢，無非就是讓你寫了不必要的代碼。“最好的食材往往只需要最樸素的烹飪方式。”

5.3.1、form 標簽

<form>可以最大限度的保證功能的正常執行。它具有 div+js+jquery 無法滿足的功能，具有 action、method，同時 form 標簽可以保證頁面在 js 與 jquery 無法加載成功的前提下表單正常提交，而不依賴于整個前端框架的加載，這是一個分離的思想。

只談技術，國內前端的標桿目前還是淘系團隊。如下圖所示，淘寶目前登錄頁使用的還是 form 標簽，這就說明 form 承載淘寶這種大用戶量級別的登陸需求是完全沒問題的。

在這里插入圖片描述

5.3.2、label 標簽

<label> 標簽可以實現點擊聚焦，并且提供了 screen reader 等 AIRA 功能。

label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。

注意：標簽的 for 屬性應當與相關元素的 id 屬性相同。

<body><p>請點擊文本標記之一，就可以觸發相關控件：</p><form>
<label for="phone">手機號</label>
<input type="radio" name="sex" id="phone" />
<br />
<label for="password">密碼</label>
<input type="radio" name="sex" id="password" />
</form></body>