首頁

從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧

ui設(shè)計分享達人

起因˜
最近突然喜歡聽著小曲蹬著車子，不過我沒有自行車，所以就選用了大眾款藍色哈羅單車，不過有意思的是發(fā)現(xiàn)整個用車體驗跟原來有了不少變化，除了車的外觀差異，更讓我印象深刻的是還車時只需要在手機上進行操作即可，不知道大家是否還記得原來的還車過程，這里我?guī)痛蠹一貞浺幌拢?/div>
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
這個過程本身沒什么問題，但實際上匆匆忙忙的大家忘記手動上鎖還車時有發(fā)生，并且當你想起來的時候，手機上也只能干看著扣費，還得折返回去進行鎖車。本人更離譜，有次打開手機發(fā)現(xiàn)忘了手動鎖車，一看行程，已經(jīng)被人騎出去老遠啦～
 
但這次不再需要手動上鎖來還車了，整個鎖車還車已經(jīng)借助物聯(lián)網(wǎng)技術(shù)將操作集成到手機上進行了，這意味著像我這種時常忘記手動鎖車的人有了更好的選擇，現(xiàn)在忘了鎖車還能在手機上亡羊補牢，考慮到最終騎行事件是在手機上完成閉環(huán)的，忘記上鎖和離開后無法上鎖也就一下解決了，這便是技術(shù)應(yīng)用與交互鏈路優(yōu)化設(shè)計的美妙之處！
 
當然，如果你已經(jīng)養(yǎng)成了手動鎖車好習(xí)慣，你可以繼續(xù)選擇手動上鎖款，剛好最近也在做一些交互鏈路優(yōu)化的活兒，索性就我自己的工作場景，展開聊聊這用戶體驗優(yōu)化必備能力項的一些思路方法吧～
 
任務(wù)鏈路優(yōu)化有何價值˜
一般來說做交互鏈路優(yōu)化的核心價值或是目標就那么幾個；
一、更好用
即更加高效便捷好用的意思，這短短三個字就直接包含了大家常掛在嘴邊的易用性、可用性啥的了，好的交互就應(yīng)該是盡可能的為用戶提供簡單好用的交互，舉個例子，近期在使用阿里云Flow的流水線，期間我也用過其他家的CI/CD服務(wù)，相比之下我覺得阿里云Flow的流水線編排反饋就做的更勝一籌，“更方便”加一分
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
二、更準確
意味著為用戶提供正確的服務(wù)、流程、功能、組件、信息反饋乃至視覺效果，為的是提升產(chǎn)品的可理解與易用性，從而達到降低學(xué)習(xí)成本提升效用，減少跳失率或出錯等負面情況
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
三、提升意愿
嗯！花費那么多心思讓產(chǎn)品體驗變得更方便更準確就是為了提升用戶的使用或付費意愿，算是任務(wù)路徑優(yōu)化設(shè)計的底層價值吧。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
階段流程與焦點
整體我們可以劃分為優(yōu)化前、優(yōu)化中、優(yōu)化后三個階段，對應(yīng)到三個階段中，對應(yīng)的工作流程基本由問題定位、優(yōu)化目標、方案構(gòu)思、方案驗證、持續(xù)改進構(gòu)成，然后根據(jù)階段與流程我會把相關(guān)的優(yōu)化焦點與鏈路優(yōu)化的關(guān)系交代清楚，算是清晰一下鏈路優(yōu)化工作整體思路與每個階段的工作事項。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
優(yōu)化前的焦點
以我們B端SaaS產(chǎn)品的優(yōu)化設(shè)計為例，焦點可以簡單的鎖定在
用戶、產(chǎn)品、業(yè)務(wù)場景
三大層面，我們會關(guān)注這三個因素中帶來的反饋來找到和定位問題，最終解決掉用戶痛點或是觸成業(yè)務(wù)目標，具體點可以拆分出以下焦點事項；
目標用戶
需要關(guān)心產(chǎn)品目標用戶的特征，他們是收益的來源也是市場構(gòu)成的部分，作為產(chǎn)品的經(jīng)理或業(yè)務(wù)設(shè)計師，肯定是對預(yù)期的目標用戶有所了解才對，特別是初期型產(chǎn)品；
當積攢了一定用戶量后，就會開始關(guān)注基于數(shù)據(jù)或定性研究得到的用戶畫像信息，并通過這些更準確的用戶畫像來了解目標市場和進行業(yè)務(wù)設(shè)計決策，而不只是對著市面上競品抄作業(yè)罷了。
這過程中你至少要弄明白五個問題；
1、用戶的需求是什么？
2、用戶使用的場景跟行為大致如何？
3、我們的用戶有何偏好或特征？
4、用戶通常還會用到哪些競品？
5、用戶有哪些反饋值得注意？
 
服務(wù)體系
主要是產(chǎn)品本身的服務(wù)體系或業(yè)務(wù)邏輯相關(guān)，前面提到了用戶畫像或分層的一些概念，
實際上現(xiàn)在的互聯(lián)網(wǎng)產(chǎn)品中，服務(wù)體系或是用戶角色都不會很單一，用戶角色、權(quán)益身份、服務(wù)場景等等都有差異，設(shè)計前的差異化背景或權(quán)重厘清就很重要，至少要清楚當前優(yōu)化的服務(wù)線路是為那些人，他們有哪些差異、有哪些狀態(tài)情景、有哪些交互要兼容或避錯。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
業(yè)務(wù)場景
我們關(guān)注產(chǎn)品、關(guān)注用戶，同時也關(guān)注他們之間發(fā)生了什么樣的化學(xué)反應(yīng)，所以業(yè)務(wù)場景必定是本階段中的一大焦點，通過業(yè)務(wù)場景可以洞察到更多用戶實際遇到或潛在的痛點，以及線上線下等環(huán)境帶來的微小差異性，至于如何實踐了，我們可以通過觀察不同類型的用戶是如何使用產(chǎn)品，或是與用戶對話分析來獲取優(yōu)化指引，哪里用戶卡住了或是吐槽了那就表明有優(yōu)化空間，這應(yīng)該算是任務(wù)鏈路優(yōu)化的基礎(chǔ)焦點了吧。
實際業(yè)務(wù)場景中我們常關(guān)注的點
1、用戶：用戶本身有什么特征屬性值得我們關(guān)注？
2、情景：用戶出于什么背景原因或目標在什么時機進入該場景？
2、行為：用戶進入場景后要做什么或做了些什么？是否做的順暢？
3、結(jié)果：用戶是否達成目標？未達成或達成受阻的原因是什么？
4、反饋：用戶吐槽或建議了些什么，我們獲取了哪些有效的改善訊息？
 
優(yōu)化中的焦點
這個階段中，我們的主要工作可以概括為分析問題、解決問題、驗證問題，其中焦點可能會比較多，這里我挑了一些說一下；
需求分析
結(jié)合前面階段中的場景化來還原問題是什么情景下怎么發(fā)生的，產(chǎn)生了什么樣的負面影響，這很重要，我們需要知道用戶的業(yè)務(wù)訴求是什么，造成出錯原因是什么，產(chǎn)生了多大的影響，以及用戶期望的是怎樣，然后就是如何更好的滿足用戶訴求，同時保障企業(yè)的利益，這就是需求分析要做的事情；
交互媒介
主要是考慮復(fù)雜且涉及多方媒介的業(yè)務(wù)場景，要思考這些媒介或端怎么配合用戶完成任務(wù)，以什么樣的形式進行交互。就例如哈羅單車的，不僅是要經(jīng)過手機的交互，還有單車的傳感器與數(shù)據(jù)交互等，事實上一套完整的服務(wù)正是由這些媒介之間的不斷交互，才使得哈羅的租賃服務(wù)可以如此靈活，所以在整個服務(wù)流程中讓媒介之間更智能、自動、高效的完成銜接與交互，就成了必要的焦點了，如果說你認為這是多余或無效的部分，那么很有可能說明你所處在的產(chǎn)品服務(wù)構(gòu)成還不算復(fù)雜，但這不能否定掉交互媒介的重要性。
這個過程中，你至少要清楚服務(wù)完成要經(jīng)過哪些端、那些人、哪些條件、哪些信息構(gòu)成。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
信息構(gòu)成
幾乎進行任何服務(wù)都離不開特定的構(gòu)成信息交互；
圖：舉個最簡單的例子，晚上你來到街邊攤，想要一份烤冷面，那么你除了要掏錢以外，你還要跟老板確認口味、加料、價格這些信息，這些就是構(gòu)成任務(wù)進程的信息，這些信息可以通過問答式確認，也可以提供招牌信息給食客確認
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
總之將這些信息更簡練準確的進行交互或傳達，就能實現(xiàn)任務(wù)鏈路的優(yōu)化，事實上應(yīng)用程序本身就是由各種各樣的信息交織在一起所構(gòu)成，所以
“做任務(wù)鏈路優(yōu)化不僅是減少操作步驟而已”
。
 
