進(jìn)入公司后，主要是在百卓?jī)?yōu)采采購(gòu)管理軟件企業(yè)版（下文簡(jiǎn)稱“企業(yè)版”）做交互設(shè)計(jì)。接觸產(chǎn)品初期擒权，產(chǎn)品導(dǎo)向主要是以“需求功能”的添加诉植、相關(guān)功能點(diǎn)的優(yōu)化為主祥国。優(yōu)化的功能點(diǎn)以用戶反饋的居多，企業(yè)版中一些界面設(shè)計(jì)不合理晾腔、用戶體驗(yàn)不佳的地方舌稀，提出要優(yōu)化，大多會(huì)被產(chǎn)品經(jīng)理以“糖衣炮彈”擊破灼擂。
對(duì)于企業(yè)版“搜索區(qū)域”的優(yōu)化壁查，前期優(yōu)化方案提出來(lái)后，開發(fā)評(píng)估工作量很大剔应，且開發(fā)人員任務(wù)繁重睡腿，故暫被擱置语御。后來(lái)企業(yè)版進(jìn)入2.0版本，借此將“搜索區(qū)域”優(yōu)化排上日程席怪。
一应闯、優(yōu)化前
二、發(fā)現(xiàn)痛點(diǎn)
1挂捻、默認(rèn)情況下孽锥，“搜索區(qū)域”占用空間過(guò)大；
搜索區(qū)域在默認(rèn)（不展開）情況下细层，占了頁(yè)面近?的空間惜辑，在單據(jù)列表中，用戶的主視覺區(qū)域應(yīng)該更多的展示單據(jù)列表內(nèi)容疫赎，而不是讓輔助查看列表的“搜索區(qū)域”占用較大空間盛撑。
2、搜索項(xiàng)之間并沒有進(jìn)行很好的對(duì)齊捧搞，顯得很雜亂抵卫；
當(dāng)看到這個(gè)搜索時(shí)，內(nèi)心是極不舒服的胎撇，簡(jiǎn)單的搜索介粘，竟被玩出了這么多種“花樣”來(lái)。
示例：
無(wú)序的事物讓人煩躁晚树，沒有安全感姻采。
場(chǎng)景：用戶（采購(gòu)員）每天需要處理大量的單據(jù)業(yè)務(wù)，工作很繁忙爵憎，當(dāng)查看單據(jù)列表時(shí)慨亲，參差、雜亂的搜索界面與用戶的煩躁因子產(chǎn)生共鳴宝鼓，產(chǎn)生煩躁情緒刑棵，對(duì)產(chǎn)品的操作體驗(yàn)大打折扣。在用戶的工作過(guò)程中愚铡，與數(shù)字有較多的接觸蛉签，煩躁的情緒對(duì)其工作也會(huì)帶來(lái)一定的負(fù)面影響。
3沥寥、不能快速清除輸入框中的內(nèi)容
想要更改某個(gè)搜索項(xiàng)值（輸入框類型）碍舍，需要一個(gè)字一個(gè)字的去刪除，操作起來(lái)費(fèi)時(shí)营曼、麻煩乒验，操作體驗(yàn)不好。
三蒂阱、刺破痛點(diǎn)
刺破1：默認(rèn)情況下锻全，“搜索區(qū)域”占用空間過(guò)大狂塘；
- 頁(yè)面頂部的標(biāo)題主要作用是“導(dǎo)航標(biāo)識(shí)”。產(chǎn)品左側(cè)的菜單按鈕鳄厌，一方面有“點(diǎn)擊跳轉(zhuǎn)”的功能荞胡，另一方面菜單上的文字也具有“導(dǎo)航標(biāo)識(shí)”功能。兩者在功能上具有一定的重復(fù)性了嚎，且“內(nèi)容區(qū)域”本身也具有較強(qiáng)的識(shí)別性泪漂，所以考慮去掉頁(yè)面頂部標(biāo)題⊥嵊荆——?jiǎng)h除
- “搜索”按鈕和“更多搜索條件”/“精簡(jiǎn)搜索條件”萝勤，本身內(nèi)容不多，卻占據(jù)了一整行呐伞，降低了頁(yè)面空間的利用率敌卓，可將其移至“搜索區(qū)域”的右側(cè)。但是這樣做也會(huì)存在風(fēng)險(xiǎn)：會(huì)增大“搜索區(qū)域”的寬度伶氢，致使整個(gè)頁(yè)面寬度增加趟径，對(duì)于“小屏”用戶，在載入頁(yè)面時(shí)癣防，看不到“更多搜索條件”蜗巧，甚至“搜索”按鈕也可能被遮擋住。（在設(shè)計(jì)時(shí)蕾盯，需要對(duì)每個(gè)搜索項(xiàng)寬度進(jìn)行控制幕屹，以及一些文案內(nèi)容的精簡(jiǎn)）
設(shè)計(jì)草圖：
刺破2：搜索項(xiàng)之間并沒有進(jìn)行很好的對(duì)齊，顯得很雜亂刑枝；
借用《寫給大家看的設(shè)計(jì)書》中關(guān)于對(duì)齊的幾個(gè)觀點(diǎn)：
- 我們的眼睛喜歡看到有序的事物：這會(huì)給人一種平靜香嗓、安全的感覺迅腔。此外也有助于表達(dá)信息装畅。
- 任何元素都不能在頁(yè)面上隨意擺放。每個(gè)元素都應(yīng)該與頁(yè)面上的另外一個(gè)元素存在某種視覺聯(lián)系沧烈。
- 對(duì)齊的根本目的是要使頁(yè)面統(tǒng)一且有條理掠兄。其效果類似于把客廳里四處零落的洋娃娃撿起來(lái)，并把它們放在一個(gè)玩具箱中锌雀。
仔細(xì)觀察后發(fā)現(xiàn)蚂夕，相鄰兩個(gè)搜索項(xiàng)之間的距離都是相等的，但是因?yàn)樗阉黜?xiàng)控件類型的不同（輸入框腋逆、下拉框婿牍、日期控件等），導(dǎo)致其長(zhǎng)度不等惩歉。即使相鄰搜索項(xiàng)的間距相同等脂，但是整體看上去還是雜亂無(wú)章的俏蛮。
較好的解決方法是：將“搜索項(xiàng)”按照長(zhǎng)度進(jìn)行分類，分為“長(zhǎng)"上遥、“短”兩類搏屑。短的一類長(zhǎng)度統(tǒng)一定義為“1”、長(zhǎng)的一類長(zhǎng)度統(tǒng)一定義為“2”粉楚，通過(guò)劃分辣恋，搜索項(xiàng)就能夠排列整齊了。
設(shè)計(jì)草圖：
刺破3：不能快速清除輸入框中的內(nèi)容
場(chǎng)景：在“關(guān)鍵字搜索”中模软，輸入某個(gè)供應(yīng)商名稱后伟骨，需要對(duì)其進(jìn)行修改。
途徑：①：鼠標(biāo)選中輸入的內(nèi)容燃异，通過(guò)鍵盤進(jìn)行清除底靠；
②： 將光標(biāo)定位在所輸入內(nèi)容的末端特铝，通過(guò)鍵盤一個(gè)一個(gè)清除暑中；
分析：兩種方法都是通過(guò)“鼠標(biāo)”+“鍵盤”的組合來(lái)完成“清除"操作。對(duì)于“途徑①”還是較快捷的完成清除操作鲫剿，但是“途徑②”的操作是比較繁瑣的鳄逾，操作體驗(yàn)并不好。
嘗試：
- 在輸入框的末端放置一個(gè)“x”號(hào)灵莲，鼠標(biāo)點(diǎn)擊即可快速清除輸入框里的內(nèi)容雕凹。
- 該方法只需通過(guò)鼠標(biāo)點(diǎn)擊即可完成“清除”操作，一方面降低了該功能對(duì)設(shè)備的依賴度政冻，另一方面枚抵，“x”號(hào)也能夠引導(dǎo)用戶通過(guò)點(diǎn)擊來(lái)快速完成清除操作。
設(shè)計(jì)草圖：
四明场、方案輸出
經(jīng)過(guò)前期的痛點(diǎn)分析汽摹，與產(chǎn)品、開發(fā)人員進(jìn)行多次的交流與討論苦锨，且綜合考慮各方面情況逼泣，敲定了最終的設(shè)計(jì)方案。
方案詳情規(guī)則：
1舟舒、長(zhǎng)度
定義：將日期控件的長(zhǎng)度定義為1個(gè)“基本長(zhǎng)度單元”（長(zhǎng)262像素）拉庶。
①：所有“搜索項(xiàng)”的長(zhǎng)度都為1個(gè)“基本長(zhǎng)度單元”。
②：“搜索區(qū)域”一行至多顯示3個(gè)“基本長(zhǎng)度單元”秃励，且默認(rèn)只顯示一行氏仗。
③：“搜索按鈕”和“搜索結(jié)果”放置在“搜索區(qū)域”的最右側(cè)，與第一行“搜索項(xiàng)”水平對(duì)其夺鲜。
④：“搜索項(xiàng)”之間的距離為68像素皆尔，此距離保證了分辨率為1366×768的用戶界面可以完整顯示（注：在產(chǎn)品用戶中帚稠，分辨率為1366×768及以上的占比為74.66%）。
⑤：更多“搜索項(xiàng)”通過(guò)擊“尖三角”進(jìn)行查看床佳。
2滋早、“清除”功能
在輸入框（尾部）增加“清除”按鈕，默認(rèn)情況下（或值為空時(shí)）不顯示“X”號(hào)砌们，值不為空時(shí)杆麸，顯示“X”號(hào)。
（注：“日期控件”和“下拉框”這兩類沒有“清除”功能浪感。）
３昔头、顯示
①：當(dāng)搜索項(xiàng)只有1個(gè)或2個(gè)時(shí)，顯示樣式如下：
②：搜索項(xiàng)中“自定義字段”的顯示
a. 搜索項(xiàng)中影兽，字段名稱最大支持5個(gè)“漢字”長(zhǎng)度揭斧；
b. 字段名稱過(guò)長(zhǎng)時(shí)，由“4個(gè)漢字”+“…”組成峻堰，鼠標(biāo)移上去時(shí)讹开，顯示完整的字段名稱。
③：“關(guān)鍵字”搜索項(xiàng)的暗注釋內(nèi)容精簡(jiǎn)顯示
- 物品編號(hào)/物品名稱 ——精簡(jiǎn)——> 物品
- 供應(yīng)商編號(hào)/供應(yīng)商名稱 ——精簡(jiǎn)——> 供應(yīng)商
最終設(shè)計(jì)方案：
