7 月 22 日，雷軍在釋出會上正式推出了小米手機 4，而現在小米的移動 4G 版已經在微博上出現。繼新浪微博多使用者 @攝影師-Nano 曝光了小米移動 4G 版的工程機照片之後，今日 @傅盛也在其微博上亮出了該機的真機照。
小米移動 4G 版真機現身
隨後雷軍回覆 @傅盛稱，其手中的小米還是小規模試產的移動 4G 版，該機正在做後的調整，爭取能早日進入量產。
小米移動 4G 版真機現身
小米移動 4G 版真機現身
釋出會上，雷軍表示小米的聯通和電信版將於 8 月上市，而移動 4G 版要等到 9 月份才能上市。
小米手機 4G 版上線之後，手機網站的建設工作需要做哪些改變？
人們越來越多地使用他們的智慧手機，臺式電腦的替代品，即使是活動，如購物和採購。越來越多的人擺脫桌上型電腦和手機最佳化的網站上購買的產品和服務，網站建立者可以使用建立的設計模式，以幫助啟動一項移動電子商務專案。
有一個很好的移動電子商務的經驗是相當重要的。事實上，近的研究發現，人們有 67％的可能進行購買，如果一個網站，他們已經達到了自己的手機是智慧手機友好的。
電源的設計模式，他們告訴您其他設計師如何解決類似的問題，所以，您是不是總是重新發明輪子。它們還可以使您設計的方式，以滿足人們的期望開發從他們使用的其他網站，他們鼓勵您考慮的設計方法，您會不會想到在自己的網站。
在這篇文章中，專注於智慧手機，而不是平板電腦，我們來看看設計模式和方法用於移動電子商務功能，包括以下內容：
頁頁面，
網站導航，
建議搜尋，
搜尋結果中，
搜尋過濾和排序，
產品頁，
照片畫廊，
購物車，
檢查的帳戶或作為嘉賓，
表格。
本文中的所有例子都來自執行在智慧手機上的瀏覽器的移動網站。大多數是從大型跨部門的零售商，因為他們有大量的產品目錄的功能，如搜尋，過濾和排序的搜尋結果，需要一個深思熟慮的方法。電子商務也有無數的本地應用程式，這些模式可以適用於他們。
（非凡的注意：訂閱的粉碎電子書圖書館，並得到即時的無限訪問所有粉碎圖書，公佈在過去和未來，包括數字版本，我們的印刷書籍。至少有 24 質量電子圖書一年，60 電子書在年。訂閱！）
主頁
在移動裝置上訪問時，主頁的有關內容，幫助多使用者找到他們所尋找的。常見的模式是簡單的單欄佈局的特色網站或產品類別的促銷和單欄列表。關鍵字搜尋，通常包括主頁，連結到 WooCommerce 店群定位器和註冊形式的宣傳電郵及忠誠度計劃。
亞馬遜和梅西的混合使用的促銷內容和列表選單中。
目標的宣傳內容佔用更多的螢幕空間，不是一個簡單的列表，但更強的視覺衝擊。 Threadless 的使用的儀表盤模式，這是比較常見的，在本機應用程式在移動電子商務網站。
如果購物者來到您的網站快速比較價格，然後一個簡單的列表模式和搜尋功能可能是更可取的。如果他們是來探索促銷和銷售，然後由目標所採取的方式可能是比較合適的。為了回答這些問題，您需要挖掘分析，以瞭解消費者在您的網站正在做的。
站點範圍的導航
除了使用作為主導航中心的主頁，也有許多網站導航選單大部分自己的網頁中，通常會在標頭中。這使購物者能夠很容易地從一個網站的一部分，到另一個，而無需返回到主頁。
Lowe 的站點範圍內的選單的每個選項的圖示。百思買的選單中有兩欄佈局，導航按鈕，而不是列表項。 Lowe 的選單包括頁面出現時，而百思買的頁面的內容推下來的畫面。
梅西的站點範圍內的選單，其中包含的子選單選項。 CVS 有兩列選單的每個選項的圖示。在這兩種情況下，選單被顯示在頁面頂部的。
正如您可以看到從上面的截圖中，有幾種方法來設計站點範圍內的選單。 Lowe 的設計是簡單的，和圖示新增一個漂亮的視覺拋光位。事實上，其餘的頁面淡出到背景中，當多使用者選擇使用的導航幫助多使用者專注於當前的任務。 CVS 似乎比較混亂中，有兩列選項，每個專案都配有圖示。 CVS’ 選單還放置的特定抽頭目標彼此靠近，可呈現的觸控式螢幕上的可用性問題。
有趣的是，大型電子商務網站通常沒有太多的導航選項一次顯示。他們試圖平衡視覺的導航與您的網站的資訊架構設計，仔細考慮的專案，應在全球導航。使用網站分析看選單選項購物單擊幫助您決定了什麼應該是在選單中。不同的設計方案進行 A / B 測試和可用性測試，看一個人是否有太多的選項和壓倒的人，不只是建議，但必須找到理想的解決方案 – 為您的企業和您的多使用者。
建議搜尋
建議搜尋，也被稱為提前鍵入或自動完成，結果顯示潛在的，作為購物鍵入幾個字元。常用搜尋到的條件，這是一個真正的方便購物者，特別是如果搜尋詞是長期的。建議搜尋的一個限制是，點選虛擬鍵盤上錯誤的字元是很容易的，這將改變建議的結果。顯示常見的 “正確” 的結果，而不是可能是有用的。另外，考慮使用一個改進的自動推薦圖案鍵入需要輸入查詢，以減少的量，以有效的方式，並利用移動頻寬較慢。
Office Depot 的網站在搜尋框中：鍵入 “DRAF” 帶來了幾種可能的結果。錯誤輸入 “拖” 而不是 “DRAF” 的人誰是試圖找到起草用品會導致意外的結果。攻牙到預定的相鄰的信 1 是虛擬鍵盤上的常見問題。
雖然設計者人錯誤輸入查詢不能做任何事情，他們可以確保有其他的方法來得到到產品頁面輸入錯誤的結果，如鑽的產品類別或站點範圍內的選單中的頂級類別的下拉選單。網站管理人員也可以罰款調整自己的搜尋功能，建議 “草案” 查詢型別為 “dragt 的結果。” 您有能力做到這一點，將取決於您使用的搜尋引擎技術。
搜尋結果
用於移動電子商務網站的搜尋結果：表顯示和網格顯示兩種主要的模式。表格顯示縮圖的照片和一些基本資訊，如產品名稱和價格在一個緊湊的行。網格顯示大圖片的描述性資訊較少。有些網站允許消費者在這兩種檢視之間切換。
ZWordPress APPos 的搜尋結果中顯示其一個網格，允許其產品的大照片，一個明智的選擇，像鞋的銷售市場。沃爾格林有一個表，其中包括在 WooCommerce 店群尋找專案，將專案新增到購物車按鈕。
OfficeMax 公司要求消費者在選擇一個子類別廣泛的搜尋字詞，如 “紙” 。一個子類一旦被選中，結果顯示為一個表。搜尋的 “剪刀”，其中就有更少的子類，消費者直接到表檢視的結果。
有消費者選擇一個子類別，可能會出現問題，如果它不清除的產品適合在一個複雜的層次結構。在的 OfficeMax 公司上面的例子中，有人找他們的家用印表機為 8.5×11 英寸的紙張可能不知道是否在 “複製” 或 “多用途紙鐳射列印紙。” 一個更好的方法可能是在搜尋過濾器中列出的子類別，在那裡他們可以在上下文中與其它過濾器一樣，“顏色” 和 “大小” 。定期測試（每 4-6 個星期）具有代表性的多使用者，通常搜尋的術語和暢銷的產品可以讓您深入瞭解哪種方法是更好的。 A / B 測試也可以發現其中的一個方法是否得到更多的人的產品頁面，並導致更高的轉換率。
Gap 的網站的訪問者看到一個表，顯示預設情況下，看到一個網格顯示的選項。請注意，差距也保持在關鍵字欄位中的搜尋字詞。
峽讓消費者選擇如何，讓他們從一個簡單的掃描列表的檢視放大圖片檢視搜尋結果。差距可能保留一些產品的資訊，但-例如價格-在網格顯示（作為 ZWordPress APPo 的）。詳細資訊，如價格和顏色使它更容易為購物者確定哪些產品，他們希望瞭解更多有關。
保持該領域中的術語也提醒消費者他們尋找什麼，並讓他們很容易縮小結果的另一個詞（如 “紅”）的搜尋字詞。
搜尋峽為 “男裝 T 恤” 需要購物的頁面沒有結果（未顯示），並沒有連結到搜尋結果為 “男子噸的襯衫。” 間隙可以提高其搜尋透過新增一個 “難道您的意思嗎？” 的型別結果頁面的問題。谷歌處理這種情況，列出 “男裝 T 恤” 建議的查詢，然後提交結果為 “男裝 T 恤”，如果該建議被忽略。
排序結果
結果排序，幫助消費者組織沿著一個連續的值，通常是數字的，如價格和消費者的評級結果一大套。通用介面模式進行排序的按鈕和下拉選單。
沃爾瑪讓消費者選擇三個按鈕對結果進行排序。西爾斯使用類似的方法，但與 “分段控制” 。 JavaScript 框架，如 jQuery Mobile 的這些應用程式介面部件更容易為設計者提供。
JC Penney 公司可以透過下拉選單進行排序，稍微定製的風格，而 Eddie Bauer 的使用瀏覽器的預設下拉選單。這兩個觸發瀏覽器的本地控制下拉選單（在這些例子中，iPhone 選擇器）。
沃爾瑪的按鈕之間的間距的大小和大方，讓您更好的自來水的目標，不過，公平地說，沃爾瑪只有三個選項，而西爾斯有四個。西爾斯列入 “全部” 按鈕可以讓購物者回到原來的結果頁面，如果他們沒有找到他們想要的東西后，排序。使用下拉選單是一個比較安全的選擇，因為它是現代移動瀏覽器的支援，並允許較長的列表的排序選項。然而，它也需要花費大量寶貴的空間。這些型別的設計權衡，可以定期檢測與評估。
篩選結果
過濾器使購物者，縮小其結果的基礎上的一個或多個屬性，如顏色，品牌和規模。過濾器通常是組織的型別（稱為面），與每個小刻面（例如下出現的幾個值，顏色是一個面，和紅色的一個方面是值）。通用介面模式顯示過濾選項的下拉選單，下拉選單和手風琴顯示。從一個面內時，可以應用一個或多個值中選擇濾波。雖然允許一個單一的搜尋值超過一個方面，技術上是可行的，它帶有一個更高的互動成本，並可能導致的任何結果（例如，交叉培訓，成本不超過 75 美元的運動鞋）。
CVS 使用下拉選單中的 “篩選” 選項卡中進行篩選。選擇一個選單選項，將立即對結果進行篩選。 JC Penney 公司提供了一個下拉選單中，選擇過濾器和顯示產品的數量相匹配的過濾器值。 JC Penney 公司也可以在一個螢幕上，貿易是購物者點選 “應用” 按鈕被選中多個值從一個方面。
科爾的每個過濾器型別，使用的手風琴公開了一組核取方塊。 Threadless 的暴露了其搜尋方面作為按鈕的值。在這兩個網站，選擇一個過濾器值將立即篩選結果。
顯示專案的數量可根據每個面值到什麼樣的消費者將得到每次選擇提供了更大的透明度。 Threadless 的 “的方式顯示所有可用的內容值佔據整個螢幕，但它為消費者提供了在一目瞭然地檢視所有的過濾提供給他們的選擇。無論您採取這種方式，或者使用像科爾的手風琴很可能依賴上的方面值是多少目前對於一個給定的產品類別。如果您的目錄具有高度的變異面值為每個類別的數量，那麼您將需要進行實驗，以找到合適的設計。您可以因為消費者使用這些產品類別過濾器的最佳化過濾介面。
產品頁
產品頁面是電子商務網站，真正展示他們的產品在細節。他們是不是一個 “模式” 這個詞的真正意義上的，而是一個集合的模式，包括如製表符，的手風琴和照片畫廊。兩種常見的方法到產品頁面的所有產品的資訊或一個網頁的標籤或手風琴，以便逐步披露的資訊，消費者需要一個很長的網頁。
三星和戴爾的逐步披露內容上的產品頁面，其中有很多購物者的資訊。三星使用的手風琴公開的資訊塊，而戴爾使用製表符。
Cabela 的辦公用品都使用了一個很長的網頁顯示的產品資訊。這種方法需要更多的刷卡向上和向下得到的資訊，但它使購物與小標籤，或操縱手風琴頭。您的選擇將取決於資訊的量與產品相關聯的資訊可以被分解成邏輯部分以及如何。
龍產品比分解成可管理的資料塊用製表符或手風琴的頁面，頁面需要更多的滾動。他們還要求消費者把更多的精力放在尋找特定的資訊，他們正在尋找。在我自己的可用性測試，我聽到有人表示這兩種方法的喜好，但他們似乎有一個簡單的工作分解成邏輯塊的頁面。如果您使用這種方法，請確保初沒有顯示任何內容呈現快速購物者點選的選項卡或手風琴。
明顯的方式來完成，這是載入頁面的所有內容，一度讓隱藏的內容幾乎立即出現。這種方法有它的優勢，為多使用者的網路連線時下降，而他們之間的切換部分。大的缺點是，所有的產品資訊已被下載，無論是實際檢視或不增加更多的負載對伺服器和使用更多的購物者的資料計劃，該計劃可計量。
圖片庫
照片畫廊特別是在電子商務行業，如服裝和消費電子產品的關鍵。您可能需要從三個不同的角度，家得寶在購物時，看到一個扳手，但更多的影象時找衣服，鞋子或者高階智慧手機或平板。幾個常用的模式是 swipeable 畫廊，“雙點選放大，縮小”，用於選擇照片的縮圖。
Payless 使用一個 swipeable 的畫廊，從不同的角度，以顯示其產品。多使用者也可以點選放大才能看到細節，如縫合和釦眼。
Payless 明智地保持其 “絲錐放大” 調出螢幕上的幾秒鐘，給購物者的時間去了解如何瀏覽網頁，仍然注意到它。放大照片檢視產品的詳細資訊的能力是非常重要的服裝和鞋。
碼頭工人（上圖左）有一個 swipeable 照片畫廊，雙，挖掘到放大的細節的，消費者可以看到一個產品在不同的顏色。列維的（右上圖）採取了類似的做法，加上縮圖的表示照片在畫廊的角度。泊塢窗 “網站上選擇一個新的顏色會導致整頁重新整理，而李維斯沒有。
李維斯保持大多數的頁面重新整理時，購物者改變顏色，起初似乎是一個更好的多使用者體驗。但是，從簡要回顧了兩個網站於同日在同一天的時間，碼頭工人的整頁重新整理，出現了執行速度更快的時候，我拍了拍色樣頁的新的照片出現的那一刻。列維的緩慢可能已造成需要被重新整理，除了主照片，照片，或其他看不見的因素，如交通繁忙的負載由五個縮圖。每種方法都有其取捨。
三星（左上圖）和戴爾（上圖右）都使用他們的產品 swipeable 照片畫廊。三星採用了畫廊到的手風琴在其產品上，而戴爾使用一個單獨的頁面。
三星的做法似乎更加人性化，因為它具有較少的頁面瀏覽。三星和戴爾都去大型的高畫質晰度照片，在昂貴的產品時，因為很明顯的影象質量是至關重要的。戴爾的方法的一個優點是，它可以讓購物者把重點放在自己的照片，沒有任何分散注意力的頁面內容。
購物車
購物車顯示產品通常使用表模式。除了要購買的內容顯示，他們還提供額外的功能，例如能夠儲存命令，儲存到我的愛我的喜愛，刪除或更新的數量，選擇送貨或店內取貨，適用於促銷或優惠券程式碼，並檢查了。一旦產品已被新增，購物車被普遍達到透過在網站的頁首或全球導航選單中的選項圖示。
每個錶行的羅威的購物車（左上圖）允許多使用者刪除相應的產品從他們的車，它包括用於運輸或店內取貨的選項。床浴和超越（右上圖）也允許刪除的專案; 表中的每一項產品的數量可以改變一個按鈕上越走越遠更新的頁面。
板條箱和桶（左上圖），允許多使用者刪除產品，儲存到收藏夾和更新數量的表中的行。每一行還包括運輸成本和交貨時間等資訊。 Payless（右上圖），也可以讓消費者更新的數量和刪除專案，它的車還提供了一個選擇的交付選項，包括將產品送到一個 Payless 專賣店（未顯示）。
購物車應提供大的效用，因為消費者購買的後一點是接近的。讓購物更改數量，移除專案和應用推廣或優惠券程式碼，而不必去到另一個頁面，讓他們迅速透過採購渠道的關鍵。如果您覺得這增加了太多的內容的頁面，您可以使用漸進披露背後的手風琴，直到它需要隱藏一些內容（如促銷程式碼欄位）。
結帳
Checkout 是更多的比的圖案的方法，形成模式，雖然可以應用到付款處流量。許多電子商務網站允許客戶使用移動自己的網站上檢查出與現有的帳戶或作為嘉賓。人誰已經有一個帳戶，結帳過程是透過使用現有的付款和發貨資訊，大大簡化。
克拉奇菲爾德和諾德斯特龍都允許客戶檢查作為嘉賓或透過使用他們現有的帳戶。讓手機購物已簽出作為嘉賓把他們的訂單後，建立一個帳戶和密碼重置都支援。
亞馬遜的電子郵件地址，要求的頁，結賬時，顧客是否有一個帳戶，或作為嘉賓被檢查出。的經驗是非常像網站多使用者的桌面上。目標移動網站上提供的選項中的帳戶，以檢查為客人或建立一個帳戶。兩者都支援密碼重置。
允許客戶登入或檢查作為嘉賓，並重置其密碼是一個必須為移動電子商務的網站。另外，還要考慮邀請消費者到自己的手機上建立一個帳戶後，把他們的訂單，因為他們已經給了您足夠的資訊（輸入密碼除外），這樣做的。這可以讓客人更有可能的努力建立一個帳戶，因為在這一點上應該是小的。
的 “建立一個 Target.com” 的按鈕可能會導致一些廢棄的購物車如果購物者走這條路，並決定這是太多的努力。確認訂單，然後再邀請註冊在發票上頁可能會更好。限制初始結帳螢幕兩種選擇，可以提高轉換，因為購物者將有更少的決定，使工作時，在小螢幕上。更少選擇的關鍵任務，如檢查出效果更好。
表格
形式是常用的移動電子商務，搜尋，檢查，登記，並輸入優惠券和促銷程式碼。請注意形式為小螢幕設計時的一些良好做法：
將表格上面的標籤輸入欄位，使他們不推卸螢幕，當多使用者放大到輸入。
使用 HTML5 輸入型別顯示相應的鍵盤使用領域。對於電子郵件地址，使用型別=“電子郵件” 。對於數字欄位，如郵政編碼，使用型別=“數字” 或 “電話”（後者將顯示一個數字鍵盤，更大的按鈕）。
領域的強制性只有在絕對必要。這將減少摩擦，讓客戶透過了結帳過程。
知名的方式來處理形式的智慧手機是使用很少能可能。您可以使用地理位置建議購物者的 ZIP 程式碼，您可以讓客戶使用他們先前輸入的帳戶資訊時，使用您的網站。請記住，知名的形式是一個購物者從來沒有完成。
CVS（上圖左一）不帶數字鍵盤，當多使用者點選 “郵政編碼” 欄位，並在結賬頁面。這需要從購物者，以獲得正確的鍵盤的一個不必要的抽頭。，CVS 也贊同標籤左邊的表單域，在那裡他們可以得到推過螢幕，如果多使用者縮放到一個領域。板條箱和桶（右上圖），有更多的移動友好的形式。它帶來了大的數字鍵盤，當有人點選 “郵政編碼” 欄位中。它還頂部對齊表單標籤，這樣他們就不會滑落的頁面。
請記住，形式是如何的購物網站上完成交易。要特別注意他們，並盡您所能來完成他們的互動成本降低。有時，它甚至可能意味著試圖完全不同的東西。例如，Typeform 近提出了一種新的經驗，反應更迅速，簡單和多使用者友好的 Web 表單。我們的想法是要求在一個時間只有一個問題，但它突出顯示，讓多使用者鍵入快捷鍵，填寫表格時。這不是選項，在任何情況下，將工作，但某些形式可能是相當有幫助的。