業(yè)務(wù)模型
可以簡單易懂的幫助我們理解和消化業(yè)務(wù)，以及更好協(xié)同，面對復(fù)雜的任務(wù)流程，可以更好的表達或梳理業(yè)務(wù)概念與全局結(jié)構(gòu)，在做復(fù)雜的任務(wù)優(yōu)化時，就不容易被局部問題牽著鼻子走，而忽略其他影響面，說的直白點，就是這個業(yè)務(wù)的整體過程你腦子里要有個概念，制作方法其實就是將各個業(yè)務(wù)或任務(wù)拆解成多個單元的形式，并將單元之間的包含或?qū)蛹夑P(guān)系表達出來
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
研發(fā)能力
需要考慮技術(shù)實現(xiàn)的周期與成本，即開發(fā)是否可以實現(xiàn)，需要研發(fā)多久，要投入多少成本，我相信產(chǎn)品經(jīng)理都會關(guān)心這個問題，其實就是投資回報率與可行性的問題，產(chǎn)品生產(chǎn)研發(fā)的本質(zhì)是賺錢不是虧錢，不是嗎？
例如說你看見了一個很酷炫的交互效果，也準備應(yīng)用到自家的產(chǎn)品中，但實際開發(fā)的難度大不大，要投入多少時間精力，這個酷炫的交互又能帶了多少產(chǎn)品收益？所以研發(fā)實現(xiàn)能力在方案設(shè)計的過程中還是要考慮的。
 
測試反饋
方案落地前，進行一定的內(nèi)部測試或評審是很有必要的，介于還沒有完成開發(fā)上線，可以在優(yōu)化方案出來后通過Demo的方式找人進行測試反饋，一般自測走查只是第一環(huán)，有不確定的一定要拉上其他人一起研討評審一番，如果要找人測試的話，其實只要設(shè)定好合適的任務(wù)與目標，還原出真實用戶碰到問題的任務(wù)過程即可，接著就是觀察測試者是如何使用Demo的，你的新方案是否奏效我想你知道怎么去衡量，就不贅述了。
 
優(yōu)化后的焦點
優(yōu)化后階段我們主要關(guān)注是否優(yōu)化了個寂寞，是不是又優(yōu)化出了新問題，優(yōu)化后還有哪些收尾工作，關(guān)聯(lián)的需求池與迭代規(guī)劃怎么安排。
數(shù)據(jù)采集準備
當一個方案被投入到生產(chǎn)環(huán)境中，我們卻無法得知是否比舊的方案更好，這種情況是很糟糕的，故我們在新的方案推出的同時，一定要保障有辦法收集到有效的用戶反饋，這個過程我們可以是采用AB測試、數(shù)據(jù)埋點監(jiān)測、灰度采樣、用戶使用性測試等，這都是我們實際工作中采用的有效手段。
效果對比
始于數(shù)據(jù)采集，采集后自然是與原始版本的效果進行比對，確認新的版本是有效可靠的，能被用戶認可采納的，同時也能發(fā)現(xiàn)新的問題反饋，這需要進一步的跟進與規(guī)劃，這是個重點環(huán)節(jié)。
需求規(guī)劃
原始問題是否圓滿結(jié)束，是否有新的問題待解決，是否需要分批開發(fā)上線或驗證，調(diào)整后其他部分是否需要配合改造，這一系列問題將迫使我們持續(xù)改進，并將流程再一次的接軌到優(yōu)化前階段。
 
AI告訴我的焦點˜
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
關(guān)于優(yōu)化流程的一些額外的發(fā)現(xiàn)
PDSA 或 PDCA
PDSA是指“計劃-實施-研究-實施（Plan-Do-Study-Act&Amend）”，屬于一種精益方法，常用于衡量變更的有效性，部分企業(yè)的專有云解決方案架構(gòu)師也叫做PDSA，并且有對應(yīng)的平臺組織與PDSA執(zhí)行流程。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
PDSA這一流程可以靈活迅速的發(fā)起并驗證效果，四個步驟分別如下：
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
而PDCA則是指“計劃-實施-檢查-行動（Plan-Do-Check-Act&Amend）”，檢查主要就是驗證效果是否有效，有效的則應(yīng)用或標準化，沒用的則繼續(xù)改進，相比下，PDSA的內(nèi)涵會更廣泛些。
 
SDCA循環(huán)法是一個持續(xù)改進模型
SDCA是指“標準化-執(zhí)行-檢查-總結(jié)（Standardization-Do-Check-Action&Adjustment）”，跟PDCA有些類似，主要差異在于第一步驟；
  •  
    標準化(Standardization)：識別和定義改進過程中需要標準化和優(yōu)化的關(guān)鍵步驟和流程，例如軟件系統(tǒng)的交互規(guī)范化、場景模塊化、系統(tǒng)設(shè)計、流程統(tǒng)一等，亦或是產(chǎn)品客戶端的操作手冊、新手引導(dǎo)、統(tǒng)一操作流程、測試用例、準入門檻等標準化內(nèi)容。
SDCA循環(huán)法的目標是實現(xiàn)持續(xù)改進，可以減少重復(fù)性問題再次發(fā)生、精簡和標準化執(zhí)行，形成可靠、準確、高效的結(jié)果，是一種結(jié)構(gòu)化的迭代的方法，且適用領(lǐng)域廣泛。
 
一些還不錯的優(yōu)化思路˜
針對任務(wù)鏈路優(yōu)化工作的場景，以下我給出了一些常用的優(yōu)化方法或工具，并酌情說明了使用場景與小型案例幫助掌握，當然了你也可能都掌握了這些，甚至有更進階的方法或工具，那么也歡迎你補充或留言交流。
1、無前置輕快任務(wù)先行˜
其核心思想是在面對多個任務(wù)或配置項時，通過分析任務(wù)之間的依賴關(guān)系和優(yōu)先級，將那些不需要前置條件、相對輕量級和快捷的任務(wù)優(yōu)先處理，其優(yōu)勢在于能提高整體效率，還能讓用戶在完成前面步驟后獲得一定的成就感，從而更有動力繼續(xù)推進后續(xù)事項。
適用場景
適合復(fù)雜流程改造、復(fù)雜的表單配置相關(guān)、大量的事項處理場景、非線性的多任務(wù)處理場景等。
上手技巧
1、識別出沒有前置條件的任務(wù)；
2、分析任務(wù)或事項之間的依賴關(guān)系；
3、優(yōu)先處理輕快型的任務(wù)；
4、靈活的調(diào)整高優(yōu)先級或是共通的前置事項；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
當然也可以根據(jù)此原則將前置條件整合處理，這樣在后續(xù)的任務(wù)路徑中就可以減少相應(yīng)的條件卡點，例如大量安卓應(yīng)用第一次安裝啟動時就會向用戶索要存儲、錄音、相機等基礎(chǔ)權(quán)限，那么之后使用相關(guān)服務(wù)時，就不用觸發(fā)授權(quán)窗口了，不過權(quán)限還是要遵循用戶隱私政策法規(guī)哈。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
2、漸進式交互˜
就是將復(fù)雜的任務(wù)進行拆分，通過循序漸進的方式一點一點完成任務(wù)，這樣可以減少任務(wù)達成的門檻，讓用戶使用更順暢，并且可以在過程中培養(yǎng)用戶的意識，是任務(wù)鏈路優(yōu)化的常見手段之一，也是游戲新手村屢試不爽的教學(xué)模式。這個方法的應(yīng)用案例跟文章快被寫爛了吧，這里就不展開了。
適用場景
該方法常常會應(yīng)用到復(fù)雜的任務(wù)流程引導(dǎo)，如分步驟表單配置、功能進階解鎖、線性任務(wù)指導(dǎo)、新用戶引導(dǎo)等場景。
上手技巧
1、制定核心的目標或任務(wù)鏈路，確保有效的漸進過程；
2、找準任務(wù)的先后關(guān)系或是難度級別；
3、注意引導(dǎo)過程的連貫性，要保持前后呼應(yīng)；
4、采用簡潔準確的引導(dǎo)提示，以及適宜的獎勵或反饋機制；
5、結(jié)合用戶的使用偏好或認知，要讓推進的過程盡可能自然易用；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
3、并行規(guī)劃˜
通過規(guī)劃使多個任務(wù)事項穿插或并行開展，本質(zhì)就是任務(wù)事項的拆分管理與資源規(guī)劃協(xié)調(diào)，通過使更多事項同時或盡早進行，來加快任務(wù)目標達成，以效率來推動任務(wù)鏈路優(yōu)化的目的，也可以理解成是碎片化時間利用。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
適用場景
多個任務(wù)待辦且時間長短與參與程度有差異時；
多個任務(wù)流程進行且涉及審批、協(xié)同、傳輸、自動進行等情況時；
上手技巧
在資源規(guī)劃協(xié)調(diào)時，可以通過時間、狀態(tài)兩方面下手，重復(fù)的、自動的、久等的、卡點的可以考慮先行，然后再處理其他瑣碎事項即可，反正當你事項多，又想省下時間提升效率，就一定考慮下這個方法；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
4、群體劃分˜
即我們常說的用戶分層，通過提供差異化的服務(wù)或任務(wù)路徑來對應(yīng)不同的用戶群體，以減少無效或干擾的流程操作，為目標用戶提供更好的體驗質(zhì)量與業(yè)務(wù)場景偏好滿足等。
適用場景
業(yè)務(wù)用戶群比較豐富，不同角色的任務(wù)場景差異較大，需要更沉浸或?qū)I(yè)的交互時。
上手技巧
對不同類群體用戶進行訪談或任務(wù)場景測試；
厘清用戶群體與對應(yīng)任務(wù)目標的差異性；
區(qū)分不同角色之間的權(quán)限差異；
規(guī)劃不同的任務(wù)的功能訴求與邊界；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
5、技術(shù)創(chuàng)新˜
通過科技技術(shù)的應(yīng)用，可以為用戶帶來更多的便捷與新鮮感，特別是具備商業(yè)屬性的技術(shù)，會更快地成熟與普及，然后影響到更多人的生活方式。這個過程可以概括為“科技-認知-應(yīng)用-習(xí)慣-直覺”，就像現(xiàn)如今的掃碼支付、人臉識別、指紋解鎖一般，不僅在各種領(lǐng)域都有了應(yīng)用，并且你一看到相關(guān)信息，直覺就會引導(dǎo)你該如何操作。
適用場景
在當前技術(shù)實現(xiàn)還不夠優(yōu)雅或是遇見過更好的技術(shù)應(yīng)用時，則可以考慮去應(yīng)用新的技術(shù)或是與當前業(yè)務(wù)做融合創(chuàng)新。
上手技巧
了解行業(yè)技術(shù)創(chuàng)新應(yīng)用；
多看看大廠公司的技術(shù)解決方案；
看看行業(yè)技術(shù)科技大廠的官網(wǎng)動態(tài)；
找找是否有適用于自身業(yè)務(wù)的普惠技術(shù)方案；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
6、約束與枚舉˜
面對各種復(fù)雜的操作、選擇、輸入輸出時，盡可能的枚舉出選項或模板，這樣用戶操作會更規(guī)范也不容易困惑，對于那些用不了或有特殊含義的內(nèi)容則通過樣式、組件、提示等進行合理的約束，避免任務(wù)流程出錯，也幫助用戶識別與理解，例如報錯信息就要約束用紅色反饋，電話號輸入就要約束為數(shù)值輸入等，事實上這應(yīng)該是交互設(shè)計師的基本功吧。
適用場景
這個是我個人一直以來認為人機交互工作中的根基，適用于絕大多數(shù)需要進行組件交互或行為交互的場景。
上手技巧
厘清交互過程中涉及哪些信息內(nèi)容；
不同信息內(nèi)容適用哪些交互組件進行；
交互內(nèi)容是否有任何格式約束、內(nèi)容模版或是注釋說明；
交互過程中哪些是被允許那些是不被允許的；
交互過程的狀態(tài)扭轉(zhuǎn)是否完善和有效避錯；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
7、5why分析法˜
一個老生常談的方法，可以幫助我們深入問題和洞察底層含義，用法就是面對問題不斷的追問為什么，在任務(wù)鏈路優(yōu)化中，主要可以幫助我們分析和定位問題根因。以過濾偽需求為例，面對老板提出的需求，如果你不去深入一下，你就不會明白做這個需求究竟是解決什么痛點的，那么做出來以后，這個需求就有可能出現(xiàn)沒有解決老板痛點的情況，甚至可能出現(xiàn)新的問題，因為這個需求本就是偽需求。
適用場景
適用與大多數(shù)復(fù)雜問題或需求的分析場景，主要是對需求或問題不夠清晰
上手技巧
連續(xù)追問；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
 
