站在用戶的角度去構思設計你的產品，讓你的設計會說話，產品賣點信息容易被消費者理解，最終產生更佳的購買欲望、使用頻率、口碑傳播。

為港北等地區用戶提供了全套網頁設計制作服務，及港北網站建設行業解決方案。主營業務為做網站、網站制作、港北網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業、用心的態度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

P.S.所謂互聯網產品，例如我們常見的互聯網購物融資游戲等平臺、移動APP、品牌網站等均叫產品。

幾年前，創新互聯內部技術會議上，設計提效又再次推動著設計思維的變革，設計師們不僅僅需要出色地完成業務需求的設計，同時還需要思考設計的價值，在關注出色視覺表現的基礎上，逐漸加強對項目協同及體驗價值的關注，逐步形成新的設計思維模式。該次設計提效會議風暴中，其中重要的一個討論要點就是品牌網站設計組件化。組件化思維不單是視覺設計師的事情，還牽涉到前端制作，后臺程序開發等一系列大動作。

今天的重點不是深入探討組件化思維這件事情，但有必要先對這個概念進行簡單的闡述一下。

說到組件化設計思維，我們先看看一個頁面如何從設計出來：傳統的頁面生產流程是瀑布式的，從運營到需求，需求到設計、設計到前端，它是一串式的工作流程。在視覺稿設計產出前，似乎誰也不知道頁面會設計成什么樣子。

這樣的工作模式的現狀就是重復性業務頁面設計制作、反復低效率的溝通、糾結的還原度修復等。那么是不是有些頁面需求可以從這樣的模式中，解綁一下呢？比如大量的頻道二級頁面，后臺型頁面等，能夠用組件化的方式將頁面整合設計。

組件化設計思維就是把產品需求場景化、視覺表達模塊化，每個組件基于復用為目的，使其具備獨立的完整解決方案，通過標準的規范組合方式來構建整個設計方案，從而提升設計效能。

組件化設計思維有3個關鍵點：

01 完整組件方案：將組件視為一個獨立的產品，從多維度，多場景輸出組件的方案和組合標準。

02 組件化思維：從需求出發，拆解頁面表達結構和所需組件。

03 通用頁面規則：通用的頁面與組件的柵格體系及替換規則。

其實，設計組件庫-DPL ，已不是一個新的概念，早在yahoo時代就已產出一套完整的Yahoo UI Library (YUI) ，現在我們也仍然在沿用組件設計和規范定義，每個設計師都有過參與規范制定的經歷，從通用的字體，顏色開始到很嚴格細致的版本，一份DPL文檔經常耗費不少資源和時間，當下我們在思考如何從組件庫上得到真正的提效。

在組件化思維當中，我們今天拿一個最為簡單的搜索功能為例子。

搜索功能的出現追根溯源上來說是因為現在一款產品所包含的內容太多了，特別是阿里的產品。

內容越多，用戶的學習成本也越大。用戶使用你的產品，他們希望越簡單越好，越容易上手越好。自己可以快速而又準確的找到期望的功能或內容是用戶的目標。所以從這個角度來說，搜索功能的出現勢在必行。

那么為什么我建議設計師給自己的產品做一個搜索功能呢？因為通過建立搜索功能可以幫助你了解你現在所負責的這款產品里究竟有哪些東西。

其實很多設計師工作的時間也蠻久的，但是對于其產品所包含的內容和功能可能還不能完全吃透。 口口聲聲說要懂得產品，但是連產品里究竟有哪些東西都不知道，其實想想挺無厘頭的。

舉一個例子，你在微信中搜索“邁克爾杰克遜”，搜索結果會出現名稱中帶有邁克爾杰克遜的群聊／好友，關注的公眾號，聊天記錄，還有收藏記錄。當你點開更多，你還會看到關于邁克爾杰克遜的新聞資訊，表情包，音樂，朋友圈等。如果你剛使用微信不久，通過這個搜索結果你就會對微信可以提供的服務有了大致的了解。所以說通過建立搜索功能可以幫助你很好的了解一款產品。

搜索功能的三個階段

知道了搜索功能的必要性，接下來我們真正的開始去進入搜索功能的設計階段。

其實談到搜索功能設計，很多人會想到搜索框設計。搜索框可能是搜索功能一個最主要的展現形式。但是搜索功能里學問遠不止是簡單的搜索框可以概括的，一個完整的搜索功能/流程應該由以下三個方面/階段組成：

