更多地學(xué)習(xí)站在產(chǎn)品的角度去構(gòu)思設(shè)計可讓設(shè)計師的功力瞬間大增

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

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

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

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

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

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

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

組件化設(shè)計思維就是把產(chǎn)品需求場景化、視覺表達(dá)模塊化，每個組件基于復(fù)用為目的，使其具備獨立的完整解決方案，通過標(biāo)準(zhǔn)的規(guī)范組合方式來構(gòu)建整個設(shè)計方案，從而提升設(shè)計效能。

組件化設(shè)計思維有3個關(guān)鍵點：

01 完整組件方案：將組件視為一個獨立的產(chǎn)品，從多維度，多場景輸出組件的方案和組合標(biāo)準(zhǔn)。

02 組件化思維：從需求出發(fā)，拆解頁面表達(dá)結(jié)構(gòu)和所需組件。

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

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

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

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

內(nèi)容越多，用戶的學(xué)習(xí)成本也越大。用戶使用你的產(chǎn)品，他們希望越簡單越好，越容易上手越好。自己可以快速而又準(zhǔn)確的找到期望的功能或內(nèi)容是用戶的目標(biāo)。所以從這個角度來說，搜索功能的出現(xiàn)勢在必行。

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

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

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

搜索功能的三個階段

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

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

1 （打開）搜索框

2 信息錄入

3 搜索結(jié)果展示

搜索框

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

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

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

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

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

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

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

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

信息錄入

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

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

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

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

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

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

搜索結(jié)果

搜索結(jié)果在我看來最難的一點就是如何展示不同類型和級別的內(nèi)容。例如，你在支付寶里搜索賬單，搜索出來的結(jié)果包括賬單相關(guān)的應(yīng)用，生活號和資訊。為了進(jìn)行區(qū)分，級別更高的應(yīng)用和生活號我們會加一個圖標(biāo)展示。

當(dāng)然用戶還可以通過tab切換的形式選擇合適的內(nèi)容類別。

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

剛才說的都是搜索結(jié)果過多的情況下應(yīng)該怎么辦。我們還應(yīng)該考慮的是搜索結(jié)果為零的時候，我們?nèi)绾谓o用戶設(shè)計合適的空頁面。

現(xiàn)在一些搜索結(jié)果是通過加載一個新的頁面來展示的，如果我們不給用戶說清楚。用戶會誤以為是網(wǎng)絡(luò)原因?qū)е马撁婕虞d失敗而不是搜索不到你想要的商品。所以空頁面設(shè)計一定要向用戶解釋清楚原因。

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

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

當(dāng)前題目：更多地學(xué)習(xí)站在產(chǎn)品的角度去構(gòu)思設(shè)計可讓設(shè)計師的功力瞬間大增
當(dāng)前URL：http://www.jiaotiyi.com/article/sehhgc.html