8、場景化分析˜
簡單講就是在解決或優(yōu)化任務(wù)鏈路的時候，帶上人物、目標、行為、環(huán)境、時間諸多因素綜合性思考，形成一個更完善而真實的洞察環(huán)境，以幫助獲取更多有價值的優(yōu)化信息，此前有出過一期關(guān)于場景化思維的專欄文章，寫的比較詳細，有興趣的可翻閱一下：
通道:
https://www.zcool.com.cn/article/ZMTQ1NTY0MA==.html
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
9、ESIA分析法˜
ESIA是企業(yè)流程優(yōu)化中比較出名的方法，但也不僅限于企業(yè)流程優(yōu)化，其核心理念就是減少流程中非增值活動，以及調(diào)整流程的核心增值活動。由消除-簡化-整合-自動化（Eliminate-Simply-Integrate-Automate）四個步驟構(gòu)成，只看名字好像有些理論派或假把式，但拆開后的一些具像化步驟或方法還是有用的，作為一款優(yōu)化工具或流程思路我是認可和采用過的，就像是“CRAP設(shè)計原則”一樣，高大尚的字母縮寫名下卻藏著樸實無華的好東西。
「注釋：CRAP設(shè)計原則 = “親密性、對齊、重復(fù)、對比”設(shè)計四大原則」
「注釋：CRAP設(shè)計原則 = “親密性、對齊、重復(fù)、對比”設(shè)計四大原則」
 
適用場景
流程優(yōu)化或鏈路優(yōu)化的發(fā)力點挖掘時。
上手技巧
這個方法我有一個小口訣，大伙兒可以參考下“去掉多余的、留下能懂的、排成有序的、減少人工的”
小案例
我們的代碼腳本工具升級，從客戶創(chuàng)建到腳本配置執(zhí)行的復(fù)雜版本，到簡化的極速版本發(fā)布，其中整合了用戶主流的腳本工具訴求，然后消除了復(fù)雜冗長的配置過程，簡化了操作門檻或功能復(fù)雜度，并創(chuàng)建了多條主流自動化的極速版本來支持業(yè)務(wù)，反饋和數(shù)據(jù)都有了明顯轉(zhuǎn)好
 
10、ECRS“分析法˜
是工業(yè)工程學(xué)中程序分析優(yōu)化的四大原則，主要由取消-合并-調(diào)整順序-簡化（ Eliminate-Combine-Rearrange-Simplify）構(gòu)成，其實不必糾結(jié)這些分析法的刻板步驟或叫法，多看一些你會發(fā)現(xiàn)萬變不離其宗，作為優(yōu)化思路或策略，找到合適的方法并靈活的施展其實更重要，沒有人說必須要按照這些分析法按部就班。
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
  •  
    取消( Eliminate)：首先是根據(jù)規(guī)模、階段或目標，考慮哪些是可有可無的，或價值有限的，能換掉的就換掉，能去掉的就去掉。
  •  
    合并( Combine)：在不影響最終目標與質(zhì)量的前提下，根據(jù)某些屬性，將多個工序進行合并或融合。同時也要考慮融合后的體驗與兼容性，如若不然就不要強制合并了。
  •  
    重排( Rearrange)：即將相關(guān)的工作流程或內(nèi)容進行新的順序調(diào)整重組，以滿足更合理更流暢的結(jié)構(gòu)，例如減少了流程往返操作的不便、先易后難的配置表單。
  •  
    簡化( Simplify)：不是取消或減少而已，而是經(jīng)過以上工序后。將剩余的或整體進行簡單化、完整化、便捷化、智能化處理，可以是新技術(shù)應(yīng)用也可以是交互方式的調(diào)整不等。
 
任務(wù)鏈路優(yōu)化的思路或方法肯定還有諸多，例如《簡約至上》中提到的刪除、組織、隱藏、轉(zhuǎn)移的應(yīng)用等等，這里不再列舉了，實際上掌握或了解幾條比較實用的就差不多了。
 
一些還不錯的分析工具˜
都是一些比較日常輔助工具，只是希望在大家的優(yōu)化工作中能夠提供一些幫助，如果你已經(jīng)熟練掌握這些工具的應(yīng)用，那就請忽略這部分哈，請直接前往最后的篇章總結(jié)吧。
整合分析類 ˜
○思維導(dǎo)圖：可以快速幫助我們對信息進行樹結(jié)構(gòu)化與邏輯整理，并且可以結(jié)合圖文以及功能圖標等來完成管理及計劃，能夠?qū)I(yè)務(wù)或功能框架快速顯現(xiàn)出來，是很好的輔助工具之一；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○矩陣表格：可以很方便的將信息進行羅列與比對分析，在一些信息介紹或數(shù)據(jù)分析時常常會用到；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○服務(wù)藍圖：可以將完整的服務(wù)過程繪制出來，能夠包含人物角色、前后臺關(guān)系、階段過程、狀態(tài)扭轉(zhuǎn)、交互觸點等；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○體驗地圖：可以將服務(wù)、目標、用戶、交互、反饋進行階段化整合分析，本身是挺好的工具，只是設(shè)計師作品集中的用點兒虛，但不影響自己拿來實用；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○泳道圖：可以根據(jù)時序?qū)α鞒踢M行可視化，可以很好的傳達職能部門或是角色之間的交互過程，也可以細分交互媒介、服務(wù)終端等因素之間的關(guān)系；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○流程圖：主要就是圍繞一個事件的開始到結(jié)束過程的流程可視化，流程圖可以系統(tǒng)化的梳理業(yè)務(wù)邏輯與交互鏈路，泳道圖也僅是流程圖的一種，相信大家都很熟悉了，就不過多贅述了；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○魚骨圖：是一種根因分析工具，有頭有尾有分支，像魚骨，常用于定位問題發(fā)生所導(dǎo)致的根因，也可以用來制定任務(wù)目標進程的管理；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
 