1 （打開）搜索框

2 信息錄入

3 搜索結果展示

搜索框

搜索框的設計我覺得有三點需要我們注意。

第一，不同的產品對于搜索框的展示方式存在差異。有的產品搜索框直接就放在界面上方，用戶可以直接進入信息錄入階段。

但是有的產品的搜索框需要你點擊放大鏡按鈕彈出。

前者的好處就是用戶隨時看到搜索框，使用起來也方便。而后者的優勢在于占據更少的空間，適合實現產品迭代期的搜索功能需求。

例如，在工作中我們會經常遇到突發奇想的領導，他們哪天一開心拍板說，不如我們在這個界面里加一個搜索功能吧。而這個界面可能已經放不下一個搜索框了，所以只能放一個搜索框的入口——放大鏡圖標。

第二，用戶需要查找的內容可能屬于不同的類別。以UI中國為例，用戶可能需要查找的是一位設計師，一篇文章或者一個插畫作品。在這種情況下，我們需要在搜索框的左邊給用戶提供了一個下拉列表給他們去選擇查找期望的內容類別。

當然并不一定非要放在搜索框左邊，微信這種分類樣式也很出彩。

最后一個需要我們注意的是搜索框的設計風格應該和產品里其他的輸入框保持一致，不能你這里的輸入框帶有圓角，而那里的是直角。這種比較低級的錯誤我們不要犯。

信息錄入

信息錄入目前來說最常見的就是文字錄入，不過現在我們也開始看到新興的錄入方式：語音錄入和圖片錄入。

語音錄入我們最熟悉的產品就是一些音樂播放軟件還有外語詞典，比如qq音樂或者網易云音樂。用戶想聽一首歌，可以直接輸入歌曲名，但是不知道歌名的情況下，可以通過語音的形式完成歌曲信息的錄入。

而使用圖片完成信息錄入的一個比較典型的例子就是淘寶的拍立淘，用戶可以拍下心儀產品的照片，系統就會給你匹配相似的商品，非常方便。從這點來看，設計師必須要時刻掌握最新的科技信息，要不然很容易就被淘汰。

我們可以看到很多產品的搜索功能都為用戶提供了搜索記錄和熱門搜索這兩個服務。有的搜索記錄和熱門搜索都是通過下拉列表的樣式來實現的。例如知乎

但是淘寶和京東選擇的卻是另一種布局方式。這種布局方式可以展示更多的信息。這迎合了電商產品的一個目標，但是無法完成單條記錄的刪減，這在我看來影響不是很大。

此外為了更方便用戶操作，我們還可以在用戶錄入階段給用戶以自動提示。這樣可以節省用戶的操作時間，避免打錯字。

搜索結果

搜索結果在我看來最難的一點就是如何展示不同類型和級別的內容。例如，你在支付寶里搜索賬單，搜索出來的結果包括賬單相關的應用，生活號和資訊。為了進行區分，級別更高的應用和生活號我們會加一個圖標展示。

當然用戶還可以通過tab切換的形式選擇合適的內容類別。

有的情況下搜索結果過多，而用戶又沒有時間一個個的去看。我們可以引入篩選器來幫助用戶在短時間內找到期望的內容，不要花時間去翻頁或者滑動查找。

剛才說的都是搜索結果過多的情況下應該怎么辦。我們還應該考慮的是搜索結果為零的時候，我們如何給用戶設計合適的空頁面。

現在一些搜索結果是通過加載一個新的頁面來展示的，如果我們不給用戶說清楚。用戶會誤以為是網絡原因導致頁面加載失敗而不是搜索不到你想要的商品。所以空頁面設計一定要向用戶解釋清楚原因。

以上就是我對搜索功能的一些總結，希望可以幫助到各位。

一個簡單的搜索功能就有這么多門道，其他的例如菜單導航、面包屑、列表頁、詳情頁等等，就請大家平時多多總結了。

網頁標題：更多地學習站在產品的角度去構思設計可讓設計師的功力瞬間大增
當前地址：http://vcdvsql.cn/article12/sehhgc.html

成都網站建設公司_創新互聯，為您提供動態網站、云服務器、搜索引擎優化、網站制作、做網站、網站改版

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