搜索框的設(shè)計(jì)并不簡單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
你可能認(rèn)為，搜索不就是一個(gè)矩形框+放大鏡圖標(biāo)再加一個(gè)占位符不就搞定了嗎？
經(jīng)過多年的設(shè)計(jì)工作頻繁設(shè)計(jì)搜索功能后，我發(fā)現(xiàn)在不同類型的產(chǎn)品中搜索框的交互方式、視覺樣式都有所不同，且用戶在搜索前、搜索中、搜索后都需要注意用戶在搜索各個(gè)流程中的可能操作，包括正向流程、反向流程。
搜索框的設(shè)計(jì)并不簡單，很多的細(xì)節(jié)需要設(shè)計(jì)師去注意和思考的。下面總結(jié)一下我在設(shè)計(jì)搜索框的經(jīng)驗(yàn)，分享給大家。
友情提示：文章尾部有福利相送，不要錯(cuò)過~
搜索是用戶將查詢的信息輸入搜索器中，搜索引擎就會在約定的規(guī)則下將獲取到的信息反饋給用戶的過程。
搜索是B端產(chǎn)品中非常重要的一個(gè)功能模塊，通過搜索框用戶可以快速找到或者篩選出自己想要的內(nèi)容，在引導(dǎo)用戶走向方面起到了絕對性的作用。
體驗(yàn)設(shè)計(jì)中有個(gè)概念叫用戶分層，即便是同一個(gè)頁面，我們也需要去細(xì)分不同的場景對用戶做分層，為不同的用戶做設(shè)計(jì)，搜索功能就是最好的為有明確目標(biāo)的用戶分層的設(shè)計(jì)。
搜索功能的用戶分層可分為幾種場景：
搜索首先要確定哪幾個(gè)字段可以被搜索到，名稱？編號？等等...
有明確目的型用戶在進(jìn)行了搜索這個(gè)行為后，便生成了搜索歷史。因此，我們可以通過挖掘用戶搜索行為背后的目的，來分析為什么使用不同的布局。
模糊搜索使用的頻率居多，畢竟有時(shí)候用戶不一定可以精準(zhǔn)的記住想要搜索的準(zhǔn)確信息。不過也不是絕對的，兩者皆可選擇，可根據(jù)產(chǎn)品場景選擇。
搜索功能可以簡單地輸入，快速輸出，只要幾個(gè)關(guān)鍵字就可以獲得符合用戶需求的內(nèi)容，將原有的用戶行為成本轉(zhuǎn)移給系統(tǒng)，從而讓使用體驗(yàn)更加快捷、輕松。
同時(shí)語音輸入和拍照搜索進(jìn)一步降低了用戶行為門檻。
搜索功能可以幫助用戶快速定位信息，從而提高了用戶對內(nèi)容的觸達(dá)效率。常見的例子就是：bi?r用戶有明確的購物需求時(shí)，不需要一步步點(diǎn)擊商品分類，選擇商品類型、品牌等信息，就可以快速直達(dá)自己所需的商品。
所以，搜索框的體驗(yàn)如何，決定著B端產(chǎn)品解決問題的能力、效率以及用戶的使用頻率。
好的搜索框一方面能幫助用戶節(jié)約時(shí)間成本，讓用戶在大量且復(fù)雜的信息中篩查所需目標(biāo)，提升用戶體驗(yàn)；另一方面，還能協(xié)助產(chǎn)品收集用戶行為目標(biāo)并做好數(shù)據(jù)埋點(diǎn)，為后期的更新迭代提供強(qiáng)有力的依據(jù)。
除了設(shè)計(jì)方式外，搜索還涉及到結(jié)果信息的數(shù)據(jù)匹配規(guī)則，受到算法精準(zhǔn)性、商業(yè)化干預(yù)程度的影響，設(shè)計(jì)師同樣需要關(guān)注搜索結(jié)果如何更好地匹配用戶的精確搜索、模糊搜索需求，以從信息設(shè)計(jì)層面提升用戶體驗(yàn)。
搜索流程，即搜索前、搜索中、搜索后的頁面跳轉(zhuǎn)以及搜索框形態(tài)的變化。
對應(yīng)的就有：搜索入口——搜索推薦頁——搜索聯(lián)想頁——搜索結(jié)果頁——搜索結(jié)果頁返回。
設(shè)計(jì)師想要設(shè)計(jì)流暢的搜索體驗(yàn)是無法避開梳理搜索流程的，考慮完整的搜索鏈路和用戶關(guān)鍵體驗(yàn)路徑，并且設(shè)計(jì)出對應(yīng)的所有細(xì)節(jié)，將搜索功能的價(jià)值發(fā)揮到最大化。
對于搜索系統(tǒng)來說，整個(gè)流程可以分為三步，分別是：
B 端業(yè)務(wù)中搜索使用的場景有兩類：一類是全局搜索，一類是頁面局部搜索（常見的有列表搜索、表單搜索）。
對于B端系統(tǒng)中模塊分類較多，所涉及到的內(nèi)容比較全面的，一般會選擇全局搜索，全局搜索是通過關(guān)鍵詞匹配全局范圍內(nèi)的信息來搜索的。
優(yōu)勢：無學(xué)習(xí)門檻，用戶無需考慮內(nèi)容對應(yīng)的分類只需輸入關(guān)鍵詞；
劣勢：精準(zhǔn)度不夠高；搜索出來內(nèi)容泛；需用戶二次查找目標(biāo)內(nèi)容。
注意：設(shè)計(jì)全局搜索時(shí)要注意搜索后的結(jié)果展示邏輯，如果分類較多，界面還可以根據(jù)分類tab分別歸類不同。
tips：搜索功能在頁面中的重要程度及搜索范圍，決定了搜索的位置和樣式。
目前大部分網(wǎng)站在布局搜索框位置時(shí)，大致遵循以下幾個(gè)規(guī)則：頁面居中、頁面頂部居中、頁面頂部右邊、頁面頂部左邊
知乎的搜索入口位于頂部導(dǎo)航欄的顯著位置，引導(dǎo)用戶進(jìn)行搜索，并且搜索框內(nèi)的占位文字根據(jù)算法會間隔一段時(shí)間改變，引導(dǎo)用戶發(fā)現(xiàn)新的內(nèi)容，促進(jìn)用戶在知乎上的使用時(shí)長。
最常見的搜索方式之一，將搜索以輸入框的形式居于頁面頂部（狀態(tài)欄或標(biāo)題欄下方），在視覺上非常醒目，用戶進(jìn)入應(yīng)用即能快速找到，很符合用戶的視覺瀏覽動(dòng)線，也是C端產(chǎn)品提高轉(zhuǎn)化率的流量入口。
形態(tài)相對比較簡單，通常以“放大鏡”樣式的 icon 出現(xiàn)在界面右上角，視覺上不會過于突出，常用于搜索行為不是特別頻繁的場景，需點(diǎn)擊后才會跳轉(zhuǎn)至搜索框頁面。
Icon 搜索入口相較于上述提到的類型在視覺引導(dǎo)方面略遜一籌，相對弱化了搜索功能，但節(jié)省了更多的導(dǎo)航欄空間，呈現(xiàn)位置比較靈活，可單獨(dú)呈現(xiàn)、也可與其多個(gè)其他功能 icon 并列組合展示。
指的是在頁面中的某個(gè)模塊加入搜索的功能。
常見在數(shù)據(jù)列表頁面加入搜索的功能，搜索的目標(biāo)只在該模塊該內(nèi)容中進(jìn)行搜索，搜索的信息具有局限性，當(dāng)然也是更加準(zhǔn)確地搜索用戶想要的目標(biāo)信息。
下圖是一個(gè)美團(tuán)商家后臺的列表頁面，此頁面加入了搜索的功能。
另外，B端常見在表單頁面加入搜索的功能，搜索的目標(biāo)只在表單選擇內(nèi)中進(jìn)行搜索，搜索的信息同樣具有局限性，可以通過控制某個(gè)字段或者某幾個(gè)字段的信息來展開搜索。
B端業(yè)務(wù)中復(fù)雜的場景中存在同一個(gè)頁面中有多個(gè)搜索入口（如上圖美團(tuán)），設(shè)計(jì)前需梳理清楚每一個(gè)搜索入口的交互邏輯，不同搜索入口覆蓋的搜索范圍、搜索過程、搜索結(jié)果是否一致，在占位文本上也需體現(xiàn)出該搜索入口的搜索內(nèi)容。
模糊搜索是用戶搜索意圖不明確時(shí)，將用戶的查詢與待檢索的內(nèi)容進(jìn)行模糊匹配。
模糊搜索無法精確理解用戶的查詢意圖，搜索結(jié)果可能有大批量用戶不想要的信息，使用模糊搜索時(shí)一定要結(jié)合實(shí)際場景，慎重使用。
優(yōu)點(diǎn)：只要有相關(guān)的內(nèi)容都會被檢索出來，減少了精準(zhǔn)搜索帶來的記憶負(fù)擔(dān)；
缺點(diǎn)：容易把相關(guān)的信息也帶出來，例如檢索186，把相關(guān)號碼也匹配出來。
精確搜索是指用戶在搜索時(shí)，針對某一數(shù)據(jù)字段搜索，來查找所需要的數(shù)據(jù)。
根據(jù)業(yè)務(wù)場景不同，我們會查找某一字段，或者是用標(biāo)簽切換不同字段來查找?？梢詭椭脩粼诰薮蟮男畔⒊刂锌s小目標(biāo)范圍，快速而準(zhǔn)確的定位到目標(biāo)數(shù)據(jù)，并速獲取需要的信息。
優(yōu)點(diǎn)：搜索匹配精準(zhǔn)度高。
缺點(diǎn)：每次只能對單一條件進(jìn)行搜索。
總結(jié)：
我們可以根據(jù)產(chǎn)品的發(fā)展階段、需求側(cè)重、用戶的專業(yè)度和使用習(xí)慣來綜合決策使用哪一種方式更合適。如果側(cè)重查詢效率且用戶是有專業(yè)門檻的使用者時(shí)，可以優(yōu)先考慮精確搜索；如果側(cè)重查詢結(jié)果的豐富度，可以優(yōu)先考慮模糊搜索。
基于搜索欄的表現(xiàn)形式，可以分為以下四種類型：單屬性搜索、切換屬性搜索、多屬性模糊搜索以及多屬性組合搜索。
類型之間沒有優(yōu)劣之分，根據(jù)業(yè)務(wù)場景使用對應(yīng)的類型即可。
單屬性精確搜索：通過某個(gè)特定屬性就可以快速定位到目標(biāo)數(shù)據(jù)，具有唯一識別性的、高使用頻率的、對用戶決策有意義的。
適用場景：表格單一數(shù)據(jù)信息特征突出，可以用此數(shù)據(jù)標(biāo)簽快速定位目標(biāo)數(shù)據(jù)。
切換屬性搜索也被稱為定向搜索，是由用戶主動(dòng)選定搜索范圍后再進(jìn)行搜索；
優(yōu)勢：搜索精準(zhǔn)度高。
劣勢：增加了部分用戶的學(xué)習(xí)成本及操作步驟。
適用于注重搜索結(jié)果的精準(zhǔn)性或展示產(chǎn)品搜索能力等場景，定向搜索適用的幾種場景：
a、產(chǎn)品數(shù)據(jù)量足夠大且重搜索功能，用戶對于搜索有明確目標(biāo)，定向可以幫助用戶提高搜索的精準(zhǔn)范圍和效率；
b、搜索時(shí)輸入的內(nèi)容無法通過同一套搜索交互方式和后臺計(jì)算邏輯承載；如單次搜索和批量搜索的輸入格式不同，搜索結(jié)果存在多樣性；
c、需外露產(chǎn)品亮點(diǎn)功能，有多個(gè)常用的搜索屬性，對于前置條件的數(shù)據(jù)計(jì)算能力和開發(fā)成本更高。
明確并固定選項(xiàng)類別，降低用戶操作難度。下拉篩選適合的選項(xiàng)類別有限，不適合多類別、復(fù)雜維度的分類。
平鋪展示搜索條件內(nèi)容，每個(gè) Tab 標(biāo)簽代表一個(gè)篩選維度，操作便捷。Tab 標(biāo)簽的數(shù)量不宜過多。
B 端類產(chǎn)品數(shù)據(jù)量豐富，在實(shí)際使用時(shí)，簡單的方式很難全面覆蓋到各個(gè)搜索場景，精準(zhǔn)定位搜索結(jié)果。所以通過多個(gè)篩選維度的結(jié)合，形成多屬性的組合搜索，能夠大幅提升搜索結(jié)果的準(zhǔn)確性。
B端系統(tǒng)還有一種比較常見的搜索類型，是在定向搜索的基礎(chǔ)上，進(jìn)一步豐富了搜索選項(xiàng)，比如指定搜索的時(shí)間范圍、數(shù)據(jù)類型等，設(shè)置的選項(xiàng)越詳細(xì)越能夠提升搜索結(jié)果的效果和準(zhǔn)確性。
在設(shè)計(jì)時(shí)需要注意，B 端系統(tǒng)用戶角色多，層次不同，所以更加需要注重搜索前的引導(dǎo)，針對搜索規(guī)則、搜索限制等，應(yīng)該適時(shí)的以簡練易懂的語言提示。
多標(biāo)簽?zāi)：阉鳎罕砀穸鄠€(gè)數(shù)據(jù)都具有特征，往往業(yè)務(wù)要求對數(shù)據(jù)的精確度較高。
適用場景：業(yè)務(wù)類型多樣用戶可能記憶不精確且有多個(gè)數(shù)據(jù)特征，對搜索的便捷性要求高精確性要求低。
多屬性組合搜索：可以輸入多個(gè)字段進(jìn)行組合搜索（取并集），對空間的利用率高，適合更加復(fù)雜的列表內(nèi)容。
適用場景：綜合篩選項(xiàng)，對空間的利用率高，多標(biāo)簽組合搜索可以得到較為精準(zhǔn)的搜索結(jié)果。
聊了這么多搜索內(nèi)容，與設(shè)計(jì)師密切相關(guān)且對外輸出的首要就是搜索欄設(shè)計(jì)。
對于用戶來說，搜索是為了解決用戶明確或者不明確的搜索需求，讓用戶能夠快速準(zhǔn)確搜到想搜的內(nèi)容。設(shè)計(jì)欄設(shè)計(jì)的目的就是，讓搜索能夠提高用戶獲取信息、內(nèi)容的效率。
常見搜索框設(shè)計(jì)樣式
1、填充色：通常選用與頁面背景顏色反差較大的顏色作為搜索框的填充色，方便用戶查找。
2、線框：多用于干凈簡潔的背景頁面。
3、投影：常用于風(fēng)格簡潔輕量的風(fēng)格頁面，同時(shí)搜索功能級別較高的場景。
4、透明度：常用于背景色復(fù)雜的場景，目的是為不破壞背景頁面的整體效果，在視覺上更和諧。 無外框：用于風(fēng)格簡潔的大留白的頁面。
完整的搜索流程包含了各種細(xì)節(jié)：例如搜索欄的形式、光標(biāo)停留、輸入狀態(tài)、異常數(shù)據(jù)、搜索結(jié)果、二次篩選等等。整個(gè)過程包含很多交互的細(xì)節(jié)設(shè)計(jì)，下面從激活搜索欄、輸入反饋、觸發(fā)方式來展開說明。
搜索激活指用戶激活搜索框時(shí)出現(xiàn)的搜索下拉面板，B端業(yè)務(wù)中搜索激活內(nèi)容常見以下三種：
搜索記錄通常以標(biāo)簽或列表的形式顯示，以時(shí)間順序從新到舊排列，一般不會完全展示，可以滑動(dòng)查看更多，或者折疊展開。
注意：搜索記錄會涉及對用戶行為的記錄，關(guān)系到用戶的搜索隱私，所以應(yīng)當(dāng)允許用戶手動(dòng)刪除。
在 PC 端產(chǎn)品具有頁面空間優(yōu)勢，用戶的搜索過程完全是通過搜索欄完成的。
搜索欄中會增加歷史搜索記錄，下方增加推薦關(guān)鍵詞，幫助用戶快速完成搜索。同時(shí)也可以喚醒用戶對某些商品的興趣和記憶，從而挖掘用戶潛在的搜索需求，這一點(diǎn)電商產(chǎn)品用得偏多。
在面板中展示“搜索歷史”和“最近瀏覽”，增加相關(guān)內(nèi)容曝光，去給用戶提供更多選擇以觸達(dá)目標(biāo)內(nèi)容，該交互形式通常出現(xiàn)在全局性搜索或多維度搜索功能中。
搜索發(fā)現(xiàn)是系統(tǒng)基于用戶的搜索記錄，依據(jù)算法向用戶展示的搜索關(guān)鍵詞推薦，但并不是必需模塊，可以基于產(chǎn)品定位進(jìn)行考量。常規(guī)的c端產(chǎn)品上用得多，B端產(chǎn)品用得少。
由于搜索發(fā)現(xiàn)也涉及用戶隱私，但應(yīng)用一般不會讓用戶直接刪除，所以應(yīng)當(dāng)允許用戶對搜索發(fā)現(xiàn)進(jìn)行隱藏，不然極其容易引起用戶的反感。淘寶、京東都有搜索發(fā)現(xiàn)，并且也允許用戶進(jìn)行關(guān)閉/顯示的操作。
熱門推薦是搜索推薦頁里面內(nèi)容推薦的總稱，可以演變成多種推薦形式，比如“熱搜推薦”、“推薦活動(dòng)”等，熱門搜索是應(yīng)用商業(yè)化的重要手段，許多應(yīng)用都有這種模塊，并且內(nèi)容形式多樣。
知乎的熱搜就是結(jié)合熱搜、時(shí)事熱點(diǎn)等進(jìn)行推薦。
搜索反饋指用戶輸入本文時(shí)未確認(rèn)搜索執(zhí)行的中間過程狀態(tài)。在B端場景下搜索反饋具備很強(qiáng)的引導(dǎo)作用給予用戶當(dāng)下的狀態(tài)提示；
是通過已輸入的關(guān)鍵詞來預(yù)測可以找到的搜索結(jié)果，為用戶創(chuàng)造更加便捷的體驗(yàn)。
搜索聯(lián)想承載的不止顯性的設(shè)計(jì)呈現(xiàn)，還有背后的算法邏輯；例如是否可以識別拼音、不同搜索方式呈現(xiàn)的聯(lián)想詞范圍，都需要提前確認(rèn)落地可行性后再統(tǒng)一定義相關(guān)交互規(guī)則，并在產(chǎn)品中的所有搜索場景中保持相同的交互邏輯。
用戶在搜索時(shí)輸入了錯(cuò)誤的詞匯，系統(tǒng)經(jīng)過判斷后會展示正確詞匯的搜索結(jié)果給用戶，并友好地告知用戶正確的搜索方式。特殊狀態(tài)包含無結(jié)果狀態(tài)、網(wǎng)絡(luò)不佳狀態(tài)等。
實(shí)時(shí)搜索+實(shí)時(shí)顯示；搜索只有一個(gè)文本輸入框，沒有按鈕可點(diǎn)擊，這樣的搜索交互是通過輸入關(guān)鍵詞后，系統(tǒng)自動(dòng)檢測所有內(nèi)容中符合關(guān)鍵詞的目標(biāo)信息，隨著關(guān)鍵詞的持續(xù)輸入，與之相匹配的結(jié)果會逐漸減少、直至找到目標(biāo)，類似自定義篩選功能。
這種交互一般對于數(shù)據(jù)信息比較少的情況下會比較友好，加載的速度更快，避免服務(wù)器的壓力太大、影響反饋效率，例如地址搜索、查找聯(lián)系人等。
關(guān)鍵詞輸入完成后，需要手動(dòng)點(diǎn)擊搜索按鈕向服務(wù)器發(fā)送指令才會得到相應(yīng)的搜索結(jié)果，這種方式適合大部分表格場景，更加適合B端產(chǎn)品復(fù)雜且龐大的數(shù)據(jù)場景。
搜索結(jié)果頁是用戶搜索的落腳點(diǎn)，在這個(gè)頁面，用戶會有目的性地瀏覽搜索結(jié)果。
搜索結(jié)果中隱含著搜索邏輯，全局搜索場景下多數(shù)為模糊搜索，即把與搜索關(guān)鍵詞詳盡的內(nèi)容頁反饋出來，匹配度低，需要花時(shí)間對結(jié)果二次篩選。
1. 快速瀏覽數(shù)據(jù)，并能夠準(zhǔn)確找到數(shù)據(jù)。
2. 需要經(jīng)常變換條件的組合迭代查詢數(shù)據(jù)，對查詢結(jié)果精準(zhǔn)定位。這就需要搜索結(jié)果后，不要清除用戶的查詢內(nèi)容。
3. 對數(shù)據(jù)進(jìn)行操作，如收藏、刪除、下載等。
不同的內(nèi)容需要不同的頁面布局來支撐的，b端場景中最常見的兩種布局，篩選上下布局和左右布局，當(dāng)然內(nèi)容部分又分列表布局和柵格布局。
1、凸顯關(guān)鍵信息：
為了便于用戶找到精準(zhǔn)高效的信息或者進(jìn)行便捷操作，在搜索聯(lián)想頁狀態(tài)時(shí)，當(dāng)用戶輸入的信息足夠清晰可預(yù)測，可以將關(guān)鍵信息凸顯呈現(xiàn)，以引起用戶的注意力，在進(jìn)入搜索結(jié)果頁之前就可以提升轉(zhuǎn)化的可能性。
此外，這種關(guān)鍵信息凸顯的形式，在搜索的商業(yè)轉(zhuǎn)化方面也有明顯的作用。
2、沒有結(jié)果，如何設(shè)計(jì)
搜索沒有結(jié)果會讓用戶感到非常沮喪的，尤其是當(dāng)用戶進(jìn)行了好幾次搜索之后，依然沒有結(jié)果，應(yīng)當(dāng)為他們提供有價(jià)值的替代品。
一般出現(xiàn)無結(jié)果的狀態(tài)有兩種情況：
a. 用戶輸入錯(cuò)誤，一般會提用戶正確的搜索方式，并且自動(dòng)幫助用戶糾錯(cuò)，
b.搜索結(jié)果無，這種情況一般設(shè)計(jì)會以空狀態(tài)提示用戶，采用友好的方式提醒用戶更換關(guān)鍵詞。
在使用中，搜索本身應(yīng)該是0思考成本的，否則就失去了索引的核心價(jià)值，基于此，總結(jié)一下5個(gè)設(shè)計(jì)注意點(diǎn)：
當(dāng)用戶輸入搜索文本，點(diǎn)擊搜索按鈕，就進(jìn)入了搜索結(jié)果頁流程，此時(shí)搜索框內(nèi)應(yīng)當(dāng)保留搜索文本，以便于用戶明確搜索的內(nèi)容（不要依賴用戶的記憶力），同時(shí)，也便于用戶再次編輯搜索文本。
考慮到輸入/清除的便捷性，應(yīng)用也應(yīng)當(dāng)提供一鍵清除按鈕，點(diǎn)擊一鍵清除搜索的文本，減少用戶的操作成本。
搜索項(xiàng)目不可避免的比較多時(shí)，可以進(jìn)行分類展示，降低尋找成本，常用的有兩種分類方式：
無效的自動(dòng)建議讓整個(gè)搜索體驗(yàn)降低，而精準(zhǔn)的自動(dòng)建議會讓整個(gè)體驗(yàn)好上許多，它會根據(jù)用戶用戶的輸入內(nèi)容（詞匯詞根和后臺數(shù)據(jù)）為用戶提供有用和精準(zhǔn)的輸入內(nèi)容建議，這有助于幫助用戶提高搜索過程的精準(zhǔn)度，提升整個(gè)搜索體驗(yàn)。
輸入錯(cuò)誤絕對是最常見的錯(cuò)誤，如果用戶錯(cuò)誤地輸入某個(gè)關(guān)鍵詞，而你的檢測到了，并且針對錯(cuò)誤提供更正之后的結(jié)果，這樣就成功的規(guī)避了因?yàn)殄e(cuò)誤的關(guān)鍵詞所導(dǎo)致的不良后果，用戶也不用再次進(jìn)行搜索了。
即使用戶熟知搜索引擎的全部功能，也需要借助大腦記憶來挑選關(guān)鍵詞，進(jìn)行搜索。
想要找出有意義的、可用的搜索關(guān)鍵詞搭配，用戶需要結(jié)合他們的搜索方向，最近的查詢，聯(lián)想相關(guān)的屬性和關(guān)鍵詞，使搜索體驗(yàn)更便捷流暢。
總結(jié)
搜索是我們?nèi)粘Ｖ蓄l繁接觸的功能，看似簡單，背后都隱藏了很多流程與邏輯，不建議設(shè)計(jì)師盲目遵從原型依葫蘆畫瓢。
設(shè)計(jì)師更應(yīng)該在設(shè)計(jì)之初從業(yè)務(wù)類型、功能定位、使用場景等多維度綜合分析選擇，從交互體驗(yàn)層面去深思搜索功能，因?yàn)樗阉鞒藬?shù)據(jù)匹配精準(zhǔn)度、搜索內(nèi)容廣度之外，搜索體驗(yàn)的便捷性也會影響用戶搜索的感受。
每一處細(xì)節(jié)背后的設(shè)計(jì)思路就變得尤為重要。
本文總結(jié)梳理了搜索功能，從搜索基本屬性、應(yīng)用場景，到搜索分類，再到搜索欄設(shè)計(jì)，都進(jìn)行了闡述，最后再總結(jié)了搜索設(shè)計(jì)的一些注意點(diǎn)。希望你能夠幫忙理解搜索功能的設(shè)計(jì)。
作者：三原設(shè)計(jì)社
鏈接：https://www.zcool.com.cn/article/ZMTUzOTE0OA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
不知道你們有沒有思考過“對話框”和“彈窗”的區(qū)別，我們平常所稱呼的“彈窗”主要著眼于動(dòng)作，意思就是彈出來的窗口，是泛指，在GUI（Graphical User Interface）屏幕中幾乎所有彈出來的對象都可以稱之為“彈窗”。
在常用的兩個(gè)前端網(wǎng)頁開發(fā)組件Ant Design和ElementUI中，沒有單獨(dú)命名為“彈窗”的組件，都是細(xì)分在各個(gè)功能分類中。比如Ant Design中相關(guān)的細(xì)分就有警告提示、全局提示、對話框、通知提醒框、氣泡確認(rèn)框等，而ElementUI中則又是不一樣的細(xì)分法，除了分類方法和命名不一樣，歸根結(jié)底達(dá)到的目的是一樣的，以上我們都可稱之為“彈窗”，當(dāng)然在工作中用細(xì)分的稱呼會更專業(yè)更明確。
這里的“窗口”對標(biāo)“對話框”和“彈窗”的概念，窗口是承載應(yīng)用程序的區(qū)域，應(yīng)用程序的窗口被打開，則表示該應(yīng)用程序正在運(yùn)行中。窗口可以移動(dòng)、可以放大縮小，主要有二種姿態(tài)，一種是“獨(dú)占式”，一種是“暫時(shí)式”。顧名思義，“獨(dú)占式”就是需要占據(jù)大部分屏幕的應(yīng)用，ps、ai的窗口就是“獨(dú)占式”窗口，而“暫時(shí)式”則大部分時(shí)間在后臺運(yùn)行，比如音樂播放器、殺毒軟件等，只需在必要時(shí)打開即可。
一個(gè)應(yīng)用通常由一個(gè)主窗口和若干輔助窗口構(gòu)成，彈窗就是典型的輔助窗口之一。
對話框強(qiáng)調(diào)了用戶與計(jì)算機(jī)進(jìn)行對話的過程，是疊加在應(yīng)用主窗口上的彈出框，一般在對話中它會給出消息或要求輸入。當(dāng)對話完成后，即可關(guān)閉對話框。說人話就是，對話框一般需要用戶進(jìn)行操作，當(dāng)用戶輸入或者點(diǎn)擊“確認(rèn)”、“取消”等按鈕時(shí)，計(jì)算機(jī)會根據(jù)指令進(jìn)行工作，這是一個(gè)人機(jī)“對話”的過程，因此稱之為“對話框”。
無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對話被打斷，所以對話框通常是模態(tài)的（下文會解釋模態(tài)和非模態(tài)的定義）。
梳理完三個(gè)容易混淆的概念之后，接下來主要從彈窗的二個(gè)角度展開討論：彈窗的分類和應(yīng)用場景；彈窗的設(shè)計(jì)細(xì)節(jié)和技巧。
彈窗可分為兩大類型：“模態(tài)彈窗”和“非模態(tài)彈窗”。
模態(tài)彈窗：用戶必須給予彈窗反饋，除非點(diǎn)擊關(guān)閉或者操作完成，否則彈窗會一直在。形式上來說就是給當(dāng)前頁面添加蒙層，使用戶將注意力集中在彈窗上。上文提到，無論在現(xiàn)實(shí)中還是界面交互中，我們都不希望對話被打斷，模態(tài)彈窗不會輕易被打斷，所以對話框通常也都是模態(tài)彈窗。
模態(tài)彈窗的常見場景：你打開了一個(gè)應(yīng)用的模態(tài)彈窗后沒有管它，然后切換到其他應(yīng)用程序中去，等你忙完回到原來的應(yīng)用時(shí)，那個(gè)當(dāng)初的模態(tài)彈窗仍舊在那兒等你。這就是模態(tài)彈窗，雖然看起來僵硬死板，但是它的目的和使用范圍通常是非常清晰的。
非模態(tài)彈窗：不需要給出反饋，不影響用戶的其他操作，主要有屬性配置彈窗、Tooltips、消息通知、氣泡框等類型。
下圖紅框中就是典型的非模態(tài)彈窗，它們可以同時(shí)開啟且互不影響，不會影響主程序的進(jìn)程。
非模態(tài)彈窗的另一個(gè)特點(diǎn)就是：實(shí)時(shí)生效。點(diǎn)開非模態(tài)彈窗的同時(shí)仍然可以看見主界面，主界面會根據(jù)你的操作實(shí)時(shí)變化，你可以隨心所欲地不斷選擇、改變、選擇、改變，而模態(tài)彈窗則無法在你點(diǎn)擊其中一個(gè)表單的當(dāng)下立即做出改變。
下圖例子就是非模態(tài)的屬性配置彈窗。
出于營銷目的，這類彈窗都會第一時(shí)間出現(xiàn)在你面前，直到手動(dòng)關(guān)閉，它的特點(diǎn)就是不用登錄也會出現(xiàn)，提高曝光率，便于拉新和轉(zhuǎn)化。
主要是為了將一些重要信息通知給用戶，這些信息要么來自一些被觸發(fā)的事件，要么來自應(yīng)用開發(fā)者的信息，一般在用戶登錄后第一時(shí)間彈出，確保用戶不會錯(cuò)過。需要注意的是，在應(yīng)用的通知中心一般也需要保留這類重要或者高級別的通知，以便用戶可以隨時(shí)查看回顧。
提示類彈窗是由應(yīng)用程序主動(dòng)彈出的消息，主要有三種狀態(tài)：錯(cuò)誤、警告、確認(rèn)。通常是用戶進(jìn)行某項(xiàng)操作后給出的反饋信息，會中斷當(dāng)前工作流，屬于阻塞型提示。
以上都屬于通知公告類的“模態(tài)彈窗”，特點(diǎn)就是一般不需要用戶具體操作，用戶將其關(guān)閉或者點(diǎn)擊“確認(rèn)”等按鈕即代表用戶已經(jīng)接收到該消息，彈窗就完成了它的任務(wù)。
“簡單”意義上的彈窗可以理解為只有平鋪的表單讓你選擇或輸入，交互清晰明了。比如創(chuàng)建項(xiàng)目、分享鏈接、更改名稱等操作。
有些應(yīng)用的功能配置中有很多復(fù)雜的屬性，簡單平鋪的彈窗無法滿足需求，需要分層分類歸納，于是從20世紀(jì)90年代開始出現(xiàn)了選項(xiàng)卡/標(biāo)簽頁彈窗。它的優(yōu)點(diǎn)是合理利用了空間，也能讓用戶更好的理解信息層級。
mac os 8.5系統(tǒng)的彈窗（發(fā)布于1998年10月）
monday.com的配置彈窗（簡潔的標(biāo)簽頁）
標(biāo)簽頁彈窗的設(shè)計(jì)必須合理且適度，找到信息之間的因果關(guān)系，仔細(xì)斟酌并加以連接整理。同時(shí)，單個(gè)彈窗中的標(biāo)簽頁不宜過多，一般不超過五個(gè)（動(dòng)態(tài)可增減的標(biāo)簽頁除外）。
如果你的標(biāo)簽頁過度堆疊，你需要嘗試改變交互方式，重新整理信息。一種辦法是增加標(biāo)簽頁的深度，將能夠歸納在一起的內(nèi)容盡量整合，放置在單個(gè)標(biāo)簽頁中；另一種辦法是拆分信息，分成多個(gè)簡單的彈窗。
下圖中的例子就是第一種辦法，整個(gè)彈窗有三個(gè)標(biāo)簽頁，但是單個(gè)標(biāo)簽頁中又劃分了更詳細(xì)的結(jié)構(gòu)化信息，是一個(gè)典型的標(biāo)簽頁少但信息量大的彈窗。
流程步驟彈窗與標(biāo)簽頁彈窗接近，區(qū)別就是步驟彈窗需按順序進(jìn)行，一般上一步未完成之前無法進(jìn)入下一步，用戶注冊常用這種方式。
屬性配置彈窗主要為了讓用戶改變某一對象的屬性，可以是局部屬性也可以是全局屬性。
屬性配置也可以用模態(tài)彈窗，如何選擇用“模態(tài)”還是“非模態(tài)”？當(dāng)你需要讓用戶實(shí)時(shí)看到界面的變化或者表單項(xiàng)簡單的時(shí)候可以選擇“非模態(tài)”，如果操作復(fù)雜或者信息加載比較耗時(shí)，則采用“模態(tài)”更合理。
下圖為實(shí)時(shí)生效的日期選擇彈窗
下拉菜單幾乎都是非模態(tài)，它的優(yōu)勢明顯，沒有復(fù)雜操作和各種表單，只需要鼠標(biāo)劃過點(diǎn)擊即可，快速高效。
上文中應(yīng)用級的消息提示通常是模態(tài)彈窗，而非模態(tài)的消息提示彈窗則通常從頁面的頂部或者右側(cè)彈出，這類彈窗可以長時(shí)間駐留在屏幕邊緣，也可以一段時(shí)間后自動(dòng)消失。
點(diǎn)擊按鈕時(shí)，彈出氣泡式的彈窗就是氣泡框，氣泡框可以針對元素進(jìn)行簡單的操作，尺寸也會根據(jù)內(nèi)容大小不一。
Tooltips跟上圖的氣泡框很類似，區(qū)別在于Tooltips更輕量，屬于頁面中最小的彈窗類型，用于功能的提示說明，通常都是文字，背景用深色來與主界面拉開層次。
一般來說，如果是明確的屬性配置彈窗都應(yīng)該有一個(gè)標(biāo)題來說明用途或功能，以及關(guān)聯(lián)的動(dòng)詞來方便理解。比如“創(chuàng)建列表”、“刪除列表”、“修改配置”、“配置參數(shù)”等，不同標(biāo)題對應(yīng)不同的功能場景，前提是方便理解。另外，動(dòng)詞在名詞前面或者后面都可以，注意統(tǒng)一規(guī)范即可，不要一會兒在前一會兒在后。
標(biāo)題字號一般比默認(rèn)文本字號大2px或4px，也有應(yīng)用為了突出標(biāo)題，選擇使用更大的字號，但大的字號也應(yīng)該符合文字規(guī)范，而不是隨意使用。
模態(tài)彈窗應(yīng)至少包含一個(gè)以上的關(guān)閉方式，常見的彈窗關(guān)閉方式有4種：（1）、右上角的關(guān)閉按鈕；（2）、彈窗底部的“取消”按鈕；（3）、彈窗外的任意區(qū)域；（4）、一段時(shí)間后自動(dòng)消失。
“關(guān)閉”按鈕在彈窗外：常見于營銷彈窗，一方面按鈕遠(yuǎn)離彈窗，比較隱蔽，拖延用戶關(guān)閉彈窗的時(shí)間，提高信息的曝光率。
“關(guān)閉”按鈕在彈窗上：版式設(shè)計(jì)中有一個(gè)“破型”的概念，是一種打破規(guī)矩的設(shè)計(jì)技巧，能讓畫面快速吸引眼球，所以營銷類彈窗經(jīng)常采用這種設(shè)計(jì)方法。這種概念可以理解為，我們希望用戶關(guān)注于被強(qiáng)調(diào)的部分，常見的場景就是ios系統(tǒng)批量刪除App的時(shí)候，應(yīng)用圖標(biāo)左上角會出現(xiàn)“移除”按鈕。這種方式強(qiáng)調(diào)了“關(guān)閉”按鈕，視覺上增加層次外，用戶的關(guān)閉體驗(yàn)也更佳，減輕干擾性彈窗對用戶的負(fù)面情緒。
“關(guān)閉”按鈕在彈窗內(nèi)：這是應(yīng)用最廣泛最不容易出錯(cuò)的方式，對用戶來說，固定在彈窗右上角的“關(guān)閉”按鈕代表了安全感，在誤操作或者想中斷操作時(shí)我們會自然而然地去右上角點(diǎn)擊“關(guān)閉”。
彈窗底部的按鈕一般有2種功能:（1）、取消或者確認(rèn)；（2）、進(jìn)入下一步流程。基于大多數(shù)用戶右手掌握鼠標(biāo)的習(xí)慣，一般按鈕居右下角的設(shè)計(jì)方式更廣泛。這些按鈕上的文字大不相同，代表了對計(jì)算機(jī)的不同指令，但相同的結(jié)果都是關(guān)閉了當(dāng)前彈窗。
有些應(yīng)用也會采取按鈕居左的設(shè)計(jì)，這種方式有一個(gè)優(yōu)點(diǎn)就是減少誤操作，讓按鈕遠(yuǎn)離鼠標(biāo)點(diǎn)擊熱區(qū)。
這種方式一般用于模態(tài)彈窗，除了彈窗中的關(guān)閉按鈕外，點(diǎn)擊彈窗外的任意區(qū)域關(guān)閉體驗(yàn)更佳。操作配置類彈窗不建議采用這種方式，容易誤操作導(dǎo)致正在配置中的彈窗被關(guān)閉。
B端彈窗的標(biāo)題字號通常比內(nèi)容文本大2px或4px，常用字號為12px、14px、16px，14px為默認(rèn)文本字號，12px為輔助說明字號，也有緊湊型頁面將12px作為常規(guī)字號。無論選用何種字號，都應(yīng)跟主界面的字體規(guī)范保持一致。
左對齊：彈窗中應(yīng)用最多的對齊方式，適合表單較多的配置類彈窗。
居中對齊：常見于消息提示類彈窗，適合圖文結(jié)合或者信息較少時(shí)的排版方式。
兩邊對齊：兩邊對齊的方式讓彈窗看起來更規(guī)整，適用于平鋪的配置類彈窗。一般表單較多的情況下不建議使用兩邊對齊的方式，一方面左對齊比兩邊對齊看起來更有層次，另一方面多表單時(shí)兩邊對齊會使彈窗看起來冗長。
除了對齊方式，表單的排列是B端彈窗中最令人頭疼的一塊內(nèi)容了，在一些復(fù)雜的操作彈窗中，常常包含各種類型的表單，例如下拉框、輸入框、日期框、穿梭框以及各種組合模式的表單項(xiàng)，很容易讓表單看起來凌亂，也影響了交互操作。
單行一個(gè)表單項(xiàng)：常見的表單排列，適用于表單較少的排版方式。
單行多表單并排：在復(fù)雜場景中，單行只排列一個(gè)表單項(xiàng)會讓彈窗超長，因此會采用多個(gè)表單并列分布的方式。這種方式存在2個(gè)問題：（1）、如果表單的標(biāo)題長短不一，看起來參差不齊，下圖中的表單標(biāo)題一樣長是最理想的場景；（2）、橫向距離長，導(dǎo)致彈窗過大。
標(biāo)題與表單分行排列：越來越多的應(yīng)用采用這種表單排版方法，這種方法可以兼顧更多場景，可拓展性也更高。這種方法會增加縱向空間的占用，不過眼睛焦點(diǎn)的縱向?yàn)g覽比橫向?yàn)g覽獲取信息效率更高，所以在表單復(fù)雜的情況下，相比于上一種方法也是一種更優(yōu)解。
表單的排版不只局限于一種，我們需要根據(jù)表單內(nèi)容來設(shè)計(jì)。但是需要注意3點(diǎn)：
(1)、當(dāng)表單標(biāo)題長短不一，上下無法等距排列時(shí)，我們要盡量將標(biāo)題和表單分行排列；
(2)、一行不要出現(xiàn)太多的表單項(xiàng)，一般來說彈窗中最多一行排列三個(gè)；
(3)、表單的靈活性很強(qiáng)，哪些需要寬度固定，哪些需要根據(jù)內(nèi)容可擴(kuò)展可換行，我們都要在設(shè)計(jì)中加以規(guī)范說明，多考慮可能會出現(xiàn)的樣式問題，提前規(guī)避。
彈窗是一個(gè)容器，容器的大小取決于放置其中的內(nèi)容物。這里主要討論場景復(fù)雜的對話框的尺寸規(guī)范，其他例如Tooltips之類可作為單獨(dú)的組件在需要的場景直接調(diào)用即可。
對話框的大小主要根據(jù)內(nèi)容而定，B端應(yīng)用中，一個(gè)尺寸無法滿足所有類型的彈窗需求，所以我們要設(shè)定幾種常規(guī)尺寸，一般可設(shè)定為4種：S（通知提示類）、M（配置簡單）、L（配置復(fù)雜或者擴(kuò)展詳情）、特殊（根據(jù)實(shí)際情況而定）。pc的小屏幕分辨率為1024*768，所以高度盡量控制在600px以內(nèi)（除去導(dǎo)航欄、工具欄高度），寬度控制在1000px以內(nèi)，如果你所設(shè)計(jì)的B端產(chǎn)品在某個(gè)固定的場景中使用，也可以根據(jù)使用場景而定，原則就是要讓彈窗能夠一屏展示完全。
這里主要分享一個(gè)小技巧，對于彈窗來說很實(shí)用。sketch右側(cè)屬性面板有一個(gè)“調(diào)整尺寸“功能，非常適合各種組件化的應(yīng)用。不同場景下我們會需要不同尺寸的彈窗，有了這個(gè)功能，我們不需要每個(gè)彈窗都畫一遍，只需要?jiǎng)?chuàng)建一組基本的彈窗規(guī)范，其他尺寸可以根據(jù)所需場景調(diào)整。
未調(diào)整過的組件不能隨意更改尺寸，否則將變形不可用。
創(chuàng)建彈窗組件時(shí)，把彈窗里需要固定不便的尺寸參數(shù)設(shè)置好。（設(shè)置方法：靠左的左邊固定，靠右的右邊固定，對角的靠兩個(gè)邊固定，分割線高度固定，文字圖標(biāo)寬高都固定）。
設(shè)置好后的彈窗組件即可在設(shè)計(jì)稿中隨意調(diào)整大小，固定參數(shù)不會發(fā)生變化，因此我們在設(shè)計(jì)規(guī)范中只需要做一種或二三種常見的彈窗樣式即可，不需要把設(shè)計(jì)稿中的每種尺寸都放到設(shè)計(jì)規(guī)范中。
表單同理，在組件中設(shè)置好參數(shù)后，調(diào)用時(shí)可以根據(jù)情況替換圖標(biāo)、文字和寬高，非常方便。
在B端設(shè)計(jì)中，隨著數(shù)據(jù)量的增加和業(yè)務(wù)線的擴(kuò)大，設(shè)計(jì)師在設(shè)計(jì)時(shí)，常常需要考慮到交互的可擴(kuò)展性，我們設(shè)計(jì)的交互至少要滿足未來半年到一年的產(chǎn)品應(yīng)用。因此作為使用頻率很高的彈窗，我們在設(shè)計(jì)時(shí)尤其需要考慮全面，不只為了滿足當(dāng)前的場景，也要考慮未來可能應(yīng)用的場景。
作者：time不休
鏈接：https://www.zcool.com.cn/article/ZMTE3NjYyMA==.html
來源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 B端ui設(shè)計(jì)文章及欣賞
藍(lán)藍(lán)設(shè)計(jì)的小編 B端ui設(shè)計(jì)文章及欣賞
藍(lán)藍(lán)設(shè)計(jì)的小編 B端ui設(shè)計(jì)文章及欣賞
一、引言 在數(shù)字化轉(zhuǎn)型的大潮中，B端（Business-to-Business）服務(wù)市場日益繁榮，企業(yè)對高效、智能化、定制化的業(yè)務(wù)管理系統(tǒng)需求迫切。B端用戶中心作為連接企業(yè)與服務(wù)商的關(guān)鍵橋梁，其設(shè)計(jì)不僅關(guān)乎用戶體驗(yàn)，更直接影響到企業(yè)的運(yùn)營效率與市場競爭力。本文將從設(shè)計(jì)原則、功能模塊、用戶體驗(yàn)及數(shù)據(jù)安全四個(gè)維度，深入剖析B端用戶中心的設(shè)計(jì)要點(diǎn)。 二、設(shè)計(jì)原則 ...
藍(lán)藍(lán)設(shè)計(jì)的小編 B端ui設(shè)計(jì)文章及欣賞
一、項(xiàng)目背景
(一)在當(dāng)下數(shù)字化浪潮中，各類大模型如語言、圖像生成模型不斷涌現(xiàn)，企業(yè)與機(jī)構(gòu)對其應(yīng)用需求激增。然而，模型開發(fā)流程繁瑣、部署成本高昂，不同模型間數(shù)據(jù)交互與共享困難重重。同時(shí)，模型性能優(yōu)化、安全管理等問題亟待解決。在此背景下，大模型管理平臺應(yīng)運(yùn)而生，它旨在整合資源，簡化模型開發(fā)與部署流程，提升模型性能與安全性，為各行業(yè)高效利用大模型提供有力支持，助力人工智能技術(shù)深度融入業(yè)務(wù)。
(二)該系統(tǒng)的原首頁中信息量比較少，在設(shè)計(jì)時(shí)除了對頁面美觀的優(yōu)化，從內(nèi)容、布局、用戶使用場景、使用習(xí)慣、交互方式等方 面也進(jìn)行考慮，增加了一些統(tǒng)計(jì)的圖表， 「歷史訪問信息」采用卡片式列表，突出模塊和內(nèi)容。同時(shí)增加「個(gè)人上傳記錄」信息和「歷史訪問信息」可以進(jìn)行 切換查看。
二、項(xiàng)目概述
(一)產(chǎn)品定位
大模型管理平臺定位為人工智能領(lǐng)域的核心樞紐。它是模型全生命周期的智慧管家，從研發(fā)時(shí)整合數(shù)據(jù)與算法資源，到部署時(shí)適配多元硬件環(huán)境，再到運(yùn)營中實(shí)時(shí)監(jiān)測性能，全方位守護(hù)。同時(shí)，它也是跨行業(yè)的賦能引擎，為金融、醫(yī)療、制造等行業(yè)提供定制化模型服務(wù)，加速業(yè)務(wù)智能化轉(zhuǎn)型。
(二)目標(biāo)用戶
大模型管理平臺的目標(biāo)用戶廣泛且多元?？萍计髽I(yè)研發(fā)團(tuán)隊(duì)、金融機(jī)構(gòu)從業(yè)者、醫(yī)療行業(yè)的研究人員和臨床醫(yī)生、教育領(lǐng)域的課程開發(fā)者與教育科技企業(yè)。此外，政府部門進(jìn)行城市規(guī)劃、交通管理等決策時(shí)，也能從平臺獲取支持。這些用戶都期望通過大模型管理平臺，挖掘數(shù)據(jù)價(jià)值，實(shí)現(xiàn)業(yè)務(wù)的智能化升級 。
(三)設(shè)計(jì)風(fēng)格
系統(tǒng)首頁重構(gòu)信息組織架構(gòu)，豐富信息 和數(shù)據(jù)，同時(shí)頁面采用精美的圖標(biāo)和小 插圖提高頁面的精細(xì)美觀度。 設(shè)計(jì)風(fēng)格采用簡約的設(shè)計(jì)語言，清晰、 簡潔和直觀的表達(dá)方式，模塊化布局， 強(qiáng)調(diào)的是界面強(qiáng)調(diào)可復(fù)用性和通用性， 配色采用經(jīng)典藍(lán)色，藍(lán)色具有很好的兼 容性，可以與多種顏色搭配使用，形成 和諧的視覺效果。
三、設(shè)計(jì)亮點(diǎn)
(一)流程圖設(shè)計(jì)前后對比
「模型仿真評估流程」是首頁的主要功能區(qū)，在模塊布局上加中 比例成為頁面的聚焦區(qū)域，每個(gè)節(jié)點(diǎn)采用小插圖，插圖方便復(fù)制 及拓展、修改，提升設(shè)計(jì)開發(fā)效率，技術(shù)實(shí)現(xiàn)便捷，落地相對成 本低。增加了背景圖案，使該模塊更加有空間感，同時(shí)增加了整 個(gè)頁面的靈動(dòng)性。
(二)增加統(tǒng)計(jì)圖表
圖表能夠直觀地展示關(guān)鍵數(shù)據(jù)，使用戶一目了然地了解整體情況， 快速把握數(shù)據(jù)的變化趨勢和規(guī)律。其次，統(tǒng)計(jì)圖表有助于提升用 戶對數(shù)據(jù)的理解和分析能力，通過視覺化的方式展現(xiàn)數(shù)據(jù)間的關(guān) 聯(lián)和差異，降低理解難度，提高決策效率。同時(shí)，美觀的統(tǒng)計(jì)圖 表也能提升系統(tǒng)首頁的整體視覺效果，吸引用戶的注意力，增加 用戶的粘性。該區(qū)域后期也可以根據(jù)實(shí)際需求換成其它內(nèi)容。
四、首頁其他方案欣賞
蘭亭妙微(cqzjtgb.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。我們建立了一個(gè)微信群，每天分享國內(nèi)外優(yōu)秀的設(shè)計(jì)，有興趣請加入一起學(xué)習(xí)成長，咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://cqzjtgb.com