○狀態(tài)機：一種針對事件狀態(tài)扭轉(zhuǎn)關(guān)系的流程圖，用于描述系統(tǒng)的狀態(tài)和事件，以及事件引發(fā)系統(tǒng)在狀態(tài)間的轉(zhuǎn)換過程，有點像是一系列的if語句，在中后臺的系統(tǒng)設(shè)計中常常會有需要梳理狀態(tài)的情況發(fā)生；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○業(yè)務(wù)框架：業(yè)務(wù)框架主要是一種將業(yè)務(wù)過程和活動進行組織和分類的方法，具有較大的顆粒度與較強的全局性，常用于表達業(yè)務(wù)框架單元之間的組成與活動關(guān)系。而業(yè)務(wù)模型主要是指業(yè)務(wù)概念關(guān)系的可視化簡圖，前文的流程圖、泳道圖、狀態(tài)機等等都可以是業(yè)務(wù)模型；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
監(jiān)測洞察類 ˜
○交互自檢：主要用于交互設(shè)計的查缺補漏跟避錯，同時在交互鏈路自檢的過程中是可以主動發(fā)現(xiàn)問題，并驗證優(yōu)化是否可行或合理；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○使用性測試：也叫做可用性測試，是對優(yōu)化結(jié)果或Demo進行測試檢驗的過程，通過模擬真實的任務(wù)操作過程以達到洞察、探索、比較、效果驗證等目的；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○A/B測試：常用于方案之間的效果比較或驗證，通常都是借助工具引流獲取一批真實用戶的測試反饋，是一款真實有效的驗證手段，不過方案之間的差異不宜過于懸殊；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
○數(shù)據(jù)漏斗：像任務(wù)鏈路這種多線程或是節(jié)點較多的事件，單薄的點擊率或轉(zhuǎn)化率的作用是很有限的，這時候就需要在相關(guān)任務(wù)節(jié)點上布滿更多的埋點，將用戶流量與數(shù)據(jù)轉(zhuǎn)化的情況用漏斗視圖表現(xiàn)出來，然后就可以針對任務(wù)鏈路進行分析或比較了；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
最后˜
本次主要是分享了對應(yīng)優(yōu)化工作中的一些技巧與方法，對于文章我很清楚看完和消化需要很多耐心與時間，這不像視覺作品來的那么接和輕松，寫到這里已經(jīng)大幾千字了，最后鋪一張框架大圖幫那些看完腦袋空空的同學(xué)回顧一下；
從單車上鎖聊聊任務(wù)鏈路優(yōu)化設(shè)計的思路與技巧
 
 
 


作者：泡泡_PAO
來源：站酷
 
 

 

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 
評論(0) 瀏覽(386)

如何為用戶提供正確的鍵盤輸入類型？

博博

Android和iOS系統(tǒng)都設(shè)計了針對特定表單字段的指定鍵盤輸入類型。但大多數(shù)開發(fā)人員未能在他們的代碼中指定正確的鍵盤輸入類型。這會導(dǎo)致移動設(shè)備上的表單完成效率變慢。本文以Android平臺為例。
一、輸入類型并不總是“文本”
大多數(shù)開發(fā)人員錯誤地將每個表單字段的輸入類型設(shè)置為“文本”。這存在問題，因為每個表單字段的輸入并不總是純文本。通常都有一些字段要求輸入帶有數(shù)字或字母和數(shù)字組合的信息。當用戶嘗試填寫這些字段時，他們應(yīng)該看到一個數(shù)字或字母和數(shù)字組合的鍵盤。
不幸的是，當每個字段的輸入類型都設(shè)置為“文本”時，它會強制用戶使用文本鍵盤來輸入數(shù)字或字母和數(shù)字組合，輸入時舉步維艱，不是誤點，就是需要頻繁切換，輸入體驗十分糟糕。
因此，請務(wù)必為每個表單字段指定輸入類型，以便系統(tǒng)能夠顯示相應(yīng)的鍵盤。除了指定輸入類型，我們還應(yīng)指定相關(guān)行為，例如輸入法是否提供拼寫建議、是否將句子的首字母大寫，以及是否使用“完成”或“下一項”等操作鍵替換“回車”。
輸入類型、行為、操作鍵整理如下：
如何為用戶提供正確的鍵盤輸入類型？
例一. 郵箱地址字段
表單要求用戶提供他們的郵箱地址是很常見的。當我們將輸入類型設(shè)置為“郵箱地址”時，它會為用戶提供一個針對郵箱地址輸入的鍵盤。這個鍵盤不僅顯示字母，還可以顯示“@”和“.”，用戶可以輕松地輸入他們的郵箱地址。
如何為用戶提供正確的鍵盤輸入類型？
例二. 姓名字段
英文名是專有名詞，英語中專有名詞的第一個字母要大寫。我們將輸入類型設(shè)置為“人名”，并且設(shè)置單詞首字母大寫。用戶無需對英文字母進行大小寫切換。
如何為用戶提供正確的鍵盤輸入類型？
二、每個鍵盤對輸入類型的反應(yīng)可能不同
案例一：登錄頁面的密碼輸入
釘釘將密碼框輸入類型設(shè)置為“密碼”。假定密碼為 z0h0a0n0g。
  1. 百度輸入法顯示密碼鍵盤，完成密碼輸入僅需點擊 9 次。
  2. 搜狗輸入法顯示文本鍵盤，用戶需在字母和數(shù)字之間切換，完成輸入需點擊 17 次。也支持長按第一行的字母輸入數(shù)字。
  3. 微信輸入法顯示文本鍵盤，完成密碼輸入需點擊 17 次。不支持長按字母輸入數(shù)字。
如何為用戶提供正確的鍵盤輸入類型？
 
案例二：登錄頁面的手機號輸入
釘釘設(shè)置電話號碼鍵盤右下角為“下一項”按鈕。
  1. 百度輸入法的鍵盤右下角顯示“回車”，用戶完成手機號輸入后需手動獲取密碼文本框焦點。
  2. 搜狗輸入法的鍵盤右下角顯示“下一項”，用戶完成手機號輸入點擊下一項，密碼文本框自動獲取焦點。
  3. 微信輸入法的鍵盤右下角顯示“下一項”，用戶完成手機號輸入點擊下一項，密碼文本框自動獲取焦點。
如何為用戶提供正確的鍵盤輸入類型？
三、Input Type 助力產(chǎn)品輸入體驗的提升
通過應(yīng)用 Input Type 你可以正確的為每個文本字段設(shè)置特定的輸入類型，以及看到每個輸入類型（以及輸入類型的組合）如何影響鍵盤。
我最初開發(fā)此應(yīng)用是為了促進工作中跨部門高效協(xié)同，但我希望通過此應(yīng)用能夠賦能給更多的人，提升協(xié)同效率的同時更好的提升產(chǎn)品輸入體驗。你可以在這里免費下載：
https://www.pgyer.com/vT29
Input Type這個工具需要安裝在安卓手機上，如果沒有安卓手機可以電腦上安裝一個網(wǎng)易MuMu安卓模擬器就可以用。
應(yīng)用截圖
 
作者：交互設(shè)計師張楚
來源：站酷

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(386)

雪球金融社區(qū)平臺表情圖標升級全紀錄

博博

在社區(qū)平臺語境里，表情無疑是很重要的組成部分。一套豐富且定位準確的表情可以幫助用戶更清晰地表達自己的感受，增進溝通的準確性，同時增添社交互動的趣味性，拉進用戶之間的距離。帶有平臺特性的表情更能彰顯平臺自身的獨特性。
雪球作為金融社區(qū)平臺，表情自然也是重要的元素。我們通過數(shù)據(jù)調(diào)研，發(fā)現(xiàn)雪球社區(qū)互動中表情的滲透率達到18%，表情的使用率比較高。而現(xiàn)有的表情年久失修，存在幾個比較明顯的問題，首先視覺風(fēng)格陳舊辨識度低；再有，表情中原本存在一些股票梗的表現(xiàn)力較弱，畫風(fēng)不夠有趣。第三，雪球誕生了新IP“呦呦”，非常適合在表情中應(yīng)用來推廣雪球品牌特性。
基于以上背景我們展開了對于表情翻新改版的項目。
 
XDC干貨｜雪球表情升級全紀錄
 
 
現(xiàn)狀&問題
通過對當前狀況進行系統(tǒng)梳理，我們發(fā)現(xiàn)了一些存在的問題。
 
XDC干貨｜雪球表情升級全紀錄
1.設(shè)計風(fēng)格陳舊，不易識別表現(xiàn)力弱：
目前線上雪球表情風(fēng)格老舊，視覺表達不符合當下設(shè)計潮流趨勢；由于表情是白色在行文中表現(xiàn)力不足且不易被用戶識別，因而趣味性表達的作用不夠凸顯。
XDC干貨｜雪球表情升級全紀錄
2.缺乏股票基金場景的情緒表達
社區(qū)場景中有大量的股票基金的討論和相關(guān)內(nèi)容的情緒表達，而目前表情體系中缺乏此類表達或表達不夠生動。
比如「關(guān)燈吃面」和「割肉」，在行文中一眼能識別到視覺主體是表情臉，而“吃面”和“割肉”的語義沒有生動的體現(xiàn)出來；還比如「跳水」又太具象和寫實，少了表情的趣味性。
XDC干貨｜雪球表情升級全紀錄
3.沒有將雪球的新IP融入表情
雪球誕生了新的IP“呦呦”，表情的體系非常適合融入IP向的內(nèi)容，將IP表情化也更利于IP的推廣和品牌的傳播。
XDC干貨｜雪球表情升級全紀錄
 
 
 
XDC干貨｜雪球表情升級全紀錄
視覺風(fēng)格探索
1.雪球用戶特征
設(shè)計風(fēng)格需要根據(jù)平臺用戶特征進行確定。開始設(shè)計之前，我們先看看雪球用戶大概是什么樣的。
XDC干貨｜雪球表情升級全紀錄
雪球的主要用戶為男性且集中在30-50歲左右，所以在視覺表現(xiàn)上盡量避免女性化或低齡化的風(fēng)格。
2.視覺風(fēng)格探索
風(fēng)格確定
舊版的表情蒼白，雖然細節(jié)很多但在行文中難以識別，本次改版重要任務(wù)之一是改版新的視覺風(fēng)格。emoji是最被用戶熟知的表情體系，我們決定新版向傳統(tǒng)黃臉emoji表情靠攏。大方向定了，但還需要確定視覺感受符合雪球的emoji。最后在兩種視覺風(fēng)格中我們選擇了視覺感受偏中性、風(fēng)格扁平的這個方向，這個風(fēng)格和雪球用戶特征更契合。
XDC干貨｜雪球表情升級全紀錄
提升辨識度
表情在交流中作為非文字的“語言”，其辨識度至關(guān)重要。表情在行文中的尺寸相對較小和單個文字差不多，那么如何保證在文字中依然能一眼讀懂表情？
在對表情整體風(fēng)格的把控下，需要通過對細節(jié)的打磨和反復(fù)實驗，得出更有辨識度的設(shè)計方案。保持視覺扁平，盡量使用簡潔的幾何圖形，加強顏色對比度，減少顏色數(shù)量，放大表情特征。通過以上手段有效的提升了表情的一致性和在行文中的辨識度。
XDC干貨｜雪球表情升級全紀錄
 
 
 
XDC干貨｜雪球表情升級全紀錄
發(fā)現(xiàn)股民討論語境下的“梗”
本次表情升級除了對現(xiàn)有表情進行改造升級，還針對雪球社區(qū)特色進行挖掘。
1.挖掘“梗”
前面我們說到雪球用戶是集中在30-50歲左右的男性，那么這類人群在社區(qū)中有怎樣的表達特點呢？
通過觀察我們發(fā)現(xiàn)，在面對股市的波動和不確定性，雪球用戶更喜歡用幽默詼諧的論調(diào)來調(diào)侃市場以宣泄心中的無奈和負面情緒，同時在波動面前展現(xiàn)出一種堅韌和自嘲的心態(tài)。我們可以在這種“戲謔調(diào)侃”中挖掘可以視覺化的情緒和表情。以此作為本次表情升級的一個重要方向。
戲謔調(diào)侃的表情有哪些呢？我們挖掘了當下網(wǎng)絡(luò)社交流行的表情包和熱詞?；叵胍幌挛覀兪欠褚步?jīng)常使用類似“地鐵老人看手機”“黑人問號臉”等網(wǎng)絡(luò)熱圖來表達內(nèi)心的復(fù)雜情緒呢。
XDC干貨｜雪球表情升級全紀錄
在變幻莫測的股市中，面對現(xiàn)實的無力和不確定，祈福求平靜成了股民表達情緒舒緩心情的一種方式，比如“敲木魚”“祈求大漲”等儀式感的情境以表情的方式呈現(xiàn)，也能一定程度上引起用戶的共鳴。
XDC干貨｜雪球表情升級全紀錄
2.讓表情“淋漓盡致”
  • 微表情盡顯“內(nèi)心戲”
一個表情里往往蘊含不只一種情感，短暫而難以察覺的面部變化最能傳達個體真實的情感狀態(tài)，一個眼神、嘴唇微動等細微變化，常常表達出個體內(nèi)在的真實狀態(tài)。
在設(shè)計“大哭”這個表情時，我們挖掘到大哭背后可能是某種“絕望”，那么觀察下人們絕望時最大的面部特點是不是空洞的眼神和僵硬的臉？用這樣的微表情和大哭結(jié)合在一起，感受大哭情緒的同時也傳遞了絕望的內(nèi)心戲。
XDC干貨｜雪球表情升級全紀錄
  • 賺了、虧了一目了然
股票社區(qū)中漲跌是永遠的話題，市場的漲跌背后牽動著的是股民們真金白銀的賬戶。“虧大了”和“暴富”這兩個表情很生動的表達了用戶盈虧的兩種處境，但原有表情的視覺表達過于保守和隱晦。要讓用戶一眼看到就產(chǎn)生共鳴，紅綠色是最直觀的漲跌信號，我們把這種語義和表情結(jié)合，“虧大了”除了表情沮喪還得加點綠色烘托氛圍，“暴富”的喜悅中再加上紅包加持情緒。
 
XDC干貨｜雪球表情升級全紀錄
  • 戲劇化表達
在某些極端情緒上我們還嘗試打破舊表情的禁錮，用更加生動夸張的方式呈現(xiàn)。比如“絕望”，只靠面部表情似乎無法充分的表達，所以我們營造了簡單的環(huán)境和肢體動作， 一個癱在墻角雙目無神的小黃臉，絕望的形象躍然紙上。
XDC干貨｜雪球表情升級全紀錄
3.股票專屬“梗”
雪球社區(qū)里有一些獨特的表情，比如“關(guān)燈吃面”，它是雪球老用戶傳承的經(jīng)典梗；還有諸如跳水、割肉、抄底、滿倉等股票術(shù)語梗也頗受歡迎。升級優(yōu)化這類表情的同時我們小開腦洞在原有基礎(chǔ)上增加了“好基友”等新梗，讓股民表達更豐富有趣。
XDC干貨｜雪球表情升級全紀錄
 
XDC干貨｜雪球表情升級全紀錄
IP表情化
去年雪球誕生了自己的IP“YOYO”，此次表情升級正好可以將IP表情化，在平臺應(yīng)用和傳播。
YOYO所代表的品牌語義
1.福祿壽：因其原型是馴鹿，取福祿壽之意，代表財富；
2.溫暖陪伴&服務(wù)感：馴鹿具備天生的陪伴和服務(wù)感，與雪球強調(diào)的品牌服務(wù)感相契合。
XDC干貨｜雪球表情升級全紀錄
YOYO品牌語義表情化
根據(jù)YOYO的兩種品牌語義，我們分別開腦洞。
哪些意向和財富相關(guān)呢？我們找到“錦鯉”“招財貓”“金元寶”，這些元素和表情相結(jié)合形成財富類表達；那么陪伴和服務(wù)感我們使用“抱抱”、“打call”這類溫暖鼓勵意向的肢體語言來和YOYO結(jié)合傳達。
XDC干貨｜雪球表情升級全紀錄
 
 
作者：雪球設(shè)計中心XDC
來源：站酷

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 

評論(0) 瀏覽(362)

向用戶請求權(quán)限的正確方式

博博

 

權(quán)限的目的是保護用戶隱私，那么在何時以及用什么方式請求用戶權(quán)限會是比較合適的？本文將詳細介紹Android的運行時權(quán)限模型，并展示設(shè)計一個UX來請求你的應(yīng)用程序所需的權(quán)限，希望對你有所啟發(fā)。
從Android 6.0開始，沒有在安裝時請求所有權(quán)限，而是引入了運行時權(quán)限模型，開發(fā)者可以控制應(yīng)用何時以及如何請求權(quán)限。這如同你想邀某人出去約會，過早、過頻繁或以錯誤的方式對你來說并不好。
本文我將詳細介紹Android的運行時權(quán)限模型，并向你展示如何設(shè)計一個UX來請求你的應(yīng)用程序所需的權(quán)限。權(quán)限的目的是保護用戶的隱私，但當你請求權(quán)限時，你是在要求用戶放棄一點隱私，因此，你需要提供明確且平等的利益以換取訪問。運行時權(quán)限允許你在用戶更了解你請求權(quán)限的原因和授予權(quán)限的好處時選擇合適的時間請求權(quán)限。Android實現(xiàn)它們的方式使得以正確的方式請求它們變得十分重要。
運行時權(quán)限模型有利于保護用戶的隱私，當你的應(yīng)用程序請求權(quán)限時，Android會顯示一個對話框讓用戶接受或拒絕它，第一次請求權(quán)限時對話框不會顯示“不再詢問”復(fù)選框，只會在用戶至少一次拒絕權(quán)限請求后顯示它，你可以檢查之前是否被拒絕過，并明智的決定在何時提供更多教育。
向用戶請求權(quán)限的正確方式
從Android 11開始，如果用戶在使用應(yīng)用的過程中多次拒絕某項特定的權(quán)限，那么在你的應(yīng)用再次請求該權(quán)限時，用戶將不會看到系統(tǒng)權(quán)限對話框。該操作表示用戶希望“不再詢問”。
你無需過度防御，例如在實際請求權(quán)限之前你始終通過預(yù)許可（預(yù)授權(quán)）來衡量用戶授予權(quán)限的可能性，本質(zhì)上是請求兩次，這種雙重提示可能是不必要且煩人的，你可以通過在正確的時間以正確的方式詢問來達到同樣的效果。
Material Design分解了在兩個維度上請求權(quán)限的不同方法。首先權(quán)限對你的應(yīng)用程序的運行有多重要？其次，你請求它的原因有多清晰？根據(jù)這兩個因素，建議你采用不同的方法來請求權(quán)限。
向用戶請求權(quán)限的正確方式
預(yù)先請求權(quán)限（Ask up-front）
如果某項權(quán)限對應(yīng)用程序運行至關(guān)重要，并且顯而易見為什么需要請求它。例如日歷應(yīng)用，拒絕日歷權(quán)限會使應(yīng)用程序無法運行，并且用戶顯然知道日歷應(yīng)用的用途以及請求日歷權(quán)限的原因，因此
不需要用任何不必要的解釋來打擾用戶，只需在用戶首次啟動應(yīng)用時立即請求它即可。
向用戶請求權(quán)限的正確方式
預(yù)先教育（Educate up-front）
如果某項權(quán)限對應(yīng)用至關(guān)重要，但請求它的原因不是很清晰。例如信貸應(yīng)用，為了準確評估用戶的信貸資格、償還能力和防范反欺詐，通訊錄權(quán)限、通話記錄權(quán)限、位置權(quán)限對于風(fēng)控而言非常重要，建議請求權(quán)限之前對用戶進行教育。
向用戶請求權(quán)限的正確方式
使用場景中請求權(quán)限（Ask in context）
如果應(yīng)用中的某項次要功能需要權(quán)限，但請求它的原因很清晰，建議你在使用場景中請求權(quán)限。例如筆記應(yīng)用允許用戶使用語音或音頻創(chuàng)建筆記，那么很明顯為什么此功能需要麥克風(fēng)權(quán)限，無需過早的請求它，以免用戶負擔過重，最好等到用戶嘗試使用該功能時，因為用戶更有可能允許符合其預(yù)期的權(quán)限請求。
向用戶請求權(quán)限的正確方式
結(jié)合使用場景進行教育（Educate in context）
如果應(yīng)用中的某項次要功能需要權(quán)限，并且請求他的原因不是很清晰，建議你結(jié)合使用場景進行教育。例如筆記應(yīng)用允許用戶與朋友協(xié)作，那么請求聯(lián)系人權(quán)限可能是合理的，但它不是顯而易見的，當用戶調(diào)用該功能時，解釋應(yīng)用獲得聯(lián)系人權(quán)限后可為用戶提供哪些好處，比如自動填充郵件地址，然后才請求聯(lián)系人權(quán)限讓用戶授予它。
向用戶請求權(quán)限的正確方式
處理權(quán)限請求遭拒情況
通過使用正確的方法，用戶應(yīng)該清楚應(yīng)用請求權(quán)限的原因以及應(yīng)用獲得權(quán)限后可以為他們提供哪些好處。然而，這并不意味著用戶一定會授予權(quán)限。如果用戶拒絕了權(quán)限請求，建議采用以下做法：
  • 在應(yīng)用界面中突出顯示因為沒有獲得特定權(quán)限而受限的功能所在的具體部分，例如在原本用于顯示該功能的結(jié)果或數(shù)據(jù)的位置顯示一條消息，讓用戶知道因缺少權(quán)限而無法使用該功能，幫助用戶在權(quán)限和功能之間建立心理聯(lián)系。
  • 不要阻止界面顯示，不要全屏警告消息，讓用戶根本無法繼續(xù)使用應(yīng)用。即使在權(quán)限請求拒后，應(yīng)用也應(yīng)盡可能提供最佳的用戶體驗。例如即使麥克風(fēng)使用權(quán)限請求遭拒，仍應(yīng)全面提高文本功能的易用性。
  • 用戶可能已經(jīng)選中了“不再詢問“復(fù)選框，應(yīng)用可能會在用戶未看到權(quán)限請求對話框的情況下受到拒絕，此時應(yīng)用應(yīng)該提供一個鏈接，鏈接到設(shè)備設(shè)置中用戶可以打開權(quán)限的具體位置。
盡量減少權(quán)限請求
在應(yīng)用中聲明權(quán)限之前，請先考慮是否需要這樣做，或者是否有替代方法可以在應(yīng)用中支持該功能。因為如果應(yīng)用聲明權(quán)限，那么每當用戶使用需要運行時權(quán)限的功能時，應(yīng)用便不得不中斷用戶的操作，請求相應(yīng)權(quán)限。然后，用戶必須做出決定。如果用戶不能理解您的應(yīng)用為何請求特定權(quán)限，可能就會拒絕授予該權(quán)限，甚至卸載應(yīng)用。
下面介紹幾個可以在不聲明任何權(quán)限的情況下實現(xiàn)的用例：
拍攝照片/錄制視頻
Android為應(yīng)用提供了相互通信的功能，讓你可以將任務(wù)委托給其他應(yīng)用。例如，如果你希望允許用拍照，但它不是應(yīng)用的核心部分，可以考慮使用Intent請求相機應(yīng)用拍攝照片并將其分享給你的應(yīng)用，這樣就不需要CAMERA權(quán)限。
自動輸入動態(tài)短信驗證碼
雙因素身份驗證流程中，動態(tài)短信驗證碼作為第二校驗因素時，使用SMS Retriever API（短信檢索器）可以讓應(yīng)用自動執(zhí)行用戶身份驗證，不需要用戶手動輸入驗證碼，不需要READ_SMS權(quán)限。  
 
作者：交互設(shè)計師張楚
來源：站酷
 

 

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計

軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(405)

如何為用戶提供正確的鍵盤輸入類型？

博博

Android和iOS系統(tǒng)都設(shè)計了針對特定表單字段的指定鍵盤輸入類型。但大多數(shù)開發(fā)人員未能在他們的代碼中指定正確的鍵盤輸入類型。這會導(dǎo)致移動設(shè)備上的表單完成效率變慢。本文以Android平臺為例。
一、輸入類型并不總是“文本”
大多數(shù)開發(fā)人員錯誤地將每個表單字段的輸入類型設(shè)置為“文本”。這存在問題，因為每個表單字段的輸入并不總是純文本。通常都有一些字段要求輸入帶有數(shù)字或字母和數(shù)字組合的信息。當用戶嘗試填寫這些字段時，他們應(yīng)該看到一個數(shù)字或字母和數(shù)字組合的鍵盤。
不幸的是，當每個字段的輸入類型都設(shè)置為“文本”時，它會強制用戶使用文本鍵盤來輸入數(shù)字或字母和數(shù)字組合，輸入時舉步維艱，不是誤點，就是需要頻繁切換，輸入體驗十分糟糕。
因此，請務(wù)必為每個表單字段指定輸入類型，以便系統(tǒng)能夠顯示相應(yīng)的鍵盤。除了指定輸入類型，我們還應(yīng)指定相關(guān)行為，例如輸入法是否提供拼寫建議、是否將句子的首字母大寫，以及是否使用“完成”或“下一項”等操作鍵替換“回車”。
輸入類型、行為、操作鍵整理如下：
如何為用戶提供正確的鍵盤輸入類型？
例一. 郵箱地址字段
表單要求用戶提供他們的郵箱地址是很常見的。當我們將輸入類型設(shè)置為“郵箱地址”時，它會為用戶提供一個針對郵箱地址輸入的鍵盤。這個鍵盤不僅顯示字母，還可以顯示“@”和“.”，用戶可以輕松地輸入他們的郵箱地址。
如何為用戶提供正確的鍵盤輸入類型？
例二. 姓名字段
英文名是專有名詞，英語中專有名詞的第一個字母要大寫。我們將輸入類型設(shè)置為“人名”，并且設(shè)置單詞首字母大寫。用戶無需對英文字母進行大小寫切換。
如何為用戶提供正確的鍵盤輸入類型？
二、每個鍵盤對輸入類型的反應(yīng)可能不同
案例一：登錄頁面的密碼輸入
釘釘將密碼框輸入類型設(shè)置為“密碼”。假定密碼為 z0h0a0n0g。
  1. 百度輸入法顯示密碼鍵盤，完成密碼輸入僅需點擊 9 次。
  2. 搜狗輸入法顯示文本鍵盤，用戶需在字母和數(shù)字之間切換，完成輸入需點擊 17 次。也支持長按第一行的字母輸入數(shù)字。
  3. 微信輸入法顯示文本鍵盤，完成密碼輸入需點擊 17 次。不支持長按字母輸入數(shù)字。
如何為用戶提供正確的鍵盤輸入類型？
案例二：登錄頁面的手機號輸入
釘釘設(shè)置電話號碼鍵盤右下角為“下一項”按鈕。
  1. 百度輸入法的鍵盤右下角顯示“回車”，用戶完成手機號輸入后需手動獲取密碼文本框焦點。
  2. 搜狗輸入法的鍵盤右下角顯示“下一項”，用戶完成手機號輸入點擊下一項，密碼文本框自動獲取焦點。
  3. 微信輸入法的鍵盤右下角顯示“下一項”，用戶完成手機號輸入點擊下一項，密碼文本框自動獲取焦點。
如何為用戶提供正確的鍵盤輸入類型？
三、Input Type 助力產(chǎn)品輸入體驗的提升
通過應(yīng)用 Input Type 你可以正確的為每個文本字段設(shè)置特定的輸入類型，以及看到每個輸入類型（以及輸入類型的組合）如何影響鍵盤。
Input Type這個工具需要安裝在安卓手機上，如果沒有安卓手機可以電腦上安裝一個網(wǎng)易MuMu安卓模擬器就可以用。
應(yīng)用截圖
應(yīng)用截圖

作者：交互設(shè)計師張楚
來源：站酷

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計

軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(442)

從產(chǎn)品創(chuàng)新到品牌體驗，設(shè)計究竟有多重要？

前端達人

在當今激烈的商業(yè)競爭中，企業(yè)成功的因素多種多樣，其中設(shè)計是否成為決定性因素備受爭議。從產(chǎn)品創(chuàng)新到品牌體驗，設(shè)計的影響力逐漸凸顯。本文將深入探討設(shè)計在商業(yè)領(lǐng)域的重要性，并剖析其如何塑造企業(yè)形象、影響產(chǎn)品銷售以及提升用戶體驗。

 

1. 設(shè)計與產(chǎn)品創(chuàng)新

產(chǎn)品創(chuàng)新是企業(yè)保持競爭力的關(guān)鍵之一，而設(shè)計在這一過程中扮演著重要的角色。通過獨特的設(shè)計理念和創(chuàng)新的外觀，企業(yè)能夠突破傳統(tǒng)，吸引消費者的注意力。例如，蘋果公司憑借其獨特的產(chǎn)品設(shè)計，成功地將智能手機從功能性產(chǎn)品轉(zhuǎn)變?yōu)闀r尚潮流的代表。

 

2. 設(shè)計與品牌形象

品牌形象直接關(guān)系到企業(yè)在市場中的地位。設(shè)計不僅僅是產(chǎn)品外觀，還包括標志、廣告、包裝等各個方面。一致、有吸引力的設(shè)計能夠加強品牌認知度，形成獨特的企業(yè)形象。例如，可口可樂的標志設(shè)計一直以來都是簡潔而具有辨識度的代表，為品牌樹立了強大的形象。

 

3. 設(shè)計與產(chǎn)品銷售

消費者在購買產(chǎn)品時通常會首先被外觀所吸引，而設(shè)計正是影響消費者購買決策的一個重要因素。產(chǎn)品設(shè)計的吸引力可以直接影響銷售情況。一款外觀精致、符合消費者審美的產(chǎn)品更容易贏得市場。因此，企業(yè)在產(chǎn)品設(shè)計上的投入，往往能夠在銷售層面獲得回報。

 

4. 設(shè)計與用戶體驗

隨著消費者對產(chǎn)品體驗的重視不斷增加，用戶體驗設(shè)計變得愈發(fā)關(guān)鍵。用戶友好的設(shè)計能夠提高產(chǎn)品的易用性，增強用戶滿意度。無論是軟件界面還是實體產(chǎn)品的操控，設(shè)計都直接影響著用戶的感受?；ヂ?lián)網(wǎng)公司中，用戶體驗設(shè)計更是被視為至關(guān)重要的一環(huán)，因為一個良好的用戶體驗?zāi)軌虼偈褂脩舾釉敢獬掷m(xù)使用產(chǎn)品。

 

結(jié)語

在當今商業(yè)環(huán)境中，設(shè)計不再是簡單的裝飾品，而是企業(yè)成功的關(guān)鍵因素之一。從產(chǎn)品創(chuàng)新到品牌形象再到用戶體驗，設(shè)計在多個層面發(fā)揮著重要作用。企業(yè)若要在競爭中脫穎而出，就需要認識到設(shè)計的戰(zhàn)略價值，并將其納入業(yè)務(wù)發(fā)展的核心考慮之中。在這個創(chuàng)新迅猛的時代，或許真正能夠決定企業(yè)命運的，就是那個看似微小卻能夠改變一切的設(shè)計元素。

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(374)

B端產(chǎn)品 | 如何快速建立業(yè)務(wù)&產(chǎn)品認知

博博

先說結(jié)論：是很好的“答疑期”，但幫助有限，學(xué)會問問題，同時接納自己暫時不懂的情況。
 
在入職后，一般會有業(yè)務(wù)方向、研發(fā)背景、設(shè)計思路、產(chǎn)品使用流程等方面的培訓(xùn)講解。但即便同事講的不錯，對于剛?cè)肼毜奈覀儊碚f，也很難短時間內(nèi)消化掌握，并直接應(yīng)用到設(shè)計工作中。
 
在這個時期，有三點建議：
  1. 找關(guān)鍵詞
  2. 虛心請教
  3. 提出問題并給出方案
 
評論(0) 瀏覽(342)

用戶界面設(shè)計：是不是界面越簡單，用戶體驗就越好呢？

前端達人

用戶界面設(shè)計是現(xiàn)代軟件開發(fā)中至關(guān)重要的一環(huán)。在設(shè)計過程中，一個常見的爭論是是否簡化界面能夠提高用戶體驗。本文將探討這一問題，分析簡化界面和提高用戶體驗之間的關(guān)系，同時討論一些成功案例和最佳實踐。

 

引言：

隨著科技的發(fā)展，軟件應(yīng)用和網(wǎng)站的用戶界面設(shè)計成為用戶與技術(shù)互動的主要媒介。傳統(tǒng)觀念中，簡化界面通常被認為能夠提高用戶體驗，但這是否總是成立呢？

 

界面簡化與用戶體驗：

簡化界面的理念是通過減少復(fù)雜性，使用戶更輕松地完成任務(wù)。然而，這并不意味著一味地去除所有元素。在設(shè)計中找到平衡點至關(guān)重要，避免因過度簡化而導(dǎo)致用戶迷失在功能缺失的迷宮中。

 

成功案例分析：

一些知名的軟件和平臺通過簡化界面取得了顯著的成功。例如，移動應(yīng)用界面通常更簡單，專注于核心功能，為用戶提供高效的體驗。另外，一些社交媒體平臺也采用清晰簡潔的設(shè)計，讓用戶更容易分享和互動。

 

界面簡化的挑戰(zhàn)：

然而，過度簡化也可能引發(fā)問題。某些應(yīng)用在簡化的過程中可能削減了一些用戶希望使用的功能，導(dǎo)致用戶體驗下降。因此，在簡化界面時，設(shè)計團隊需要深入了解用戶需求，確保保留關(guān)鍵功能的同時簡化操作。

 

最佳實踐：

為了在簡化界面中取得成功，設(shè)計團隊可以采用一些最佳實踐。這包括用戶研究，以了解他們的期望和需求，持續(xù)的反饋循環(huán)，以及對設(shè)計進行用戶測試。通過這些方法，設(shè)計團隊可以更好地理解用戶，從而創(chuàng)造出簡單而強大的界面。

 

結(jié)論：

在用戶界面設(shè)計中，簡化并非唯一的成功途徑。用戶體驗的提升需要在簡化與功能之間取得平衡。通過深入了解用戶需求、采用最佳實踐，并不斷優(yōu)化設(shè)計，設(shè)計團隊可以打造出符合用戶期望且高效的界面，提升整體用戶體驗。

評論(0) 瀏覽(384)

B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)

博博

第一部分 | WEB表單設(shè)計
在B的設(shè)計中、表單是我們最為常見的設(shè)計內(nèi)容。下面我們來學(xué)習(xí)如何做好表單設(shè)計這部分內(nèi)容。
1、什么是表單
我理解表單就是系統(tǒng)為和用戶進行交互、所要收集用戶信息的或獲得用戶反饋的一種方式的載體。在后臺產(chǎn)品中對我們數(shù)據(jù)做的增、刪、改、查、驗都可以通過表單完成。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
表單是一種用于收集用戶輸入的HTML元素，通常用于創(chuàng)建用戶與網(wǎng)頁交互的表單。表單可以包含各種輸入字段，如文本框、復(fù)選框、單選按鈕、下拉列表和提交按鈕等。當用戶填寫表單并提交后，數(shù)據(jù)將被發(fā)送到服務(wù)器進行處理。在web開發(fā)中，表單是實現(xiàn)用戶交互和數(shù)據(jù)收集的重要手段之一。
 
1.1、常見應(yīng)用場景
在我們的后臺系統(tǒng)中、我們表單在70%的場景上都會使用到。采集錄入數(shù)據(jù)信息、編輯數(shù)據(jù)信息等。如我們SaaS管理平臺的學(xué)員錄入、檔案查詢、獎勵規(guī)則設(shè)置等。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
2、表單設(shè)計原則
設(shè)計原則是任何一種解決方案的指路燈。我們在表單的設(shè)計中需要遵循以下原則、
簡潔明了、清晰高效、適應(yīng)業(yè)務(wù)、及時反饋。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
2.1、簡潔明了
表單的設(shè)計應(yīng)該簡潔明了，避免過多的裝飾和元素干擾用戶填寫表單。
 
2.2、清晰高效
表單中的各個字段和選項應(yīng)該清晰可見。用戶應(yīng)該能夠快速找到需要填寫的字段和選項，并且填寫過程中不會遇到過多的困難。
 
2.3、適應(yīng)業(yè)務(wù)
應(yīng)該符合我們的業(yè)務(wù)應(yīng)用場景、滿足我們的業(yè)務(wù)需求。
 
2.4、及時反饋
在用戶填寫表單的過程中，應(yīng)該提供適當?shù)姆答仯巛斎腧炞C、錯誤提示等，以便用戶能夠及時了解自己的輸入是否正確。
 
3、表單構(gòu)成
我們通常的表單都基本都是由、標簽、域、提示、操作按鈕這四個部分構(gòu)成的。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3.1、標簽
標簽文本主要是解釋輸入項的含義，一般不宜太長，需要簡明扼要，快速讓用戶理解。輸入框標簽在布局上可以分為
左標簽、頂標簽、行內(nèi)標簽
。這三種設(shè)計在許多情況下可以提高可讀性和用戶友好性，但也有一些潛在的缺點。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3.1.1、左標簽
優(yōu)點：可讀性強、減少用戶的認知負擔。布局直觀、提高填寫速度。
缺點：不適合長標簽、對業(yè)務(wù)場景適用性差。
 
3.1.2、頂標簽
優(yōu)點：節(jié)省空間、減少表單的長度和寬度。視覺層次清晰。
缺點：需要額外的間距、縱向空間利用率不高
 
3.1.3、行內(nèi)標簽
優(yōu)點：節(jié)省空間、簡潔易于閱讀
缺點：可讀性有限、對于長標簽或復(fù)雜內(nèi)容可讀性降低、不適合大部分的場景。
 
3.2、域
表單的域表示的是一個空間。這個空間里可以是輸入內(nèi)容、選擇內(nèi)容、選則時間、選擇數(shù)值、觸發(fā)交互按鈕（上傳資料）等
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3.3、提示
避免廢話、給出結(jié)果以及處理方式。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3.4、按鈕
一般出現(xiàn)在頁面頂部、跟隨表單里的內(nèi)容、表單內(nèi)容底部、頁面底部。
在我們系統(tǒng)設(shè)計里。我是更愿意把按鈕放在頁面的底部。至于為什么可以看一下、我之前的《按鈕的基礎(chǔ)設(shè)計知識的文章》
 
4、設(shè)計細節(jié)
除了上面表單的基礎(chǔ)知識外，為了我們表單設(shè)計的更好我們就需要在細節(jié)上下功夫了。畢竟優(yōu)秀的設(shè)計師注重細節(jié)的表現(xiàn)的。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
4.1、表單里標簽后的冒號要不要加
最初是因為屏幕顯示的原因所以才加的冒號、隨著技術(shù)的進步?，F(xiàn)在可加可不加。系統(tǒng)內(nèi)統(tǒng)一就行。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
4.2、如何設(shè)定輸入框的寬度
輸入框的寬度是自適應(yīng)的、輸入框的寬度是有暗示左右的。在真實場景中，大部分輸入框是存在理想長度的，那么就應(yīng)該向用戶暗示所需輸入內(nèi)容的長度來減輕判斷負擔。下圖就是典型案例，一個實際不需要花多少錢的金額輸入框在左圖中進行等寬處理，反而容易誤導(dǎo)用戶對輸入金額的判斷，造成一種不安全感。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
4.3、表單布局
在表單中我們采用多種布局方式。
信息分組、內(nèi)容列表、標簽頁、分步驟。
在信息傳遞上。這集中布局方式本質(zhì)都是一樣的。將信息進行分類展示。來更好效的進行信息的傳遞和展示。理論支持、格式塔原理
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
我們?nèi)绾芜x則適用那種布局方式呢。很簡單需要展示內(nèi)容的多少。
 
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
第二部分 | 表單交互
為了讓我們表單的用戶體驗做到極致、我們還有注意這些交互上的細節(jié)。做好這些細節(jié)將大幅提升我們的用戶體檢。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
1、錯誤提示
驗證用戶輸入活提交信息是否正確、驗證方法有三種、實時、提交后、服務(wù)器。因為他們時效性不同所以應(yīng)用的場景也不同。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
錯誤提示要適用積極地的語言、不清楚的告訴用戶存在哪里、要如何修復(fù)。
 
2、更智慧、高效
之前好像看過一個什么定律忘了。他的大致意思是，如果系統(tǒng)能處理的問題盡量讓系統(tǒng)去處理、不用留給用戶去操作。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
2.1、簡化輸入智能默認
如果可以帶出來的信息可以盡力帶過來。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
滿足多數(shù)人需要的地方放置選擇，來幫助用戶作出明智選擇。互聯(lián)網(wǎng)表單中有很多地方能利用智能默認減少必要的選擇次數(shù)，加速表單完成過程。
 
2.2、個性化默認
保留用戶登陸信息、重復(fù)填寫內(nèi)容。例如、之前去醫(yī)院需要手機登陸的那段時間。在去過一次后。掃完填寫信息制藥填一個名字、其他信息都帶出來了。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
2.3、及時新增
我們在滿足大部分用戶的同時、在某些場景里還要提高額外的輸入框給需要的人用。同時不會阻礙不需要的人。這類輸入框常常被作為高級選項或者額外選項。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3、結(jié)構(gòu)
一個結(jié)構(gòu)充分的表單就像一個與用戶的良好對話。所以記住這一點，仔細規(guī)劃結(jié)構(gòu)。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3.1、從簡單開始到創(chuàng)建邏輯分類
從簡單問題開始，用戶已經(jīng)很清楚答案了。將不相關(guān)的信息按邏輯分組展示。來幫助用戶理解。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
3.2、單步、多步、單列、多列
至于這些的方式的選擇、總的來說還是信息呈現(xiàn)多少的不同。單步的轉(zhuǎn)化率更高。但多步卻更適合復(fù)雜信息的收集。
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
單列和多列基本也是一樣的道理
 
B端基礎(chǔ) | 全套WEB表單設(shè)計基礎(chǔ)
 
 
 


作者：彪形大漢pro
來源：站酷

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

 

評論(0) 瀏覽(446)

時尚之魅：你眼中的設(shè)計之美是什么？

前端達人

在這個充滿時尚與活力的都市中，設(shè)計不僅僅是一種創(chuàng)作行為，更是一種生活態(tài)度。城市的脈動與光影交織出多彩的畫卷，而設(shè)計，便是將這些瞬間的靈感凝固在時間的長河中，成為時代的見證者。

 

時尚，它不只存在于服裝與配飾，更潛藏在城市的每一個角落。在熙熙攘攘的街頭巷尾，建筑的線條、廣告的色彩、公共空間的布局，都在訴說著設(shè)計之美。是什么讓你在這座城市中駐足停留？是那個獨特的商標設(shè)計，還是那個別致的街頭藝術(shù)？

設(shè)計之美如同城市的心跳，無處不在。當你穿梭在繁忙的商業(yè)區(qū)，是否會被櫥窗中的陳列所吸引？或者，當你漫步在公園的小徑上，是否會留意到每一塊石子的鋪設(shè)都是精心設(shè)計的產(chǎn)物？城市中的每一寸空間，都是設(shè)計師們留下的足跡，都是他們對生活的獨特解讀。

 

設(shè)計之美，不僅僅是視覺的愉悅，更是一種情感的共鳴。每一個建筑的線條，每一個家居的布置，都承載著設(shè)計師對生活、對人性的理解。當我們步入一個設(shè)計感強烈的空間，仿佛也融入了設(shè)計師的心靈，感受到了他們所要傳達的情感和思考。


 

回到最初的問題：你眼中的設(shè)計之美是什么？或許是一張絢爛的海報，或許是一款時尚的家具，亦或是一處別致的小巷。每個人對于設(shè)計的理解各有不同，因為設(shè)計之美是主觀的，它更關(guān)乎個體的感知和體驗。

 

在這個快節(jié)奏的城市中，時尚之魅始終如影隨形。設(shè)計之美，既是城市的風(fēng)景，也是生活的點綴。讓我們一同探討，在這個視覺的交響曲中，你眼中的設(shè)計之美究竟是怎樣的？或許，你會在這無盡的創(chuàng)意空間中，找到屬于自己的設(shè)計之旅。

藍藍設(shè)計(sillybuy.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI咨詢、UI設(shè)計服務(wù)公司、軟件界面設(shè)計公司、界面設(shè)計公司、UI設(shè)計公司、UI交互設(shè)計公司、數(shù)據(jù)可視化設(shè)計公司、用戶體驗公司、高端網(wǎng)站設(shè)計公司

銀行金融軟件UI界面設(shè)計、能源及監(jiān)控軟件UI界面設(shè)計、氣象行業(yè)UI界面設(shè)計、軌道交通界面設(shè)計、地理信息系統(tǒng)GIS UI界面設(shè)計、航天軍工軟件UI界面設(shè)計、醫(yī)療行業(yè)軟件UI界面設(shè)計、教育行業(yè)軟件UI界面設(shè)計、企業(yè)信息化UI界面設(shè)計、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)

評論(0) 瀏覽(356)

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://sillybuy.com

存檔