<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          互聯網金融產品——適老化設計分析

          ui設計分享達人

          雖然,三類互聯網老年人用戶模型之間各有差異,但我們發現他們最大的共性的特點在于具有開放的心態積極地接受更多理財新可能,因此我們也應該盡可能從交互視覺的角度或從產品功能的角度為老年群體提供更多樣化的互聯網理財參與方式,并且降低參與的門檻。因此我們得到以下適老化改造的策略方向:

          (1)產品內容功能上充分考慮老年人對理財產品的認知以及期待

          (2)交互視覺上充分考慮老年人感官、心理、認知上的特性

          (3)技術規范上充分考慮如何利用技術便利用戶操作以及產品體驗設計的最大化落地



          改進分析


          根據過往產品設計經驗,我們提出線上金融服務設計的三大原則:

          操控感:所見的是什么,剛剛干了什么,現在在干什么,接下來怎么做,可達成什么目標。

          無障礙:適用于任何人群

          安全感:資產保障安全感、使用體驗安全感

          基于以上設計原則,結合本次適老化改造的策略方向,我們得到以下具體改進方向。



          1. 設計原則拆解


          操控感


          能懂會用,可以有效減少老年人在使用線上產品時焦慮感和挫敗感。讓老年人知道看到的是什么,正在做什么,接下來要這么做,可以達成什么目標,這是在使用線上產品進行一切操作的基礎條件。


          (1)簡潔的界面

          大字體、大圖標、界面簡潔;老年人因其生理結構特征,很難輕易識別一些較小的文字、圖形;因此在界面設計的適老化改進上,需要簡化信息布局、放大圖形文字;


          (2)清晰的導航

          產品中的導航可以幫助用戶快速定位當前所在位置,剛剛在哪里,未來會到哪里去。清晰的導航有以下三大特點:

          連貫性:頁面跳轉前后需有繼承關系,不光是文字,字體、顏色等視覺元素也可以加強關系

          扁平化:盡量減少跳轉避免出現多層級,除了操作復雜之外,客戶使用時的記憶成本也較高

          易記憶:無論導航的位置、描述、視覺元素,都應在用戶心智中穩定固化,憑借記憶可以快速定位;

          圖11:支付寶(關懷版)


          (3)明確的語義

          所有描述、狀態、操作盡量唯一且易于理解,符合老年人的基礎認知;


          (4)及時地反饋

          任何用戶操作行為都應有相應結果,對于極其敏感易焦慮的老年人群體來說更為重要,如加載、成功、失敗、異常情況等,且反饋內容應明確可被理解,即在各項流程結束后應給出含有明確反饋的流程結果頁面;對于學習和理解能力較弱的老年人而言,及時地反饋顯得更為重要;


          (5)順暢的流程

          復雜業務流程的任務對于老年人來說挑戰最大,失敗率也最高。除了與本身流程復雜,以及上述的語義不清、反饋不及時等可用性問題有關之外,流程體驗的閉環對于老年人群體而言也是極其重要。


          無障礙


          (1)輔助性功能

          由于老年人的視力與協調能力開始下降,很難進行很復雜的交互動作。在線下場景中,老年人辦理業務時會有銀行工作人員在身邊進行輔助。同樣,在老年人使用APP時,產品也應起到輔助作用。常見做法有,線上客服、語音輸入輔助、使用說明和操作示范等;文本輸入提示,語音輸入等無障礙功能,用于提升方言識別能力,方便不會普通話的老年人使用智能設備;對智能客服入口的設置也不僅僅放在首頁,應輻射到盡可能多的頁面。

          圖12:工商銀行(幸福生活版)、平安銀行(大字版)、中信銀行(幸福+版)人工客服頁


          (2)低密度信息

          對于老年人而言,即便是頁面內信息的層級非常清晰,高密度的信息仍會增加記憶負荷。因此在針對老年人的產品設計中,不應過度追求頁面效率,適當去掉形容性、專業性、技術性、營銷性、裝飾性的信息,將有助于信息降噪。


          (3)簡化操作

          降低老年人的輸入成本,例如合理規劃驗證碼出現機制,身份證信息、銀行卡號的圖像識別、自動保存常用聯系人等。


          (4)產品適用性

          市場上某些頭部的金融相關APP已經推出老年版本,如支付寶的關懷版,該版本不僅是字體、按鈕更大,更重要的是通過不同的信息功能架構,將不同年齡層的用戶客群做了產品注意力的重點區分,強調不同類型用戶的使用的場景不同,有助于將用戶的注意力鎖定在與其相關的業務上,提升用戶完成任務的效率。


          安全感


          (1)資產保障安全感

          近些年有關老年人的金融詐騙層出不窮、人人自危,除了實際保障資產安全的措施之外,在服務設計層面上也需要保障和增強用戶安全感受。如在某些特定場景中,轉賬、匯款時,及時告知用戶可能存在的風險,大額時需要子女輔助驗證等;


          (2)使用體驗安全感

          在產品設計中需要考慮防錯和容錯機制,這有助于減少問題的發生,消除老年人使用產品時的恐懼感,讓用戶放心安全的使用產品。例如輸入金額時明確顯示單位,金融產品頁面強化顯示風險與收益,大額需要二次確認。

          根據以上改進方向和原則,下面對目前產品的部分功能模塊和非功能模塊分別進行梳理和優化,產出初步優化方案和建議,并對其中部分具體功能的實現做技術分析和方案要求。




          2. 具體功能優化分析


          2.1 基金賬戶類

          涉及開戶流程、風險測評問卷、資料變更等板塊。需要適配改進的地方包括以下幾個方面:

          (1)證件上傳

          開戶證件OCR識別和上傳,對二代身份證的支持較為完備,對一代身份證和其他證件類型的支持不到位。老年人群體存在持一代身份證的可能性;

          (2)開戶綁卡

          開戶綁定銀行卡,基金公司支付渠道僅支持銀聯標志的銀行借記卡,對存折等非借記卡不支持;

          (3)預留信息

          央行反洗錢、CRS等合規要求對開戶資料預留信息字段作出了明確規定,其中部分字段不容易讓人理解和獲取,如賬戶實控人、電子郵箱等;

          (4)風評問卷

          關于風評問卷,目前題目數量較多,建議減少至5道題左右;

          (5)密碼找回

          增加多種找回密碼的途徑,如手機號、電子郵箱、手機短信。


          2.2 基金交易類


          涉及申購、贖回、專戶、分紅方式、定投等功能,需要適配改進的地方包括以下幾個方面:

          (1)數字輸入

          交易密碼金額等數字輸入場景,建議盡量調起九宮格數字鍵盤,字號較大且清晰;


          (2)風險提示

          購買環節,按銷售適當性要求,醒目提示基金風險;

          (3)限額

          基金申購支付方式,適當提高支付限額,或引導匯款轉賬的方式,滿足大額申購場景。


          2.3 查詢類


          (1)在線客服

          建議增加語音輸入和播報功能,同時醒目提示人工客服點擊按鈕;

          (2)圖表查看

          基金列表和詳情頁等頁面中包含圖表的,建議增加豎屏和橫屏切換按鈕,增加圖表易讀性;

          (3)版本更新

          新版本發布時,建議增加新功能示意遮罩,指引客戶如何使用新功能。



          3. 非功能優化分析


          (1)色彩

          用色簡潔干凈、對比柔和。減少復雜顏色、漸變顏色、極端飽和度顏色的使用,盡量使用純色、基礎漸變、稍微明亮的顏色作為圖標用色,關鍵互動界面避免使用藍色。

          圖12:工商銀行(幸福生活版)、平安銀行(大字版)、中信銀行(幸福+版)功能列表頁


          (2)文字

          字體應使用黑體類型字體,且允許用戶自行調節或匹配手機系統字號,但最小字號不宜低于16px,多行文字顯示時行間距應為1.5倍字號大小,減少大量文字內容帶來的壓抑感;文字顏色使用不同透明度的黑色進行信息層級的區分,重要內容使用1~2種輔助性彩色作突出;


          (3)圖標

          圖標設計簡潔清晰,且需要有文字說明,避免使用過于抽象表意不明確的復雜圖標;


          (4)布局

          結合對老年人的認知及操作習慣,通過信息類型、展示頻率、重要性等方式進行歸類,形成合理的布局結構,通過這種行為塑造方式,讓用戶快速摸清產品形態;

          如下圖兩家銀行首頁布局由資產查看、常用功能金剛區、輪播圖、服務渠道、理財產品構成;在底部導航欄上只選擇展示兩個一級頁面以及突出顯示的語音助手入口。

          圖13:工商銀行(幸福生活版)、中信銀行(幸福+版)首頁


          (5)動效

          有效的動畫可以給頁面帶來生命感,但如果濫用動效不僅會分散用戶注意力,嚴重的話對某些用戶來說可能是致命的(光敏性癲癇的臨床誘因之一就是閃光圖像的刺激);

          為了避免給特殊人群造成困擾,設計師考慮加入動效時應注意禁止使用高頻閃動、運動夸張、視差較大的動效,并且在同一界面也應控制運動元素數量,避免對用戶的閱覽和判斷產生困擾。


          (6)無廣告

          由于老年人對事物的認知和理解能力較慢,過多的廣告會嚴重分散用戶注意力,甚至導致誤操作造成經濟損失,尤其一些具有強誤導性的開屏廣告、營銷活動廣告等;建議減少廣告數量、杜絕惡意引導廣告,并針對廣告投放需設立專門的審查人員進行合規審查。



          4. 技術規范要求


          (1)按鈕熱區

          對于文字按鈕需要保留較大的間距作為按鈕熱區,避免老年人用戶操作時誤觸;


          (2)版本切換

          新增版本切換功能,建議將按鈕直接展示于首頁右上角,且要有文字進行圖形說明,便于老年人用戶理解且能直接進行操作;

          現有APP采用架構為hybird app,基本的開發模式為:原生殼子+H5(vue),因此針對版本切換功能需要對APP架構進行調整,解決方案為對各項版本進行獨立開發或對原版本進行內置模塊開發。

          其中,獨立版本開發優點為各版本獨立、UI獨立、歷史包袱少;相應地,也提高了開發和維護成本;一些情況下多版本入口也會使用戶在使用上產生困惑;

          內置模塊開發,以模塊形式嵌入原生系統中。其優點為成本相對較低,使用入口統一,缺點為歷史包袱過多、開發自由度較低、改造過程也受老系統所制約。


          (3)語音識別

          考慮到用戶群體對于文字輸入和閱讀的能力欠佳,針對查詢功能、鍵盤(數字)輸入、智能助手等功能,嵌入語音識別、語音輸入、語音播報等技術,優化老年人用戶操作體驗。




          結論


          在互聯網日漸發達、金融逐步數字化的今天,越來越多的老年人群體嘗試著加入我們的步伐,他們構成了快速增長且日益富裕的目標受眾,但現實是,一些不恰當的設計讓他們望而卻步,無法享受科技能夠帶給人類的利益;為此,我們需要關注和反省,我們所創造的、服務于人類的產品,也應該有能力來適應人類衰老的過程,而創造這項能力,也已經成為了肩負在我們身上的責任。

          文章來源:站酷   作者:陳皮紅豆沙

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          數字金融產品的安全感設計探究

          ui設計分享達人

          當互聯網不斷的深入到我們的生活中,我們對安全感的需求也延續到了互聯網使用中,特別體現于互聯網金融產品。由于其具有風險性、收益性、流動性等特點,用戶對于資產安全的掌控感更為關注,產品使用體驗欠佳也直接影響客戶安全感。


          以下將基于自身工作總結和行業經驗,聚焦互聯網金融產品分享和總結如何向用戶營造安全感。


          目錄:

          一、需要什么樣的安全感?

          二、如何傳達出安全感?

          三、怎樣體現出安全感?




          需要什么樣的安全感?


          安全感是人類最底層的需求,但不同類用戶群體需要的安全感也各有千秋,我們參考第一財經商業數據中心×螞蟻財富的2019線上理財人群報告,將線上理財的人群分為四類:

          分別是初入職場的95后、職場新興力量的90后、理財中堅力量的80后和經歷風雨的70后。其中近一年的新增移動互聯網基民中超五層為90后、95后,成為金融移動互聯網的中堅力量。


          這類型的投資者由于具有碎片化處理事務的習慣和金融知識不足、理財經驗不豐富、資金的抗風險能力不高的特點,當市場普遍行情下跌時,更容易產生焦慮的情緒而導致“割韭菜”,進而可能會影響到卸載APP的行為。根據Mob研究院的數據顯示,在2021年3月天天基金日均卸載用戶規模為前兩個月的6倍,而當時對應的市場行情正為基金普遍大跌。

          因此從安全感的需求上他們更側重高效的信息降維、足夠的理財產品的風險提示、合理的預期收益宣傳以及投后虧損及時的內容陪伴。


          而根據騰訊理財通×國家金融與發展實驗室出品的2021年互聯網理財行為與安全研究報告顯示,理財知識更充足,理財經驗更豐富的80后、70后在安全感的維護上則更關注理財產品的信息披露風險、信息不透明風險、市場政策風險、個人信息泄露風險此類問題。




          如何傳達出安全感?


          安全感是一種感性的心理感受,而人類的情感由本能、行為、反思三個層面共同決定的。

          這三個層次作為人類大腦的運作的規律,映射到設計當中,同樣是可供遵循、值得探究的。



          本能層

          先于意識和思維,它是外觀要素和第一印象形成的基礎,著重于產品的外觀、觸感等。“美觀即實用原則”人們會潛意識里認為好看的東西也是好用的,所以在界面設計當中,主要設計對象是視覺設計。


          而金融產品中,常用藍、綠等冷色調的色彩,給人以冷靜,穩定的感覺,表現金融產品的科技感和可靠性;常用紅、黃、橙等暖色調,代表著熱情、溫暖與責任。


          行為層

          是人類身體日常行為的運作,行為層的設計與產品使用過程中的愉悅感和效率有關。好的行為層設計對應產品功能傳達、易學性與易用性,以及正面的心情感受。在界面設計當中,主要設計對象是交互設計。(將在下文通過投資場景詳細分析)



          反思層

          超越了本能層和行為層,存在意識和更高級的感覺、情緒及知覺。對應的是產品的情感溫度,主要的設計對象是正向情感的結果反饋以及品牌信任。


          良好的企業品牌形象和口碑很大程度上會給用戶帶來認知上的安全感。用戶在初次選擇購買金融產品時,往往強大的品牌背書起到了關鍵作用,即使是同一只基金,用戶也會選擇在自己信賴的平臺里購買。

          我們可以通過在頁面設計中加入更多的品牌元素,如品牌主題色、LOGO、品牌IP形象、品牌slogan等,來潛移默化地讓用戶感受企業的價值:


          另一種常見于一些平臺利用強大的背書以及所獲的成就,清晰地向用戶展示可以提供的保障權益,責任條款及資質介紹等來傳達企業對用戶負責的態度,提升用戶對產品乃至對企業的信任感:




          如何體現出安全感?


          我們將金融的生命周期分為三個階段,分別可以概括為:投資前(產品選擇)、投資中(產品交易)、投資后(產品管理),不同階段的關注點不同,而對于安全感需求各不相同:



          投資前

          結合文章一開始對人群的分析,由于投前的行為特點更多聚焦于產品的選擇,因此從理財小白的角度對于安全感的缺乏更集中于“買了會不會虧錢?”、“產品買對了嗎”、“看不懂規則”、“這個適合我嗎”等,尤其存在于一些新形式的理財組合產品和策略智能投產品中。


          在這個階段的安全感維護,除了相關頁面的信息降維、必要的投教啟蒙以外,還需要考慮用戶疑問的快速解答、合理的預期收益宣傳等。另外投錢的啟蒙教育更可以考慮結合一些運營活動,讓小白用戶通過更有趣的方法了解產品,了解自己適合的產品。

          而對于較有經驗的理財“老司機”而言,安全感的缺乏更集中于“過往表現怎么樣,如最大回撤率等”、“市場行情、政策是否利好”、“基金經理的資歷”等,而更需要考慮信息的多維度展示、信息披露、行情資訊的展示、甚至是產品的對比等來表達產品的未來盈收能力可期。


          投資中

          當投資者已經選擇好信任的理財產品時,在產品交易的各個界面也需要關注交易流程中安全感的反饋。

          其中包括正向反饋和負向反饋。正向反饋是指用戶跟產品發生正確的交互時,系統給予用戶的正確引導,可以幫助用戶打消顧慮,建立信心,讓用戶感受到一切都在順利地進行著,這對那些在設備操作方面缺乏信心的用戶來說尤為重要,用戶不會對自己的操作或對平臺產生質疑,如:專屬的密碼輸入鍵盤、正向反饋如金額輸入時的金額提示、特別提出易誤解的交易規則等


          反向反饋是指用戶在操作過程中出現或疑似出現誤操作時,系統向用戶展示提示或二次確認以促進錯誤的糾正或確保此操作無誤。它能確保在第一時間告知用戶出現了不正確操作,及時更改,使流程順利進行,尤其是對于一些理財小白而言,合理的容錯設計更促進有效投資,提高未來的盈利體驗。如撤銷操作二次確認、購買超出風險承受能力的產品、輸入錯誤金額時的反饋。

          引起思考:

          雖然天天基金的撤單確認展示了退回帳戶,但是此彈窗的取消按鈕引導性過強,首次操作僅通過銀行卡的列表的箭頭較難聯想到是確認撤單的下一步操作(還以為是可選擇退的帳戶)。



          投資后

          產品交易成功后,投資者的關注會更集中于自己的資產的變化,產品的未來走勢等,因此在安全感的提供上,需要向投資者傳達準確的交易狀態、資產狀態、資產的保護等,甚至可以在產品購買的完成頁設置快捷加入自選和漲跌提醒等

          引起思考:

          在支付寶的基金總金額中,存在交易進行中的提示文案為“買入待確認*元”,但不少小白會產生疑問,當前展示的基金總金額是否包含提示的待確認金額,此時是否可將文案改為“含買入待確認*元”(畢竟也有部分直銷app并不會將待確認金額包含進產品的總金額中)


          另一方面的更需要考慮當基金產品存在虧損時,及時向投資者傳達情感陪伴和合理的投資交易,以促進投資者優化持倉或保持中長期持有,避免頻繁的短期交易而導致不良的盈利體驗。

          文章來源:站酷   作者:陳皮紅豆沙

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          交互體驗設計的核心概念之:示能與意符

          ui設計分享達人

          很多沒有接觸過交互體驗的設計師小伙伴們,總有會面臨一個坎,那就是看別人做交互和體驗的方案總是特別簡單,一個流程或原型別人做出來之后,我們心里總會想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。


          為什么?因為我們總是看著別人的結果下結論,而忽略了中間的思考過程。

          就好像是吃著別人做的番茄炒蛋,你會覺得不就是番茄和雞蛋一起炒一下,然后放點鹽和糖就好了嘛,我們只看到了結果,而忽略了對食材的選擇、處理、順序、結合。




          1.示能


          當我們看到一個控件,你覺得它不就應該在那里嘛,但輪到自己開始做,就壓根想不到要去用那個控件,甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業,如果做過的小伙伴可以發我交流一下。傳送門--》


          所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的,思考過程也是別人的,而商業設計師的核心是解決問題,解決業務和用戶的問題,既然解決問題的角色都是UI的上游,那么UI設計如何體現價值呢?當然就是把交互體驗的核心底層概念搞懂,和交互設計一樣從設計側去思考問題,賦能業務。


          OK,那么來我們先來講:示能



          1.1示能


          心理學家吉普森將示能描述為:“關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。



          用很直白的話來講,意思就是:事物通過自己外在的形態,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開的門,告訴人們可以進出、通過。一張椅子,人可以坐、可以靠。


          假如,你面前有一扇門,門上有一個把手,這扇門告訴我可以利用這個把手與我進行互動,你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門,那么我們可以利用推或者拉的動作打開,但如果是兩扇門并排,兩個把手在中央靠近,那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側,那么意思就變了,變成了將門側滑后才可以通過。


          那門為什么要設計成不同樣式來展示不同示能呢?這個留給大家思考,這三種門設計的初衷是什么。



          在我們數字產品中可以有什么體現呢?例如一個開關控件(switch),開關本身具有兩種互斥的屬性和功能:開/關、啟動/禁用,看到開關控件的外在樣式,我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。


          開關在現實生活中的表現樣式有很多,例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等



          大家別看開關看起來簡單,但是在設計起來會遇到不少的問題,因為狀態和意符形態在我們日常中過中很難成為一個標準,例如最常見的一側翹起的開關,如果不加意符,我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈,那么很簡單,我閉著眼睛去按就行了,燈滅著那肯定就是關,再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦,一個燈可能收到2處甚至3處開關的控制,而每處開關的數量會在3-5個,這個時候不用意符去標識,就很麻煩了。



          回到數字產品上,開關的示能就簡單多了,有顏色的狀態表示開,灰色狀態表示關,但是開關控件在剛用在數字產品上的時候,很多人經常誤以為是滑動交互來控制開關,雖然滑動也可以,但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長,那么滑動的示能就會更明顯。



          開關比較讓人產生歧義的地方來自于意符,因為很多新人將一些控件的屬性認為是有重疊關系,可以混用的,那就大錯特錯了,等會講。



          1.2.反示能


          和示能相反,指的是任何物體之間不能進行怎樣的互動。


          例如我們經常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設計師通過設計他的形狀、大小、材質,幫助我們去盛放一些小物件,例如鑰匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


          數字產品中也會遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖,和tab不同。



          并且在該控件的描述中,seg通常數量只能在5個以內,并且5個標簽分別屬于同類型的數據分割,只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。


          那有沒有一種可能,或者一個場景需要這兩種控件同時具備一些屬性呢?是有的,例如這樣



          在標簽下是列表,而列表也支持輕掃的交互進行刪除,如果使用tab則會產生沖突,而使用seg則在視覺上太重了,和產品調性不符。那么我們可以在示能上做一些調整,讓這個控件看上去不能左右滑動,又不至于太繁瑣。


          所以反示能將告訴我們,事物有哪些不具備的功能。同時反示能也是相對的,遇到多樣化的場景和業務需求時,我們依然要學會變通。



          1.3.不同場景中示能的變化


          一張桌子放在教室中,我們知道它是用來學習的,桌面上可以放書本、筆等,如果一個桌子放在戶外,并且靠著墻壁,墻壁上有個洞,那么這個桌子當前示能表示為什么呢?一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計很多人會罵他變態。


          下方圖標+文字形式的一個按鈕,放在卡片的左側和右側大家感知一下,表現出來的示能有所區別。



          左側更像是這個模塊的標題,而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例,放在不同位置的3個點小圖標,所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。



          這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外,也要考慮到場景的影響。



          1.4.相同示能的不同表現方式與含義


          這里有一個概念叫做同構異型,說的是結構相同,形式不同。例如我們經常用到的tab與其視圖的呈現,tab的本質就是利用多個標簽來切換標簽下的視圖,所以標簽除了用tab的形式,還可以用下拉展開成為菜單的形式,只不過一個是平鋪,一個是點開后再列表選擇。



          再舉個例子,例如篩選控件,如果我們需要一個實時篩選的功能,那么我們一般會這么做,在b端web設計中,會將一系列篩選條件橫向擺放,每一個篩選條件都可以下拉展開進行篩選,但如果遷移到移動端中,因為橫向距離受阻,就會縱向標簽展開式的篩選模式,從結構上來說,這倆方案其實是一樣的,都是在多個篩選條件中分別篩選出不同的標簽。



          再例如一個父子集共生的內容卡片



          同構異形在設計樣式上會有很多種,例如列表,例如上文說到的單控開關,雖然樣式很多,但原理上單控開關都是一樣的。


          對于初學者來說,不同控件理解的比較片面,所以就會導致一些控件的使用錯誤。


          說到同構異形那就不得不提到同形異構,例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們再來看下面兩個模塊,根據整體來判斷,兩邊的加號都是反映出可以點擊添加的示能,但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽,添加完后會顯示在相關的區域,添加按鈕不變。



          這里可以用一個比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會出現新的椅子,最多不超過8張,如果沒有人坐則只顯示一張椅子。


          但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個大箱子,椅子不見了,原本應該和其他內容保持一致的外觀也不見了,出現了一個新的東西,出現了新的示能。所以如果我們要按照第一種規則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。


          所以,初學者要警惕同型帶來的使用誤區,有時候長的很像的兩個人,可能完全沒有血緣關系。 


          小結

          示能的概念大家已經了解了,對于我們設計師來說,盡量去搞懂更多事物在不同場景中的示能和反示能,需要解決問題的時候可以針對性的運用各種方案。



          2.意符


          咱們上一篇講到了第一個概念:示能,如果忘了或者沒看的同學可以再去看一下。


          我是傳送門


          今天我們要來講意符,意符在外面日常與事物的交互過程中,非常重要。


          以下文字比較干,部分需要大家仔細閱讀動腦,覺得難懂的小伙伴可以聯系我交流


          2.1意符的類型與表現形式


          示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。


          設計師往往會說,我設計了一個很好的方案,它將告訴你產品的用途,但是用戶卻不知所措,雖然知道產品就在那里,但無法下手,因為意符不明確例如我們最常用的人體工學椅,可以調節高低和后仰角度,調節的控制器是兩個把柄。如果沒有意符加入,我們經常會記不清哪一個控制器控制的是后仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。



          所以意符告訴我們對事物正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。


          大家還記得上一篇文章舉的一個門的例子嗎?在日常生活中,雙開門通常在商場、大型會議場館內看見,因為考慮到人流量比較多,于是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。我們可以使用推/拉,但不可以用“按”,因為我們無法通過“按”的交互來操控門的開關。


          如何判斷一個設計是否優秀,那么我們會觀察其本身的示能和意符傳達是否自然,如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再添加推/拉的標識,就顯得有點多余了。再例如切換短視頻和翻頁電子小說,我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。


          OK,它的表意大家已經清楚了,那么在數字產品中,意符有哪些類型和作用呢?它們又可以幫助用戶解決什么問題,我們來看一看。



          意符的類型


          1.文字


          文字意符是最常見的一種類型,利用文字描述來說明如何進行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。


          案例1:開關


          開關控件單獨拎出來不具備完整的含義,必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關,并且需要相應的文字描述來解釋開關控制的內容是什么。



          這里的文字就是意符,用來解釋開關的作用。


          開關本身具備的含義中是有這樣兩條原則:

          1.需要讓用戶感知操作后立即生效 

          2.開關所屬文本必須簡單清晰無歧義


          所以咱們可以看下方的案例。當我們將文本描述為“不打開(關閉)則不再進行消息數字提醒”和“不接受推薦”后,會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。默認描述為打開后的狀態描述。



          再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?我們來看看小紅書和微信的權限開關,這里分別是隱私設置和權限設置。



          這里理解起來會有點繞,大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述,沒有問題,如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這里的用正向沒有問題。


          接下來看下面的關系設置:不把我推薦給可能認識的人,誒這里用了反向描述,大家來分析一下,這里是否合理呢?


          首先小紅書在新下載應用打開時會向用戶進行授權,為了幫助用戶發現更多渠道的好友,所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦,同時也會將我的信息推薦給認識的人,這樣產品的活躍度、用戶的曝光會提升。


          那么大家再來品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動,中國人的關系總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求,更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。


          不知道這樣的說法大家是否可以接受。再來看微信:不讓他看和不看他。微信這個平臺想必我不用多說,既然是熟人社交更多,那么默認肯定是全部開放,而有特殊需求才需要進行隱私設置,所以默認狀態為不讓他看-開關關閉,意思是我沒有打開這項非友好的選項。


          那為什么會出現有的開關默認打開,有的開關默認關閉,還可以使用反向描述呢?我總結了下,如果涉及到一些隱私和權限的內容,一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開,例如視頻播放結束自動播放下一個視頻這樣的設置。


          開關文字意符的描述方式還有幾種不同的方式:


          1.內容標題+開關切換后狀態與內容變化的描述

          第一種類型也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文本要正向、簡單的描述,例如開啟后,接收xxx消息,而不要寫成關閉后,不接受xxx消息。


          2.功能直接描述

          不添加說明文本,直接展示功能標題,例如微信聽筒模式、消息設置、提醒等,直接用開關控制這些功能的打開和關閉,屬于功能設置。還有一種是授權,例如允許他人查看我的收藏,對他人行為的約束,但不能描述為不允許他人查看我的收藏,因為剛才我們總結了,如果對于一些隱私權限的設置默認需要關閉,那么加上正向描述就不能使用“不允許“。


          3.批量整體描述

          對于同一種類型的功能設置,可以利用批量的形式做整體描述。



          再來看一個例子,示能在不夠清晰的情況下,文本意符用來輔助對當前內容/狀態的解釋



          例如b站在瀏覽內容的時候會出現“剛剛看到這里,點擊刷新”,或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。



          文字意符很直觀,但也要避免歧義。



          2.圖形/圖標


          圖標在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向于用圖標,例如公共衛生間、商場的扶梯、通道,通常會用圖標來代替文本,或者強圖標+弱文本的形式。


          既然咱們要說圖標意符,而且要突出圖標意符的作用,那就必須有個前提,那就是拋開其他的變量、因素的影響,圖標意符究竟有什么神奇的魔力。



          例如我們常用到的列表,很熟悉吧,接下來我將用圖標來讓這個列表的示能產生變化


          我們發現,只有文本的列表,示能不明顯,而加上圖標之后就很明確了,甚至加上不同的圖標,示能也隨之變化了呢?刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。


          這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題,大家總是在問UI和交互的區別是什么,其實本質上它倆都是一個界面設計師必備的能力,不能拆開來談。


          我們再來看一個例子,播放/暫停的圖標,用來控制音頻/視頻的播放與暫停,


          在實體播放器上,我們能看到播放和暫停往往集成在一個按鈕上,例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上,因為數字產品的圖標是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多余了。



          還沒完,當我們在觀看視頻的時候,界面中會顯示暫停按鈕,意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態,而不是當前狀態。但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點擊后狀態。


          為什么不一樣呢?因為暫停/播放相當于一個按鈕,用來控制視頻播放,這里存在著一個控制和映射的關系,然而這里的暫停和播放按鈕的示能是相反的。

          暫停圖標的示能表示當前正在播放,而播放圖標的示能表示當前已暫停。所以它和開關也不同,開就是開,關就是關,點贊圖標的原理就如同開關。


          還有例如打開和關閉聲音,看起來聲音播放/靜音有點像視頻的暫停和播放。



          例如騰訊視頻這里的視頻聲音控制,當前靜音為聲音關閉圖標,而不是打開后播放聲音的圖標,我們再看iOS系統的里聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖標,經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。


          那為什么會不一樣呢?其實我也看到過一些聲音圖標和這個案例是反著來的。


          兩個原因:


          1.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量??!如果和視頻播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




          是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖標


          2.暫停和播放的本質并不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎?


          圖標意符可以單獨使用也可以結合文字使用,圖標雖然有優點,但也有缺點,如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖標,但是在不同的界面中,大家可以感知到該圖標的含義嗎?它的示能和意符相結合成為了一個圖標,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。



          圖形可以輔助表意,也可以用來指示區域,例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。



          我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什么位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的,后者的點擊信心會更大,有了區域的劃分就有了明確的操作界限。




          3.顏色


          顏色意符很好理解,通過色彩來表達如何與事物進行交互以及輔助表達。


          無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示,例如在進行信息檢查時,錯誤信息會被用紅色樣式標注出來,既告知用戶出了什么問題,又提示用戶在哪里出現問題。


          而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托,因為暖色更加的醒目。有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。


          綠色表示安全、自然,但也有一些特殊場景下的不同感知,例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王?;疑珓t表示禁止、不可用、待激活等等。


          在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為信息區分,在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。





          4.聲音

          聲音意符就更有意思了,人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。


          你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎?一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效:滴————。你們會發現我怎么能打出有聲音的文字,仿佛你們已經在聽了。


          聲音為什么很重要,因為人類的五感是在共同作用的,我們除了可以通過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態,例如打開手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。


          還有在游戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音并沒有及時反饋,而是延遲1秒,這時候你就會覺得沒有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。



          5.動效

          動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們日常生活中也用到的非常多。



          例如我們看到理發店門口正在旋轉的彩色燈。


          這里也順便給大家講個小歷史,理發店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不愿意做這種下等人做的事情,便委托理發師來做,于是理發師就成立了理發師外科醫師聯合會,三色柱就是活動的標志,紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期,一家理發店是革命黨人根據地,一次危險的活動中領導人在理發師的掩護下逃脫,最后為了表彰,允許他們用紅、白、藍三色的國旗作為標注,最后演化成了旋轉燈,各國效仿。


          好了,題外話說完,我們再回到動效。如果你看到三色燈正在旋轉,說明這家理發店正在營業,如果靜止則說明停業,或者壞了。是不是很簡單?這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花,家里沒人則放一盆綠蘿是一個道理。


          那么在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:


          1.降低用戶認知成本

          我們通過設計界面的轉場、控件的喚出動效,告訴用戶你將從什么地方去往什么地方,和你有關的控件是從哪里來,你可以怎么控制他。當你進行過交互行為后哪些內容變化了,它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前并打開了車門,你選擇了上車然后看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。


          所以一個好的動效能讓你清楚事物的發展過程,以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時,添加菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入交互動作的結束是在右下角,但如果你想查看所有文章需要返回首頁,在頁面的左上角才能找到。




          2.引導/提示/強化

          對于一些新人須知或者內容隱藏的部分,產品通??梢酝ㄟ^一個小動效來引導用戶這里有新內容,例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等


          3.氛圍、強化視覺

          電商、直播界面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。



          4.表示狀態

          當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。





          5.更多意符

          意符不局限于我列出的一些類型,我再舉個例子,在一個不起眼的轉角處,那里空無一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會出現越來越多的垃圾,因為第一袋垃圾就是一個意符,告訴別人這里可以丟垃圾,于是很多人就會把垃圾丟在這個角落里。


          很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,其實我們可以這樣理解,在整個交互過程中有物體和操作者這樣兩個對象,物體本身表達的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。



          小結


          意符和示能不可分割,設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。


          設計師在設計意符的時候也要盡可能的多了解產品使用者(用戶)的背景,意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了,但是使用者并未接觸過、不理解,說明該意符依然不合適。

          文章來源:站酷      作者:應駿

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          日期與時間的一點點設計細節

          ui設計分享達人

          絕對時間與相對時間


          絕對時間

          絕對時間包含:年月日、時刻

          絕對時間適用于對時間精確度要求較高的時候,比如說訂單創建時間、某項活動開始/結束時間、特定節假日簡稱等。絕對時間在信息表達上更加精準、正式,給人確定感和安全感;但是內容顯示過長,占用的空間較大。


          相對時間

          相對時間的展示形式:剛剛、XX分鐘前/后、XX小時前/后、X天前、昨天、明天、今天等

          相對時間適用于對時間精確度要求不高的時候,比如說消息、通知類功能、Feed流。采用相對時間對用戶來說理解成本低,不用去往前推算出發布的具體時間點;但是不夠精確、并很難衡量兩個時間點的臨近性。



          日期與標點符號


          目前主流App上,年月日的常見的用法有“2022-01-01”、“2022.01.01”、“2022/01/01”、“2022年01月01日”、“2022-01-01 ~ 2022-12-30”,那這些日期格式是否都正確呢,日期的連接應該使用什么標點符號?


          《中華人民共和國國家標準GB/T15834-2011標點符號用法》中對于連接號、點號、分隔號的使用場景有明確規定。

          連接號(短橫線“-”、一字線“—”、波浪號“~”):標示某些相關聯成分之間的連接;

          點號(.):作用是點斷,主要表示停頓和語氣;

          分隔號(/):標號的一種,標示詩行、節拍及某些相關文字的分隔。


          表示具體日期

          基于國標對于連接號、點號、分割號的使用場景說明,用阿拉伯數字表示年月日時應采用短橫線“-”。在比較正式的文件、公告中,日期一般不用分隔符連接,而是直接采用中文的年月日連接。


          表示日期范圍

          Antdesign規定日期范圍需要在日期或時間范圍之間顯示波浪號 (前后需要空格),這種方式是不符合標點符號的使用規范的。



          在標示時間的起止時,應該使用一字線“”,而非波浪號“~”,波浪號主要用于標示數值范圍而非日期的起止。日期帶有分隔號橫短線“-”時,可以采用“至”作為連接符;日期不帶有分隔號橫短線“-”時,可以采用一字線“—”作為連接符。注意日期與連接符之間用「空格」隔開。



          時間

          時間計時方法包含十二小時制、二十四小時制。在設計過程中注意區分十二小時制,上/下午和A/PM的位置區別。


          日期與時間組合使用

          當日期和時間連在一起時,兩者之間用「空格」隔開,如“2022-01-01 16:00:00”、“2022年01月01日 16:00:00”。


          涉及到周的時,可以將周放在日期與時刻之間,用「空格」隔開,如:“2022-01-01 周三 16:00:00”、“2022年01月01日  周三 16:00:00”。


          涉及到日期和時間范圍時,可在表示日期范圍的基礎上添加時間,如“2022年01月01日 16:00:00 — 2022年01月01日 16:00:00”、“2022年01月01日 16:00:00 至 2022年01月01日 16:00:00”、“2022-01-01 16:00:00 至  2022-12-30 16:00:00”。



          專有名詞


          以月、日為標志的事件或節日,用漢字數字表示時,只在一、十一和十二月后用間隔號;當直接用阿拉伯數字表示時,月、日之間均用間隔號。



          文章來源:站酷      作者:吳大只

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


          你好,我是《用戶體驗四維度》

          ui設計分享達人

          你好,我是《用戶體驗四維度》,一本關于用戶體驗的新書,今天正式上市了。


          具體內容方面,我選擇了聚焦于“人”——主要探討了人與界面、人與內容、人與人和人與品牌的交互體驗——大部分話題既有宏觀上的綱領,也有微觀上的實現細節。這四類交互體驗,下文的提及會使用簡稱,所以先看下簡稱及對應的全稱。

           

          HI X:Human Interface Experience,人與界面的交互體驗;

          HC X:Human Content Experience,人與內容的交互體驗;

          HH X:Human Human Experience,人與人的交互體驗;

          HB X:Human Brand Experience,人與品牌的交互體驗。



          下面把時間交給作者李瀟,由他來做一些分享。

           

          你好,我是作者李瀟。我主要分享兩點,第一點是這本書的來龍去脈,第二點是這本書的主要特點。

           

           

          01 《用戶體驗四維度》的緣起

           

          2019 年 7 月 15 日,我在個人公眾號上發表了第一篇設計類文章《淺談 Keep 的 UI 設計》,轉到朋友圈后有很多人點贊,也有朋友說寫得不錯,轉到站酷后也有很多設計師留言稱贊。算是一個還行的開頭,這給了我信心。

           

          之所以會寫公眾號,是因為當時我成立了一個個人的設計工作室,希望借公眾號的文章引來一些客流。之所以第一篇文章會寫 Keep,一方面是因為 Keep 比較知名,另一方面是因為我比較喜歡 Keep,也是 Keep 比較忠實的用戶。

           

          當時的計劃就是挑一些個人比較喜歡的、具有一定知名度的產品來寫,每款產品至少寫兩篇文章,一篇寫 UI 設計,一篇寫交互設計,或許還可以就產品功能再寫一篇。因為我分別從事過產品經理和 UI 設計的工作,同時也兼任過交互設計的工作,有這些方面的經驗。

           

          按照計劃,第二篇文章很自然地就是關于 Keep 的交互設計,不過名字是《淺談 Keep 的用戶體驗》。因為所寫內容已經超出了“交互設計”的范疇,而“用戶體驗”恰好是一個更合適的主題。這篇文章的反響依然還行。另外,有趣的是,根據使用感受,我發現 Keep 這個擁有課程和社區的運動品牌,它的用戶體驗可以用四個維度來描述,它們分別是:人與界面、人與內容(課程)、人與人(社區)、人與品牌。沒錯,這就是本書最原始的雛形了。

           

          再加上也有讀者朋友反饋說“用戶體驗的四維度”挺不錯,有啟發。于是第三篇文章就“拐彎”了——沒寫 Keep 的產品功能,也沒寫其他產品,而是把“用戶體驗的四維度”單獨寫成了一篇文章:《淺談用戶體驗的 4 個維度》。

           

          某種程度上,第三篇文章的反響好過前兩篇,因為當時有 3 個業內比較知名的公眾號(分別是 MicroUX、應謀鬼計、UXPA,在此向他們致以謝意)轉載了這篇文章,且有一名立志成為產品經理的大學生根據這篇文章的觀點寫了一篇分析 QQ 和微信用戶體驗的文章:《從微信與 QQ 的交互比較中談用戶體驗》。另外,當時在跟一些朋友聊起我寫公眾號的近況時,有兩位設計師朋友都提了句“可以寫書/出書”。

           

          不知說者是否有意,但是聽者有心,朋友的話更加堅定了我內心逐漸萌發的寫書的想法。第三篇文章之后,我就開始認真考慮寫書這件事了:首先,“用戶體驗的四維度”這個概念比較新,或許可以作為書的框架;其次,個人對用戶體驗非常感興趣,也就是對這個潛在的書的框架非常感興趣;第三,發在網上的文章,包括“用戶體驗的四維度”這個概念,反響都還行;第四,公眾號我是全職在寫,為了質量寫得很慢(平均兩周一篇 4000 多字的文章),時間成本已然很高,還不如再增加點時間成本來寫書。

           

          所以,是不是真的可以把“用戶體驗的四維度”寫成一本書?

           

          試試才知道。于是,在參考很多書的大綱以后,2019 年 8 月下旬,我就為“用戶體驗的四維度”列好了一個初步的大綱。

           

          之后發在網上的所有文章,也就是從第四篇開始,就是按照這個大綱來寫的。也就是說,我是先把書稿寫成了網文,這種網文的更新一直持續到第 2 章 HI X(人與界面的交互體驗)的尾聲,隨后斷更。因為那時已和出版社簽好合同了,按照約定,書里的內容不再發到網上。對于那些曾在網上追過我文章的讀者朋友,在此我要說聲抱歉,請見諒。

           

          順便說下書稿和網文的主要區別。歷經編輯的指導與建議、作者的反復修改、審校流程的打磨,與網文相比:

          一,書稿的邏輯與結構更加嚴謹、合理,內容和語言也比網文精簡;

          二,書稿更加體系化,相互之間(如 HI X 部分的根需求、功能架構和信息架構)盡可能做到了“環環相扣”,章節之間的起承轉合也更加連貫、自然;

          三,書稿在內容層面進行了一定程度的修改和優化,個別章節(第 1 章的四維度,第 2 章的根需求、功能架構等)則是進行了極大程度的修改和優化。

          四,書稿在產品案例和生活案例方面也進行了一定程度的調優。

           

          以上就是這本書的一個簡單緣由,接下來分享下它的主要特點。

           

           

          02 《用戶體驗四維度》的特點

           

          這本書主要有四個特點,它們分別是:追求深度、追求卓越、展望未來、兼顧大小。當然,我也很期待你去發現這本書的其他特點,包括它的缺點。



          1 追求深度
           
          無論是宏觀上的大綱(用戶體驗四維度),還是微觀上的具體內容(根需求、功能架構、UI 設計、HH X 等),本書都著力于深挖本質。
           
          先以根需求為例。在日常工作中,“需求”是一個高頻詞匯:大到上線一個大功能,小到改一下字體顏色,都被我們稱之為“需求”。面對大大小小、林林總總的“需求”,是不是有必要關注下根需求(本質需求)?因為根需求是一切需求的根本。如果根需求有問題,往往意味著用戶的根需求沒有完全得到滿足,那由此衍生出來的一系列大小需求都會有問題;如果根需求有問題,就意味著這個行業的類似產品,依然有機會,直到用戶的根需求完全得到滿足為止。所以本書就以幾乎人人都會用的資訊產品為例,比較深入地探討了兩類用戶(生產型用戶和消費型用戶)的根需求。
           
          再以 UI 設計為例。關于 UI 設計,最近幾年出現了一些“商業化設計”“增長設計”的概念,也就是說,UI 設計的肩膀上多了“增長”“商業化”這些擔子。這不禁使人擔心,未來會不會有新的擔子,繼續加在 UI 設計的肩膀上?另外,術業有專攻,職能亦有分工,這些擔子,UI 設計擔負得起嗎?我認為未必擔負得起。就像于動物的生命而言,心肝肺各有分工、各有貢獻,總不能讓心臟負責呼吸、肝臟負責跳動、肺負責造血。于心肝肺而言,做好分內的事情就是最大的擔當與貢獻;于 UI 設計、交互設計、信息架構、產品功能等而言,情況亦然。那 UI 設計的分內事是什么?是它的本質,這便是本書關于 UI 設計的探討視角。
           
          2 追求卓越
           
          在本書中,有些話題有嘗試深挖本質,有些話題沒有。不管有沒有深挖本質,最終目的都是落腳于“如何做到更好”,也就是追求卓越。
           
          以交互設計為例,在規劃它的大綱時,我嘗試過不同的切入點:大的設計原則(iOS Human Interface Guidelines, 尼爾森十大交互原則等)、小的交互細節(微交互)、設計哲學(3-4 個要點)、設計目的(人人喜愛)。仔細斟酌之后,我發現要想實現“人人喜愛”這個設計目的,“設計哲學”這個方法的可能性是最大的,而且設計哲學本身是足夠“海納百川”足夠“獨立成章”的,所以最終果斷摒棄了其他切入點,而只保留了“設計哲學”這個切入點。具體而言,這個設計哲學就是:周到,品質,驚喜,善意。想象一下,一個為人周到、能力(品質)卓越、時不時會給身邊人帶來驚喜、同時又很善良的人,自然會受到身邊人的喜愛。類似的交互設計,同樣會受到用戶的喜愛。

          3 展望未來
           
          內容“扎根生活”是本書的追求之一。但是當探討到目前面臨困境并存在諸多不足的話題時——比如 UGC 產品(HC X 部分)——本書則會更多地展望一下未來。
           
          UGC 產品面臨什么困境,存在什么不足?
           
          以文章類 UGC 產品為例:各行各業的從業者——比如教師和律師——都有自我充電(如看到本行業高品質的深度文章)的需求,這個需求基本上能在公眾號里得到滿足;但是,不管一篇深度文章的品質有多高,公眾號這個包含各類信息的平臺,都是像黑洞一樣將其“吞噬”和“湮沒”,而不是像書店、圖書館一樣將其“陳列”和“流傳”下去。再以極其熱門的短視頻類 UGC 產品為例:得益于簡單易用等諸多優勢,短視頻類 UGC 產品在“信息和知識的大眾普惠”(尤其是針對老年人)上做出了重要貢獻;但是,短視頻類 UGC 產品也存在一定不足,比如容易使人上癮、沉迷,比如上面的信息和知識一定程度上缺乏質量保障。
           
          未來更好,或更受歡迎和尊重的 UGC 產品,會是什么樣子?
           
          個人觀點,首先是簡單清晰的分類,也即 UGC 產品需要分成知識型 UGC 和信息型 UGC,前者以知識為主,后者會包含前者。實際上這個分類目前是存在的,比如站酷、人人都是產品經理、CSDN 等社區就屬于知識型 UGC,公眾號、B 站、抖音等平臺則屬于信息型 UGC。
           
          篇幅所限,這里僅說下信息型 UGC。以短視頻類的信息型 UGC 產品為例,雖然大熱,但也飽受爭議,甚至飽受詬病。什么樣的信息型 UGC,在廣受歡迎的同時還受人尊重,甚至受人喜愛?據個人觀察,有兩大類。一類是像公眾號這樣足夠多元的“真實世界”,另一類是像 B 站、Instagram 這樣在某些方面比較美好的“理想世界”?!罢鎸嵤澜纭焙汀袄硐胧澜纭?,值得所有信息型 UGC 來學習。

          關于信息型 UGC,怎么建立更多“真實世界”和“理想世界”?關于知識型 UGC,未來更好的產品會是什么樣子?這些問題,本書都嘗試進行了探討,以供參考。

          4 兼顧大小
           
          用戶體驗的四個維度,交互設計的設計哲學,知識型 UGC 和信息型 UGC,都是比較宏觀的大話題。本書不光有這些大話題,還有與之對應的關乎“怎么實現”的小細節。
           
          還以交互設計為例,周到的、高品質的、給人驚喜的、帶有善意的交互設計會受人喜愛,那交互設計如何做到周到、品質、驚喜和善意呢?自然而然地,本書就這四個問題進行了比較深入的探討。以“驚喜”為例,本書先是將交互設計的“驚喜”分為“小驚喜”和“大驚喜”,簡單給出了定義和示例,然后又就“如何做到驚喜”分別給出了針對短期(可以立馬實現,更適合“小驚喜”)和長期(需要長期積累,更適合“大驚喜”)的建議。
           
          于 UI 設計、信息架構、功能架構、HH X 等話題而言,也是同樣的或類似的寫作手法。


          分享完主要特點,接下來請允許我簡單介紹下這本書適合哪些讀者,供你參考。
           
          5 適宜人群
           
          得益于以上幾個主要特點,再加上本書涉及的話題既有屬于基礎的根需求、功能架構、信息架構、交互設計、UI 設計,也有更進一步的 HC X(人與內容的交互體驗)、HH X(人與人的交互體驗)和 HB X(人與品牌的交互體驗),個人觀點:
           
          本書既適合一線從業者(產品經理、交互設計師、UI 設計師等),也適合相關從業者(技術人員、運營人員、市場人員等);
          既適合創業者(“根需求”“功能架構”以及“知識型 UGC”“信息型 UGC”等部分或許會使你發現更多新的機會),也適合學生。
           
          希望你能在書中找到自己需要的、或自己感興趣的內容。
           
          以上就是我的分享,接下來把時間交給《用戶體驗四維度》。
           
           
          結語
           
          好的,謝謝作者李瀟的分享,讓我意識到我的出生似乎是個意外;也謝謝李瀟把我夸得這么好,但我還是要補充一句,他的夸獎僅供參考,一切以自己的切身感受為準。
           
          用戶即人,談用戶體驗,自然離不開對人的關注。人作為高級動物,自然有其強大和理智的一面;人作為動物本身——置身于高速發展的現代社會,置身于“亂花業已迷人眼”的智能化信息社會,置身于既相互溫暖也相互競爭甚至還相互“傷害”的同類中——也有其脆弱和感性的一面。正如李宇春在《軟肋》里唱的那樣: 


          是最堅強的人,是最脆弱的人   
          是最理智的人,是最敏感的人   
          固若金湯的人,語無倫次的人   
          不過,血肉之身   


           
          同樣作為人的互聯網從業者,在打造自家產品時,在兼顧商業化的同時,有沒有可能以更美好的方式去對待這一個個用戶,一個個血肉之身?
           
          我想這是一些產品正在面臨的問題,也是所有產品都難以回避的問題(用戶利益和企業利益難免會發生矛盾)?;ヂ摼W行業在中國的蓬勃發展,不過二三十年的歷史,所以相信這也是一個布滿荊棘、充滿希望的問題?!队脩趔w驗四維度》從根本上探討的,也正是這個問題。希望我的探討,能為你帶來一點參考或啟發。
           
          最后,謝謝你的時間。


          - -  The End - -


          實拍圖:

          undefined

          文章來源:站酷      作者:SonwDesign

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務



          設計師眼中的用戶體驗

          ui設計分享達人

          用戶體驗

          首先,我們先來了解什么是用戶體驗

          從字面上來說,用戶體驗就是用戶在使用產品過程中對產品的直觀感受以及評價

          這種感受非常的主觀,但又很容易影響別人對產品的判斷。這就是為什么某寶商家一直求好評,而某團騎手會為了好評跟用戶“大動干戈”的原因了


          名詞解釋

          • UI——User Interface,本意是“?戶界面”,但現在這個詞已經被擬人化了,即把那些做用戶界面的設計師們叫做UI

          • UE——User Experience,本意是“?戶體驗”,現在也變成了一個職業名詞,是指那些做用戶調研的研究員,比如用戶畫像、產品分析、競品分析等。有些公司把“交互設計師”也叫做UE,嚴格來說UE和交互是兩個職位,不過現在很多UE除了做用戶調研也會畫交互原型,所以混在一起也不奇怪了

          • IxD——InteractionDesigner,本意為“交互設計”,也就是交互設計師,現在也常常用UX(User Experience)來表示交互設計,用來跟UI進行區分。簡單來說就是幫產品畫原型的,實際上這個職位非常的關鍵,產品希望表達的邏輯,各個界面的跳轉與關聯關系,以及產品的可用性與易用性,都體現在交互上

          • UED——User Experience Design,本意為“?戶體驗設計”,現在常常表示用戶體驗設計團隊,基本上大一點的互聯網公司都有自己的UED團隊,甚至大的部門都有自己的UED團隊


          UED工作領域

          UED團隊要做的事情可多了,通常來來說主要坐下面的事情: 

          • 用戶研究

          • 產品分析

          • 交互設計

          • 產品設計

          • 視覺設計

          • 品牌設計

          • 插畫設計

          簡而言之,UED是以用戶需求為目標而進行的設計的團隊,通過團隊的經驗與設計能力給出設計方案,是幫助公司進行產品策劃的主力之一


          用戶體驗五要素

          說到用戶體驗,就不得不提用戶體驗五要素了

          現在我們所談論的用戶體驗的概念,其實最早出自一本叫《用戶體驗要素》的一本書

          《用戶體驗要素》--作者Jesse James Garrett,是美國用戶體驗咨詢公司Adaptive Path的創始人之一


          這本書出的其實比較早,英文版在2001年就出了,國內常見的是2010年出版的中文版第2版,書里的概念在互聯網設計界廣為流傳,非常值得閱讀


          當設計師在設計或重構產品,卻不知從何開始時,這時我們可以參考用戶體驗五要素


          用戶體驗五要素是一種產品分析與設計的方法論,他向教科書一樣指導我們從0到1設計一款產品。同時它涵蓋了一個產品從想法到落地的整個流程,這正是我們學習它的重要原因

          用戶體驗五要素由戰略層、范圍層、結構層、交互層、表現層等5個層級構成,由下而上像個金字塔的結構一樣,戰略層則是底部最堅定的根基,產品的起源也源自該層


          1.戰略層

          這是五要素的最底層,一般是公司負責人與產品總監、市場總監等高層之間的討論范圍層。這一層主要是確定產品目標以及用戶需求。比如:

          • 公司要做什么

          • 面向什么樣的用戶

          • 什么樣的解決方案

          • 公司的產品特色是什么

          • 競爭對手有什么

          • 將來的收益怎么樣

           

          值得一提的是用戶畫像需要在這一層定義出來。我們可以招募一些用戶進行訪談,然后為用戶分組,并結合用戶的需求確定我們的產品目標

          2.范圍層

          戰略決定范圍,這一層主要針對戰略層的需求進行更細致的分析,定義需求是什么,提出解決方案,同時要定要好需求的優先級

          3.結構層

          根據前兩層思考產品的信息架構,規劃任務流程,簡單來說這一層主要是產品PRD的輸出

          4.框架層

          頁面的具體功能擺放,信息布局,這一層主要是交互設計,輸出低保真原型

          5.表現層

          頁面最終給用戶呈現的視覺效果,這一層主要是視覺設計,輸出高保真視覺稿

          模擬案例

          作為設計師的你,接到了一個餅干公司的設計需求,公司希望你能幫他完成從產品到包裝一系列的設計,你該怎么去做呢?

          我們用用戶體驗五要素來整理設計思路:

          -戰略層

          • 先了解這家公司的產品需求和用戶需求

          • 產品需求:公司是個小型食品加工廠,主營是面包和餅干,有實體店也有網店,今年準備在圣誕節推出一款圣誕餅干

          • 用戶需求:用戶畫像是20-35歲的女性,喜歡看劇,喜歡網購,對可愛的東西沒有抵抗力。今年上映的一部電影叫《餅干俠》(虛擬)票房火爆,用戶都想買到劇中同款的餅干

          • 公司目標:希望圣誕前后一個月內盈利50w

          -范圍層

          • 分析需求:公司是做一款圣誕餅干,了解到《餅干俠》的原型是出自美國卡芙食品的一款餅干,并把它確定為競品并展開分析

          • 設計方案:列出一系列設計清單,包括品牌logo重新設計,食品包裝、網店圣誕裝飾、廣告宣傳圖等,給這些設計需求確定好優先級

          -結構層

          • 信息架構:進一步細化已列出的設計方案,輸出文檔或者設計規范,比如《品牌手冊》《食品包裝標準》等

          • 交互流程:進一步的用戶畫像與分析,收集市場同類型品牌調性,通過試用的方式整理出餅干的分類屬性,如口味、分量、包裝材質等

          -框架層

          • 從這里可以開始整體的、低保真的設計了,可以出一些比較具體的設計方案,目的是快速跟需求方進行評審,為后續的視覺設計作準備

          -表現層

          • 經過前面反復的溝通與評審,開始高保真的視覺設計,從產品包裝到廣告圖到物料,這里就是設計師們展示商品顏值,提升其商業價值的時刻到了

          • 最終產品上市



          文章來源:站酷      作者:Pison西歌
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          交互規范制定指南

          ui設計分享達人

          一、如何「理解」交互規范


          說起設計規范,大家應該都不陌生,一個成熟的設計規范對 產品設計、研發開發、用戶使用 都有著重要的指導作用:


          產品設計:保障產品內不同模塊的設計一致性,同時提高不同設計師間的設計、協作效率

          研發開發:通過定義的標準規范,提高流程、組件的復用率,提高整體開發效率

          用戶使用:讓用戶能夠在產品全局感受到統一且完整的體驗,降低使用成本和學習難度



          而一個完整的設計規范一般分成「視覺」「交互」兩個部分合并組成,在全局原則的指導下,側重不同的維度和內容分別展開規范的定義,最后再合到一起形成一份完整的設計規范。



          從用戶體驗要素來看,視覺主要是在「表現層」「框架層」進行規范的統一,主要包括:形、色、字、構、質、動 六個層面。



          而交互角度相對抽象,主要針對于產品的「結構層」「框架層」入手,定義統一的交互規范,指導頁面、流程搭建和組件使用規則。包括:全局原則、頁面布局、通用流程、標準組件、文案規范



          整體維度呈“從抽象到具體的總分關系”,不僅對產品的各個維度都有具體的交互指導,而且不僅能保證長期使用,避免重復返工;同時也便于囊括后續的迭代內容。而這些內容,就是我們通常定義的交互規范,也是交互參與定義設計規范的發力點。


          有了對于基本認識和搭建框架之后,我們來詳細聊聊如何定義交互規范具體內容。



          二、不同階段應該定義

          哪些交互規范?


          產品有不同發展階段,設計規范同樣也有,不同階段下的產品目標和規范需要覆蓋的內容都不盡相同。我們要既要避免做多,保證投入產出比最大化;同時也要構建一個合理的規范迭代思路。


          產品探索初期


          該階段的產品核心目標是「驗證產品或商業模型」,業務需求都是小步快跑、頻繁迭代。產品處于從0到1的野蠻生長狀態,存在著“先滿足功能,再優化體驗”的情況,導致該階段的產品體驗往往不太過關。


          搭建目的:通過定義原則,梳理關鍵頁面和流程,搭建基本的規范框架。既讓團隊對產品有統一的設計價值觀和認知判斷;從頁面到流程,又能對應設計參照標準;同時業務可以在規定的框架下發展,不僅讓產品體驗的根基牢固,而且不會限制功能設計自由。


          搭建范圍:「全局原則」「頁面布局」「通用流程」


          產品穩定發展期


          該階段的產品基本形態已穩定,也形成了初步的模型結構。后續迭代是在現有結構的基礎上,進行增加或優化功能。雖然探索期定義了產品原則、布局和流程,但探索期產品的自由生長,會導致不少設計細節不一致,從而影響了產品整體的體驗和效率。


          搭建目的:通過回溯整理過往設計,沉淀優化成完整的交互規范。再根據規范統一產品體驗,進一步優化流程和效率, 讓整個產品體驗達到相對穩定的狀態。

          搭建范圍:「全局原則」「頁面布局」「通用流程」「標準組件」「文案規范」



          三、如何「定義」交互規范


          3.1 定義交互規范的原則


          與行業通用的設計規范(如TDesign、AntDesign,文末領取騰訊設計系統源文件)“大而全”“通用”的特質不同,一般團隊內構建的設計規范都是源于某一個產品或業務,主要的特點是“專精”。專注于「業務」本身,主要是「團隊內成員使用」,追求的是投入產出比最大化。


          基于此背景,當我們在定義「交互規范」時,有三點原則:


          原則一:保持規范的業務性。設計規范既要貼合業務場景歸納完整,同時又要避免憑空定義脫離實際。故我們定義時要代入業務規劃,盡量富有前瞻性,這樣定義的規范不僅能覆蓋當前需要,同時后續也能更好地迭代。


          原則二:保持規范的專注性。有的放矢,明確內容優先級,避免盲目追求大而全和形式主義。對于優先級高(覆蓋面廣、復用率高)的關鍵內容重點描述;優先級低(邏輯簡單、認知一致)的內容可簡要描述,避免事無巨細降低效率。


          原則三:保持規范的生長性。設計規范不是一成不變,而是跟隨業務發展不斷迭代完善的,所以需要階段性的回顧規范。遇到規范未能覆蓋或無法指導設計的地方,及時修訂同步團隊,避免墨守成規,固步自封。



          最后,還有一點建議:在定義規范時,可以站在前人肩膀,適度參考行業設計規范,能復用用的直接參考,具有業務特性的再集合業務綜合考慮,使整個規范制定效率更高,科學性、指導性更強。


          在找到自己當前所屬的產品階段、明確要建立哪些設計規范后,具體應該如何進行落地執行呢?建議從以下4個步驟入手。



          3.2 第一步:定義規范分類


          如上文中提到,一個完整的交互規范分為:「全局原則」「頁面布局」「通用流程」「標準組件」「文案規范」五個維度,但每個維度具體含有哪些內容,都是不一樣的。仍然需要根據實際業務需要去定義,這樣才能盡量保證沒有遺漏,也更好為下一環節評估工作量。


          通用的做法有兩種:


          方式一:整理業務場景下不同的頁面、流程等,并進行抽象合并?!溉衷瓌t」「頁面框架」和「通用流程」具有強業務導向,可以采用此方式。

          以「頁面布局」為例,就需要將關鍵頁面按統一顆粒度收集(按層級或按場景等)。



          方式二:參考行業通用規范的定義,先羅列完整,再根據產品實際業務需要進行增刪改。

          「標準組件」「文案規范」已經在行業內有了不少科學的目錄和沉淀,可以采用此方式,例如下圖組件的梳理。



          最后可產出如下圖的規范分類和具體內容。(可以列的不是很全,后續補充具體部分內容時持續維護這張表。)



          3.3 第二步:確定分工排期


          有了具體內容作為依據,便可以根據此進行排期分工。


          分工原則:推薦按規范分類進行分工,一個大的分類由一人負責,保證專注性。同時團隊交互最好都能參與,保證后續對規范更好的沿用。

          排期原則:「定義規范」和「輸出需求」兩者經常要并行處理,此時提高效率,控制投入產出比就很重要了,我們需要明確優先級,先做什么后做什么。有3個思路可以綜合參考:


          - 并行的思路:在定義完「全局原則」后,剩下的頁面、流程、組件、文案都可考慮并行定義,彼此之間沒有明確的依賴項。

          - 迭代的思路:近期有迭代的版本,如:即將改版的模塊、反饋較多體驗較差的模塊,其中涉及到的頁面框架、組件可優先定義。

          - 復用的思路:某些典型頁面、典型流程、典型組件涉及面廣,許多需求的設計都將借鑒參考,亦可優先抽象定義。



          3.4 第三步:統一撰寫原則


          設計規范是由不同的設計師一起合作完成,所以我們盡量在一開始,就需要統一規范的撰寫和展現形式。以此提高后續合并的效率,同時又能保證其閱讀體驗,讓其它使用者能夠更好遵循。對此,我們定義了幾個關鍵原則:


          目錄完整:高效檢索,快速讓使用者找到需要的內容。

          原則清晰:抽象的內容往往含有許多概念和原則,需要讓使用者先理解再參考,才能保證后續使用正確、舉一反三

          多圖少字:沒有人喜歡看字,圖片更容易吸收

          搭配案例:讓使用者更好的代入場景,理解和使用規范。



          3.5 第四步:定義具體規范 ★


          前面鋪墊了許多流程性的內容,就像我們日常輸出設計需求一樣,大家或多或少在工作中都有遇到過。接下來,將重點聊聊,我們具體的內容應該如何定義。依然分成5個環節一一講解。


          3.5.1 全局原則

          目標:明確影響整站各個模塊、各個頁面設計的原則和規范,指導我們后續各種規范的定義和設計。


          而全局原則也分兩種,設計原則和業務原則兩種。


          設計原則:每個完整的設計規范都需要包含的內容,如:設計價值觀、設計準則??此葡鄬仗摰臇|西,實則影響后續整個設計方向。這個部分需要和產品經理、視覺同學結合產品的定位和發展共同提煉。具體定義方式可參考:

          《你為什么需要設計原則?》

          https://zhuanlan.zhihu.com/p/246430795


          業務原則:源自實際業務本身產生的問題,行業內沒有標準定義。需要具體問題具體分析,推導出具體目標,最后再統一制定規范解決業務問題。

          舉一個實際的例子便于理解:全局Z軸定義


          1)明確問題:整站層級高度沒有統一定義,導致不同控件間相互遮擋,沒有統一規則。需要定義全局Z軸規范,統一不同場景、頁面、組件的高度。



          2)梳理借鑒:統一梳理相關場景、頁面、組件,明確需要定義的范圍。再查找行業規范,有無參考借鑒。(如Z軸定義,可參考Material Design)



          3)定義規范:最后通過最具代表性的場景進行展示



          全局原則沒有維度高低之分,例如可能全局涉及到的「右鍵菜單」也能被定義成全局原則。不必盲從行業交互規范內龐大且抽象的原則。只要能夠實際解決你業務的需要,能夠覆蓋整站各個部分,都可以納為全局原則。


          3.5.2 頁面框架

          目標:梳理整站所有關鍵頁面,整理抽象成相對固定的 框架布局&功能分區 讓后續設計新頁面時能遵循規律、找到參考。


          頁面框架的搭建一般由四個步驟組成:

          第一步,收集頁面:根據早期定義的規范分類,收集展示所有相同層級的頁面。這些在定義規范分類時,應該已收集完成。

          第二步,框架布局:提取共性,搭建框架和布局,明確頁面大的區域劃分和結構。(TDesign布局詳細指南,文末領取騰訊設計系統源文件)



          第三步,功能分區:基于框架布局,細化區域內具體的業務功能屬性,如:導航區、操作區等。這部分是頁面框架內最接地氣最具指導性的內容,同時也是最難定義的。主要原因如下:


          - 定義太細,擔心缺乏前瞻性限制后續設計:定義越細靈活度就低,后續改動和限制性就越高。為避免這種問題,推薦在定義關鍵頁面時,按輸出設計稿的思路:整理「信息架構」→定義「功能分區」,這樣后續拓展性和前瞻性更高



          - 定義太粗,無法定義出明確的功能分區,擔心缺乏實際指導意義:同一區域有些頁面展示操作,有些展示導航。從規范角度好像不應該,但實際套在各個業務內卻又合理。當遇到這種無法達成一致的情況時,建議就不定義具體的“功能分區”,避免因為盲目追求統一而限制實際設計。


          而可以采用“窮舉舉例”的方式,將該布局下可承載的內容均展示出來,既可以起到參考意義,又能供后續沿用達到統一的效果。



          第四步,加入案例:將剛剛定義的布局框架與功能分區,與實際案例完整結合,便于后續理解和沿用。



          3.5.3 通用流程

          目標:梳理整站所有流程,對那些可復用的流程進行整理、抽象、封裝。讓后續設計師和研發能夠直接沿用。


          “可復用的流程”是指:在多個場景下,不改變其原有業務邏輯的情況下能夠“既插既用”。例如:登錄注冊流程、掃碼關注流程、分享流程等等。往往一個通用流程中,不同的步驟亦可以打散,重新拼裝成不同的流程,以適配具體的場景使用。


          下面就舉一個具體的例子:注冊流程。一般完整的注冊流程如下,通過不同的入口觸發后進入,通過一定步驟后注冊成功。



          當業務有了進一步需求,需要通過插件快捷登錄時,步驟便可以重新組合,再適配具體的場景。



          對于設計師要做的,就是識別具體的通用流程有哪些,并將其給「步驟化」串聯起來。當有新的需求來的時候,判斷能直接復用,還是需要重新組裝,亦或是新增步驟。

          而這樣拼裝的思維,恰好對應了研發搭建流程時的思路。通用流程對于他們就是將不同的步驟進行組合起來。當遇到不同場景時,再以搭積木的方式進行拼裝。


          而具體的搭建步驟也是由兩個步驟組成:1.第一步,收集流程;2.第二步,抽象步驟。具體方式上面已提到,就不過多贅述。


          3.5.4 標準組件

          目標:將產品內使用過的組件整理成“標準組件”,統一定義規則,讓后續設計和研發時能直接調取組件,提高設計和研發效率。


          其實行業中已經有很多通用組件,可以快速調用。但由于不同業務的復雜度不一樣,也會生成自己獨特的業務定制組件。同時,產品持續在迭代,也很難能抽出時間單獨定義組件。故基于這個背景,結合“需求設計流程”和“組件整理流程”,有兩種高效定義標準組件的方式。


          方式一:調用行業通用組件


          第一步,業務設計確定基本邏輯。

          第二步,挑選行業通用組件,增加業務規則。(一般開發在搭建產品初期時,便會選擇一家行業組件進行使用,而組件也僅能在這家提供的組件中挑選)

          第三步,視覺根據全局視覺原則,設計新的樣式。

          第四步,將交互規則、視覺樣式合并,統一成標準組件。基礎規則直接引用行業組件已定義的內容,場景規則按需補充。




          方式二:業務定制組件


          第一步,進行正常的業務設計。交互根據需求搭建原型,視覺設計具體樣式

          第二步,判斷組件是否通用,是否可復用到其它場景。例如:分享對話框,不同的內容分享都能夠用得到,像這種就是可抽象成標準組件的典型案例。

          第三步,定義標準組件規范。簡單的組件展示具體樣式即可,團隊內設計師基本認知一致,無需重新學習。而復雜的組件為保證后續的正確復用,建議包括以下內容:


          - 更新日志:因為組件是變動最多的規范,需要明確具體的版本和改動點

          - 組件定義:簡要介紹用途和使用規則,如對話框定義:必須是用戶主動觸發時才出現、主要使用在二次確認場景需用戶確認后才消失等。

          - 組件結構:介紹組件構成、功能分區、分區定義,詳細展示不同分區內具體信息和對應規則。 



          - 使用場景:詳細區分多種場景下不同的使用方式,明確給予使用指導



          - 設計方案:備選,如果比較復雜的組件且涉及到流程中的關鍵環節,建議可以考慮復制一個完整的設計方案嵌入其中,便于團隊成員理解沿用。


          第四步,跟研發溝通,封裝成標準組件。這一步是非常關鍵也是重要的一步,這將大大提高我們后續的組件復用率,降低重復性走查的耗時。推薦使用CoDesign-設計規范功能,上傳「組件庫」后能夠按目錄自動生成規范文檔,同時將自動標注和切圖,大大提高研發開發標準組件的效率。



          3.5.5 文案規范

          目標:將產品內各個場景內文案進行整理,幫助業務更準確表達意圖,讓設計師更好沿用,同時讓用戶感受到一致的產品風格。


          文案就像“產品對用戶說的話”,不同的人說話方式可能并不一樣,沒有絕對的對錯。但清晰明了的語言表述,讓用戶更容易理解;符合產品氣質的語氣,能拉近產品與用戶的距離;統一的文案描述,又能讓用戶在整站一致的語境下體驗產品。


          需要定義的內容,包括但不限于以下3個部分:


          1.語言:語言是指我們通過什么樣的規則來組合文字,讓它形成一種慣用的表達方式。例如語句簡潔明了,不過度修飾,避免重復描述,使用簡潔清晰的語序,幫助用戶快速理解;例如用詞精準易懂,使用簡單、易于用戶理解的詞匯,避免使用專業術語,或過于口語化的表述


          單純說規則可能太虛了,在實際定義規范時,還要如下圖所示,加上實際案例示意避免誤解。



          2.語氣:語氣是可以體現產品氣質和風格,定義時要結合全局原則內的設計價值觀,明確產品性格后才能更好的定義出符合產品的語氣風格。同一種語境下不同風格的文案就有明顯差異。如網絡異常時:


          ? 俏皮的文案可能是:網絡開小差,請稍等一下

          ? 而正經的文案可能是:網絡異常,稍后重試。



          3.書寫規則:主要包括常用詞匯的書寫方式,例如「日期簡寫方式」「英文大小寫方式」「使用全角標點符號」等。以及易錯的詞匯短語示意,例如「賬號還是帳號」、「登陸還是登錄」等。這是團隊設計師最容易沿用遵循的,也是接地氣的部分。



          4.具體使用指南:以上「語言」「語氣」「書寫規則」3個部分,是構成全局文案的基礎規范。如果有充足時間的團隊,可以考慮再結合實際業務,分別定義不同場景和組件下具體的使用指南。如下圖:



          最后再附上各個行業內定義文案規范例子,供大家參考:

          B端產品文案指南:

          https://www.yuque.com/linyecx/dragon/occ7pr#UEUSw

          AntDesign 文案規范:

          https://ant.design/docs/spec/copywriting-cn

          Clarity Design 文案規范:

          https://design.teambition.com/doc/introduction

          國家標點符號用法:

          http://www.moe.gov.cn/ewebeditor/uploadfile/2015/01/13/20150113091548267.pdf



          四、如何「推進」交互規范


          定義完交互規范,后續將考慮如何將其順利的推進落地。本文羅列幾個推進時重點需要注意的事項。


          4.1 團隊評審,達成一致


          規范的定義不是一個人的事情,而是一個團隊事情,它將關系到每個后續每個人的設計產出。所以在制定規范期間,應該定期在團隊中進行設計評審。這不僅是評審設計好壞的過程,更是讓團隊達成一致、大家更深入了解如何使用規范的過程。


          注意,參與評審的人不止是設計師,當然也包括具體的業務開發,很多時候我們會得到新的思路和啟發。


          4.2 善用工具,沉淀規范


          規范搭建的過程中,有很多痛點:組件庫需要多人參與維護和創建,容易造成沖突內容丟失;同時沉淀規范文檔時,需要圖片逐一復制、粘貼到文檔內,更新時又要重復一遍這樣的操作。而這些問題,使用CoDesign設計規范功能,就可以有效的解決提高效率。


          首先組件庫支持多人同時維護,差量更新;其次組件庫上傳后,可以自動生成/更新規范文檔,避免反復編寫文檔,整體提效;最后當組件庫有新版本時,會自動提醒團隊內其他成員進行更新,保障團隊設計一致性。



          規范的過程其實也是整體設計走查的過程,我們會發現有些設計可能有體驗問題,或不符合規范。每當這個時候,我們就需要對這些設計進行標記。在規范定義完成之后,迭代排期優化線上的設計。


          而在實際設計使用過程中,可能又會發現規范無法滿足的地方,此時又可以展開新一輪的提煉和總結,再反哺規范,形成正向循環促使設計和規范不斷完善。



          五、寫在最后


          在前言的時候就有提到「交互規范」只是整體規范中的一部分,最終是需要與視覺合并成一份統一的設計規范,指導后續具體的設計。具體的合并方式,在定義的章節內已有提到,就不再贅述。


          最后,我一直認為好的設計規范是提高設計效率,引導設計方向,而不是因為設計規范而局限了具體業務的設計,如果這樣,還不如不去定義。

          文章來源:站酷      作者:大魔V

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務

          交互體驗設計的核心概念之:示能與意符

          ui設計分享達人

          很多沒有接觸過交互體驗的設計師小伙伴們,總有會面臨一個坎,那就是看別人做交互和體驗的方案總是特別簡單,一個流程或原型別人做出來之后,我們心里總會想,那不就是這樣嘛?換我也能做,但是只要自己一上手就不行了。


          為什么?因為我們總是看著別人的結果下結論,而忽略了中間的思考過程。

          就好像是吃著別人做的番茄炒蛋,你會覺得不就是番茄和雞蛋一起炒一下,然后放點鹽和糖就好了嘛,我們只看到了結果,而忽略了對食材的選擇、處理、順序、結合。




          1.示能


          當我們看到一個控件,你覺得它不就應該在那里嘛,但輪到自己開始做,就壓根想不到要去用那個控件,甚至是信息布局、流程節點、整體結構都規劃不出來。不知道大家有沒有看上一篇原創文章結尾那個作業,如果做過的小伙伴可以發我交流一下。傳送門--》


          所以很多UI設計師覺得做純執行的工作很沒有意思沒有價值。因為方案是別人做好的,思考過程也是別人的,而商業設計師的核心是解決問題,解決業務和用戶的問題,既然解決問題的角色都是UI的上游,那么UI設計如何體現價值呢?當然就是把交互體驗的核心底層概念搞懂,和交互設計一樣從設計側去思考問題,賦能業務。


          OK,那么來我們先來講:示能



          1.1示能


          心理學家吉普森將示能描述為:“關于有形物品如何傳達出人們與它們互動的重要信息,這個特性被吉普森命名為“示能”。



          用很直白的話來講,意思就是:事物通過自己外在的形態,向使用者展示自己具有的功能和用途。在日常生活中例子比比皆是,例如一扇打開的門,告訴人們可以進出、通過。一張椅子,人可以坐、可以靠。


          假如,你面前有一扇門,門上有一個把手,這扇門告訴我可以利用這個把手與我進行互動,你可以用手、可以用腳,也可以用舌頭,但手是最方便的。如果只是單扇門,那么我們可以利用推或者拉的動作打開,但如果是兩扇門并排,兩個把手在中央靠近,那么這時候門展示出來的意思就是兩扇門都可以推或拉。但如果門把手在門的靠外兩側,那么意思就變了,變成了將門側滑后才可以通過。


          那門為什么要設計成不同樣式來展示不同示能呢?這個留給大家思考,這三種門設計的初衷是什么。



          在我們數字產品中可以有什么體現呢?例如一個開關控件(switch),開關本身具有兩種互斥的屬性和功能:開/關、啟動/禁用,看到開關控件的外在樣式,我們可以判斷當前開關所屬模塊以及意符指示內容的狀態是屬于打開還是關閉。


          開關在現實生活中的表現樣式有很多,例如一側翹起的開關、可以撥動的開關、具有段落的按壓開關、分型控制的開關、旋鈕開關等



          大家別看開關看起來簡單,但是在設計起來會遇到不少的問題,因為狀態和意符形態在我們日常中過中很難成為一個標準,例如最常見的一側翹起的開關,如果不加意符,我們不知道讓哪邊翹起才是開/關。如果你的房間就一盞燈,那么很簡單,我閉著眼睛去按就行了,燈滅著那肯定就是關,再按一下那就是開。但如果在客廳中有多個并聯的開關怎么辦,一個燈可能收到2處甚至3處開關的控制,而每處開關的數量會在3-5個,這個時候不用意符去標識,就很麻煩了。



          回到數字產品上,開關的示能就簡單多了,有顏色的狀態表示開,灰色狀態表示關,但是開關控件在剛用在數字產品上的時候,很多人經常誤以為是滑動交互來控制開關,雖然滑動也可以,但本身依靠更簡單的點擊觸碰就可以了。但如果控件做的很長,那么滑動的示能就會更明顯。



          開關比較讓人產生歧義的地方來自于意符,因為很多新人將一些控件的屬性認為是有重疊關系,可以混用的,那就大錯特錯了,等會講。



          1.2.反示能


          和示能相反,指的是任何物體之間不能進行怎樣的互動。


          例如我們經常做的人體工學椅,你可以靠坐在椅子上,并把手放在扶手上,但你無法在椅子上蹦跳,因為椅子無法支撐劇烈晃動。你也不可能用椅子打游戲,它本身不具備這樣的功能。再比如我們褲子的口袋,設計師通過設計他的形狀、大小、材質,幫助我們去盛放一些小物件,例如鑰匙、手機、卡片,但是筆記本電腦你塞不進去,一頭豬更塞不進去。


          數字產品中也會遇到一些有很明顯反示能的控件,例如segment Controls(分段控件/分段選擇器/分段選擇控件),它是iOS的原生控件之一,該控件的反示能就是無法通過左右滑動界面切換不同標簽的視圖,和tab不同。



          并且在該控件的描述中,seg通常數量只能在5個以內,并且5個標簽分別屬于同類型的數據分割,只支持點擊切換。它不能展開、不能滑動、不能移動、不能懸浮、不能進入二級頁面也不能翻轉。


          那有沒有一種可能,或者一個場景需要這兩種控件同時具備一些屬性呢?是有的,例如這樣



          在標簽下是列表,而列表也支持輕掃的交互進行刪除,如果使用tab則會產生沖突,而使用seg則在視覺上太重了,和產品調性不符。那么我們可以在示能上做一些調整,讓這個控件看上去不能左右滑動,又不至于太繁瑣。


          所以反示能將告訴我們,事物有哪些不具備的功能。同時反示能也是相對的,遇到多樣化的場景和業務需求時,我們依然要學會變通。



          1.3.不同場景中示能的變化


          一張桌子放在教室中,我們知道它是用來學習的,桌面上可以放書本、筆等,如果一個桌子放在戶外,并且靠著墻壁,墻壁上有個洞,那么這個桌子當前示能表示為什么呢?一個肌肉發達的男人在健身房秀肌肉大家紛紛羨慕,但是如果不穿上衣走在馬路上估計很多人會罵他變態。


          下方圖標+文字形式的一個按鈕,放在卡片的左側和右側大家感知一下,表現出來的示能有所區別。



          左側更像是這個模塊的標題,而放在右邊才能讓人覺得可點擊交互。如果覺得不夠明顯我們再用三個點舉例,放在不同位置的3個點小圖標,所表達的示能相差巨大。再例如紅色在彈窗中顯示給人警示,但在活動頁和價格數字上顯示則給人感覺熱鬧的氛圍和強烈的指引。



          這就是不同場景中同樣事物表現出來的示能區別。所以設計師在設計方案的時候除了要將方案本身屬性表達正確以外,也要考慮到場景的影響。



          1.4.相同示能的不同表現方式與含義


          這里有一個概念叫做同構異型,說的是結構相同,形式不同。例如我們經常用到的tab與其視圖的呈現,tab的本質就是利用多個標簽來切換標簽下的視圖,所以標簽除了用tab的形式,還可以用下拉展開成為菜單的形式,只不過一個是平鋪,一個是點開后再列表選擇。



          再舉個例子,例如篩選控件,如果我們需要一個實時篩選的功能,那么我們一般會這么做,在b端web設計中,會將一系列篩選條件橫向擺放,每一個篩選條件都可以下拉展開進行篩選,但如果遷移到移動端中,因為橫向距離受阻,就會縱向標簽展開式的篩選模式,從結構上來說,這倆方案其實是一樣的,都是在多個篩選條件中分別篩選出不同的標簽。



          再例如一個父子集共生的內容卡片



          同構異形在設計樣式上會有很多種,例如列表,例如上文說到的單控開關,雖然樣式很多,但原理上單控開關都是一樣的。


          對于初學者來說,不同控件理解的比較片面,所以就會導致一些控件的使用錯誤。


          說到同構異形那就不得不提到同形異構,例如一塊素牛肉,外觀和紅燒牛肉一樣,但是它是豆制品。我們再來看下面兩個模塊,根據整體來判斷,兩邊的加號都是反映出可以點擊添加的示能,但如果我們繼續考慮交互之后的邏輯和流程就會發現問題所在了。前者添加的是標簽,添加完后會顯示在相關的區域,添加按鈕不變。



          這里可以用一個比較形象的比喻,我有4張椅子,其中3張坐了人,第四張椅子的示能為:只要這張椅子坐了人,邊上就會出現新的椅子,最多不超過8張,如果沒有人坐則只顯示一張椅子。


          但第二個模塊中的添加按鈕結合整體來看是和其他內容毫無相關的添加入口,就好像是第四張椅子上面坐的不是人而是套了一個大箱子,椅子不見了,原本應該和其他內容保持一致的外觀也不見了,出現了一個新的東西,出現了新的示能。所以如果我們要按照第一種規則玩,那么這里就不能套箱子,如果要放箱子,就需要放在其他的地方。


          所以,初學者要警惕同型帶來的使用誤區,有時候長的很像的兩個人,可能完全沒有血緣關系。 


          小結

          示能的概念大家已經了解了,對于我們設計師來說,盡量去搞懂更多事物在不同場景中的示能和反示能,需要解決問題的時候可以針對性的運用各種方案。



          2.意符


          咱們上一篇講到了第一個概念:示能,如果忘了或者沒看的同學可以再去看一下。


          我是傳送門


          今天我們要來講意符,意符在外面日常與事物的交互過程中,非常重要。


          以下文字比較干,部分需要大家仔細閱讀動腦,覺得難懂的小伙伴可以聯系我交流


          2.1意符的類型與表現形式


          示能決定可能進行哪些操作,意符則點明操作的位置以及如何操作。


          設計師往往會說,我設計了一個很好的方案,它將告訴你產品的用途,但是用戶卻不知所措,雖然知道產品就在那里,但無法下手,因為意符不明確。例如我們最常用的人體工學椅,可以調節高低和后仰角度,調節的控制器是兩個把柄。如果沒有意符加入,我們經常會記不清哪一個控制器控制的是后仰角度,哪一個控制的是座椅高度,需要去做更多的嘗試。



          所以意符告訴我們對事物正確操作方式以及任何可感知的標識。說白了就是一個能夠表達事物具體操作的符號。


          大家還記得上一篇文章舉的一個門的例子嗎?在日常生活中,雙開門通常在商場、大型會議場館內看見,因為考慮到人流量比較多,于是在門上就會出現推/拉兩個文字意符,避免兩側的人同時推或者拉,引導人們正確通行。我們可以使用推/拉,但不可以用“按”,因為我們無法通過“按”的交互來操控門的開關。


          如何判斷一個設計是否優秀,那么我們會觀察其本身的示能和意符傳達是否自然,如果意符表現的太過刻意或者畫蛇添足那就是很糟糕的設計,例如在兩扇透明的玻璃門上再添加推/拉的標識,就顯得有點多余了。再例如切換短視頻和翻頁電子小說,我們不會用一個翻頁按鈕而是通過滑動來手勢切換。當我們將內容設計全屏的時候就要考慮到當下示能的含義,所以就不要畫蛇添足。


          OK,它的表意大家已經清楚了,那么在數字產品中,意符有哪些類型和作用呢?它們又可以幫助用戶解決什么問題,我們來看一看。



          意符的類型


          1.文字


          文字意符是最常見的一種類型,利用文字描述來說明如何進行交互操作,但是中文文字博大精深,不同的描述給人的理解和感受完全不同。


          案例1:開關


          開關控件單獨拎出來不具備完整的含義,必須在相應的場景中。例如我們在通知、設置的場景中經常會用到開關,并且需要相應的文字描述來解釋開關控制的內容是什么。



          這里的文字就是意符,用來解釋開關的作用。


          開關本身具備的含義中是有這樣兩條原則:

          1.需要讓用戶感知操作后立即生效 

          2.開關所屬文本必須簡單清晰無歧義


          所以咱們可以看下方的案例。當我們將文本描述為“不打開(關閉)則不再進行消息數字提醒”和“不接受推薦”后,會顯得開關操作含義不明不直觀。正確方式應該是正向且簡單的描述,不要用雙重否定等描述方式。默認描述為打開后的狀態描述。



          再來拓展一下,我們會發現其實依然還有產品中的開關文字意符用了非正向描述,那按照你的說法不就錯了嗎?我們來看看小紅書和微信的權限開關,這里分別是隱私設置和權限設置。



          這里理解起來會有點繞,大家看看能不能理解。首先“只允許我關注的人評論我”這是一個正向描述,沒有問題,如果換成反向描述就會變成“不關注我的人不能評論我”,結合右側的開關,邏輯層面就要多加一個雙重否定的理解,所以這里的用正向沒有問題。


          接下來看下面的關系設置:不把我推薦給可能認識的人,誒這里用了反向描述,大家來分析一下,這里是否合理呢?


          首先小紅書在新下載應用打開時會向用戶進行授權,為了幫助用戶發現更多渠道的好友,所以默認在協議中就會去微博、通訊錄里拉取好友的信息從而在瀏覽內容的時候進行更多好友的曝光和推薦,同時也會將我的信息推薦給認識的人,這樣產品的活躍度、用戶的曝光會提升。


          那么大家再來品一品這兩句話:1.“不把我推薦給....” 2.“把我推薦給....”前者比較含蓄,后者則更主動,中國人的關系總體來說就是比較含蓄的,就好像是你可以給我推薦,但我不會主動要求,更何況像小紅書這樣的社交平臺,“可能認識的人”對我來說價值并不是很大。所以我個人也覺得默認不推薦比較好。


          不知道這樣的說法大家是否可以接受。再來看微信:不讓他看和不看他。微信這個平臺想必我不用多說,既然是熟人社交更多,那么默認肯定是全部開放,而有特殊需求才需要進行隱私設置,所以默認狀態為不讓他看-開關關閉,意思是我沒有打開這項非友好的選項。


          那為什么會出現有的開關默認打開,有的開關默認關閉,還可以使用反向描述呢?我總結了下,如果涉及到一些隱私和權限的內容,一般我們默認為開關關閉。但如果是為了用戶體驗和效率考慮的內容我們可以默認為打開,例如視頻播放結束自動播放下一個視頻這樣的設置。


          開關文字意符的描述方式還有幾種不同的方式:


          1.內容標題+開關切換后狀態與內容變化的描述

          第一種類型也就是上方說的案例,但是要注意的是,在描述狀態變化的時候,文本要正向、簡單的描述,例如開啟后,接收xxx消息,而不要寫成關閉后,不接受xxx消息。


          2.功能直接描述

          不添加說明文本,直接展示功能標題,例如微信聽筒模式、消息設置、提醒等,直接用開關控制這些功能的打開和關閉,屬于功能設置。還有一種是授權,例如允許他人查看我的收藏,對他人行為的約束,但不能描述為不允許他人查看我的收藏,因為剛才我們總結了,如果對于一些隱私權限的設置默認需要關閉,那么加上正向描述就不能使用“不允許“。


          3.批量整體描述

          對于同一種類型的功能設置,可以利用批量的形式做整體描述。



          再來看一個例子,示能在不夠清晰的情況下,文本意符用來輔助對當前內容/狀態的解釋



          例如b站在瀏覽內容的時候會出現“剛剛看到這里,點擊刷新”,或者當我們在瀏覽信息到一個頁面底部時發現無法繼續滑動,會出現一行文案:我是有底線的,說明內容全部展示完畢。



          文字意符很直觀,但也要避免歧義。



          2.圖形/圖標


          圖標在某種程度上當作意符使用的頻率會更高,雖然某些圖標表意不明,但是因為簡約、美觀、生動、普適性強的原因,所以很多地方傾向于用圖標,例如公共衛生間、商場的扶梯、通道,通常會用圖標來代替文本,或者強圖標+弱文本的形式。


          既然咱們要說圖標意符,而且要突出圖標意符的作用,那就必須有個前提,那就是拋開其他的變量、因素的影響,圖標意符究竟有什么神奇的魔力。



          例如我們常用到的列表,很熟悉吧,接下來我將用圖標來讓這個列表的示能產生變化


          我們發現,只有文本的列表,示能不明顯,而加上圖標之后就很明確了,甚至加上不同的圖標,示能也隨之變化了呢?刷新、跳轉、展開、移動、選中、刪除、步進、開關、屏蔽、更多。但你不能用撐開、向上展開、旋轉、翻轉、折疊、回退等等。


          這些其實是很簡單和基礎的概念,但是很多工作多年的UI設計轉交互體驗的小伙伴就經常遇到這些問題,大家總是在問UI和交互的區別是什么,其實本質上它倆都是一個界面設計師必備的能力,不能拆開來談。


          我們再來看一個例子,播放/暫停的圖標,用來控制音頻/視頻的播放與暫停,


          在實體播放器上,我們能看到播放和暫停往往集成在一個按鈕上,例如天貓精靈、電視遙控器等。而在數字產品中播放與暫停并不會同時放在一個按鈕上,因為數字產品的圖標是可以變化的,當前狀態和切換狀態可以有兩個不同的意符表示,那實體播放器做成兩個按鈕就太多余了。



          還沒完,當我們在觀看視頻的時候,界面中會顯示暫停按鈕,意思是點擊后播放中的視頻/音頻會暫停播放。也就是暫停圖標展示的是點擊后的狀態,而不是當前狀態。但其他圖標表示的意思卻又和開關相反,例如橫豎屏切換、收藏、點贊,顯示的就是當前狀態,而非點擊后狀態。


          為什么不一樣呢?因為暫停/播放相當于一個按鈕,用來控制視頻播放,這里存在著一個控制和映射的關系,然而這里的暫停和播放按鈕的示能是相反的。

          暫停圖標的示能表示當前正在播放,而播放圖標的示能表示當前已暫停。所以它和開關也不同,開就是開,關就是關,點贊圖標的原理就如同開關。


          還有例如打開和關閉聲音,看起來聲音播放/靜音有點像視頻的暫停和播放。



          例如騰訊視頻這里的視頻聲音控制,當前靜音為聲音關閉圖標,而不是打開后播放聲音的圖標,我們再看iOS系統的里聲音控的樣式表現,說明當前聲音為開啟則顯示的是開啟聲音的圖標,經過交互控制后才會變成靜音的圖標。所以聲音播放的控制和視頻播放的控制在圖標意符的使用規則上并不統一。


          那為什么會不一樣呢?其實我也看到過一些聲音圖標和這個案例是反著來的。


          兩個原因:


          1.因為視頻的打開和關閉只有兩個狀態,但是聲音不同,聲音在打開的時候還可以調節音量啊!如果和視頻播放一樣,在播放的狀態下顯示的是靜音的圖標,那么音量調節就會變成這樣:




          是不是就很奇怪了,明明是正在播放的狀態,顯示的居然是靜音的圖標


          2.暫停和播放的本質并不是開和關,而是中斷和繼續,在本質上和開關還是不一樣的。而靜音和播放的本質就是對聲音的打開和關閉,如果我在聲音邊上加一個開關是不是就能弄清楚,為什么聲音控制器的圖標意符就是當前狀態而不是交互后的狀態。而視頻的播放和暫停并不是開關。這下大家搞懂了嗎?


          圖標意符可以單獨使用也可以結合文字使用,圖標雖然有優點,但也有缺點,如果單獨使用也需要注意使用的場景,比如舉個例子,同樣是放在導航欄的兩個圖標,但是在不同的界面中,大家可以感知到該圖標的含義嗎?它的示能和意符相結合成為了一個圖標,但不夠明確,在不同場景中如果沒有文字意符的輔助就會不夠明確。



          圖形可以輔助表意,也可以用來指示區域,例如我們經常開車,會知道馬路上會劃分實線、虛線、虛實線、潮汐車道線,示意車輛可以在哪些區域行駛、以及形式的規則。



          我們在醫院拍胸片的時候,胸片機器下方也會指示人應該站在什么位置,用一個方形的框框起來,或者會顯示兩個腳印的圖形。在數字產品中圖形的指示區域也非常重要,例如我們設計一個按鈕,只有文字樣式的按鈕和具有圖形背景的按鈕在用戶的點擊感知上是不同的,后者的點擊信心會更大,有了區域的劃分就有了明確的操作界限。




          3.顏色


          顏色意符很好理解,通過色彩來表達如何與事物進行交互以及輔助表達。


          無論是實體產品或者數字產品中,警示的顏色大部分會用紅色或者橙色來表示,例如在進行信息檢查時,錯誤信息會被用紅色樣式標注出來,既告知用戶出了什么問題,又提示用戶在哪里出現問題。


          而需要熱鬧、活潑的氛圍也會采用紅色等暖色來襯托,因為暖色更加的醒目。有時顏色也是物體示能的一部分,例如緊急逃生出口、公交車上的安全錘、滅火器都是用紅色的外觀,表示在緊急情況下可以使用,但不要輕易使用。


          綠色表示安全、自然,但也有一些特殊場景下的不同感知,例如金融行業不太喜歡綠色,男士不太喜歡帽子使用這個顏色,除非你是比克大魔王?;疑珓t表示禁止、不可用、待激活等等。


          在數字產品中,色彩除了表示一些特殊的含義,也可以用來作為信息區分,在選擇觀影位置的時候,可以利用色彩顯示不同區域位置的觀影體驗和價格的區別。更多的色彩心理學和色彩的使用這里就不展開了。





          4.聲音

          聲音意符就更有意思了,人們通過聽聲音來辨別發生方位、響度、發聲物體以及聲音的音色、質感。各種物體通過聲音來傳信息的方式也非常多樣,而我舉個例子,就能把大家帶回到童年。


          你們還記得以前在學校電腦教室里一個企鵝圖標開始閃爍嗎?一個咳嗽聲表示有人申請加你好友,一個敲擊木頭的聲音表示有人上線了,一個滴滴滴的聲音表示有新消息。還有在短視頻里經常會用到的一種中斷音效:滴————。你們會發現我怎么能打出有聲音的文字,仿佛你們已經在聽了。


          聲音為什么很重要,因為人類的五感是在共同作用的,我們除了可以通過聲音來判斷事物本身,還可以用聲音來感知當前行為的狀態,例如打開手機的鍵盤輸入音,這樣的打字反饋更真實更有質感。


          還有在游戲領域我們經常會提到的打擊感,當人物的武器打擊在怪物身上,但聲音并沒有及時反饋,而是延遲1秒,這時候你就會覺得沒有什么打擊感,除了聲音反饋,打擊感的意符還有很多,例如受擊物體的表現動作、擊打區域、擊打特效、動效、傷害顯示、控制器反饋等等。



          5.動效

          動效也可以成為意符嗎?它能表示什么含義呢?動效也是意符中非常重要的一種類型,他在我們日常生活中也用到的非常多。



          例如我們看到理發店門口正在旋轉的彩色燈。


          這里也順便給大家講個小歷史,理發店彩燈的由來:在中世紀歐洲,人們認為放血療法對人的健康又很大的幫助,但是一般都由宗教儀式中的神職人員操作,到了亞歷山大三世,他把這項工作交給了醫生,但是當時的醫生不愿意做這種下等人做的事情,便委托理發師來做,于是理發師就成立了理發師外科醫師聯合會,三色柱就是活動的標志,紅色代表動脈、藍色代表靜脈、白色代表紗布。還有一種說法是在法國大革命時期,一家理發店是革命黨人根據地,一次危險的活動中領導人在理發師的掩護下逃脫,最后為了表彰,允許他們用紅、白、藍三色的國旗作為標注,最后演化成了旋轉燈,各國效仿。


          好了,題外話說完,我們再回到動效。如果你看到三色燈正在旋轉,說明這家理發店正在營業,如果靜止則說明停業,或者壞了。是不是很簡單?這就好像一個出軌的女人告訴情夫如果家里有人則陽臺上放一盆菊花,家里沒人則放一盆綠蘿是一個道理。


          那么在數字產品中,動效意符還有哪些作用呢?我們一一來盤點一下:


          1.降低用戶認知成本

          我們通過設計界面的轉場、控件的喚出動效,告訴用戶你將從什么地方去往什么地方,和你有關的控件是從哪里來,你可以怎么控制他。當你進行過交互行為后哪些內容變化了,它們是怎么變化的。這就好像你等的45路公交車從遠方朝你慢慢行駛過來,停在你的面前并打開了車門,你選擇了上車然后看到阿姨捧著電飯鍋,拉動氣門,接著爆炸。而不是當你站在原地直接爆炸。被紅姨的支配還宛如昨日。


          所以一個好的動效能讓你清楚事物的發展過程,以便于你更好的去理解。再例如我們在使用餓了么、美團等應用時,添加菜品會有掉入外賣箱的動效,這是一個非常好的動效應用。微信公眾號策劃將文章收起到浮窗也會有一個浮窗去向的引導,告訴你雖然文章在收入交互動作的結束是在右下角,但如果你想查看所有文章需要返回首頁,在頁面的左上角才能找到。




          2.引導/提示/強化

          對于一些新人須知或者內容隱藏的部分,產品通常可以通過一個小動效來引導用戶這里有新內容,例如淘寶二樓、印象筆記功能圖標的切換、活動入口等等


          3.氛圍、強化視覺

          電商、直播界面中,有非常多的元素都是利用動效來刻畫氛圍和效果,刺激人們的感官。



          4.表示狀態

          當你在手機解鎖的狀態下輸錯密碼或者在氪金時輸錯密碼,輸入框都會進行左右晃動來示意,老鐵,這真的不對。





          5.更多意符

          意符不局限于我列出的一些類型,我再舉個例子,在一個不起眼的轉角處,那里空無一物,就是很普通的一塊空地,但如果那里被丟了一袋垃圾,那么這里就會出現越來越多的垃圾,因為第一袋垃圾就是一個意符,告訴別人這里可以丟垃圾,于是很多人就會把垃圾丟在這個角落里。


          很多人會覺得示能和意符好難區分,示能不是也包含意符嗎,其實我們可以這樣理解,在整個交互過程中有物體和操作者這樣兩個對象,物體本身表達的是示能,但它不具備溝通能力,而意符才是鏈接操作者和物體兩者的橋梁,雖然我們平時往往看到的都是示能+意符的狀態,但是我們也要區分本體的示能和用來溝通的意符兩者的區別。



          小結


          意符和示能不可分割,設計師們在學習基礎概念的時候要盡可能的一起去了解并學習。意符的種類繁多,所以我們在學習意符正確的時候方式時,首先要了解意符本身的“示能”,從而將意符更巧妙的結合在事物中發揮其正確的表意作用。


          設計師在設計意符的時候也要盡可能的多了解產品使用者(用戶)的背景,意符的表達也有很大一部分效果來自于用戶的經驗和心智。即便我們認為該意符已經很清晰了,但是使用者并未接觸過、不理解,說明該意符依然不合適。


          文章來源:站酷      作者:應駿

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          彈窗篇 | 如何彈、什么時候彈?你需要知道的彈窗設計原則!

          ui設計分享達人

          彈窗到底該不該加?怎么加?用什么形態展示?真正的作用是什么?這些真的是產品經理說了算嗎?

          好的產品通常會在恰當的時間、合適的位置給出合理的反饋,彈窗也是必不可少的反饋方式,不反饋、反饋不及時或反饋不合理都會帶來不好的使用體驗,甚至誤導用戶,從而導致用戶流失。很多時候,產品經理會從商業角度、公司業務、資源限制等方面考慮問題,但這些未必是用戶所需要的,設計師不應該完全按照產品需求做設計,否則就成了只會照搬產品原型的“美工”。需要做的是從用戶角度出發,把產品需求轉化成設計目標,只有經過反復的推敲、認真分析,最終才能打磨出服務于用戶的彈窗設計,所以彈窗該不該加、如何加就成了設計師不可推卸的責任和使命。

          本篇文章將圍繞著彈窗類型、使用場景、轉化率及常見問題為側重點,將自己對彈窗的理解、設計經驗分享給大家,幫助大家對彈窗組件有更清晰的認識,為后續避坑設計出更好的彈窗做準備。




          本期大綱


          一、彈窗的基本介紹

          二、彈窗體系分類

          三、彈窗的使用場景

          四、如何設計有效的彈窗

          五、需關注的問題點

          六、總結




          一、彈窗的基本介紹


          1 彈窗的定義

          當我們與應用產生主動或被動交互時,頁面上層會彈出容器,將可承載的文本、按鈕、選項、標簽或表單等任一內容與之組合,就可以用來傳遞信息、狀態反饋、引導用戶等操作,這就是彈窗。

          彈窗的目的主要是為回應用戶或讓用戶回應,是用戶與產品間對話的一種方式,在線上各種場景中都有可能碰到,相當于產品的線上小助理。不同類型的彈窗其作用不同,但最終都是為了滿足跟用戶之間的友好交流。


          2 彈窗組件的構成

          彈窗組件的樣式很多,如浮層、對話框、下拉菜單、toast等,且iOS、Android官方平臺也都根據自身的規范對組件進行命名,不管如何稱呼,其常見的彈窗組件絕大多數都是由以下元素組成:

          ◇ 容器:作為承載彈窗的文本、圖片等內容,容器必不可少,有的彈窗直接以蒙層作為容器,如toast;

          ◇ 蒙層:為了和底層內容分離,避免信息混淆,通常會在界面上層(容器下層)設置一個不透明度為20%~60%

          的純黑色蒙層。部分小型彈窗不設蒙層,但會為容器設置投影,例如篩選器的展開、下拉菜單等;

          ◇ 文本:文本是彈窗傳達信息主體的必要條件,如標題、按鈕等,即便把文本融入圖片,也能一目了然;

          ◇ 圖片:用于運營彈窗傳達更多信息內容的方式之一,為了對用戶產生更強的吸引力,還可設計成動態效果;

          ◇ 表單:為成功進入下一步做準備,如輸入密碼(iOS設備下載應用前的必要步驟)。也可以是當前頁面流程的分支,例如輸入優惠券等;

          ◇ 選項:條件較少的選項可使用彈窗完成,單選、復選在選項不超過6個的情況下都可使用;

          ◇ 圖標:在弱化次要操作的情況下,通常會將關閉彈窗按鈕設計成圖標放在右上角或彈窗下方,目的是突出主操作,鼓勵用戶從彈窗中進入下一步,另外還有單選、復選、提示等按鈕;

          ◇ 按鈕:是進入下一步或回到上一步(去掉彈窗)的操作入口,部分應用也可以點擊彈窗以外的空白區域讓彈窗消失,但同樣會提供按鈕以方便用戶更容易操作。toast等短時間自動消失的彈窗無需設置按鈕。




          二、彈窗體系分類


          1 模態彈窗

          用戶在完成任務的過程中,界面會出現彈窗打斷用戶的操作行為,用戶必須通過主動點擊才可以進行下一步操作,這即是模態彈窗。

          模態彈窗通常能較好的獲取用戶的視覺焦點,并通過承載的內容、按鈕主次層級來引導用戶完成他們的需求,這也會根據用戶、產品側重點的不同,彈出樣式也有所不同,常見的模態彈窗有對話框、動作欄、浮層...等。


          1.1 對話框Dialog/Alert

          對話框是很常見的彈窗,主要在打斷用戶后并提供選項操作,對用戶的干擾較大,通常會配備1~3個操作按鈕,而且會把用戶最期待的或產品最期待用戶操作的按鈕突出顯示。

          對話框類型的彈窗主要分為主動、被動兩種觸發類型,主動彈窗:信息的二次確認、輸入內容、前置條件選擇、風險警示等;被動彈窗:版本更新、運營宣傳、消息通知、系統功能授權等。


          1.2 動作欄Actionbar

          動作欄是通過用戶主動操作后彈出的內容信息,基本都是從底部彈出,屏幕占用比例根據內容量的多少比較隨意,從小區域、半屏、再到全屏隨處可見。

          動作欄相比對話框則能承載更多、更豐富的功能信息,在用戶清晰感知當前操作及反饋的情況下,比跳轉到新的頁面更有安全感。


          1.3 浮層Popover/Popup

          浮層是指用戶操作某個功能/內容后,會在附近出現一個帶有視覺引導性質的彈窗,最常見的浮層就是下拉菜單/彈窗等,浮動于頂層窗口并指向觸發操作的位置。

          例如很多社交娛樂類型的應用右上角有一個“+”入口,里面會放置部分常用功能。部分浮層底部沒有設置不透明度的蒙層,為了與頁面信息更好的區分,會給浮層容器加上投影,避免與底部信息混淆。


          2 非模態彈窗

          相比模態彈窗,非模態彈窗屬較為輕量,觸發后以一種非阻礙的的方式呈現,不會打斷用戶的當前操作,主要是給予用戶即時反饋,讓用戶清楚應用當前的交互后狀態。非模態彈窗不強制用戶操作,根據反饋信息的重要程度及意愿,可在一定的時間內自動消失,也可等待用戶操作后消失,常見的有以下幾種:


          2.1 提示框Toast/Hud

          用于反饋用戶操作成功、警告、錯誤等當前狀態信息,可能出現在任何位置(底部/中間/頂部),在呈現樣式上,相同等級的模塊統一位置、風格即可,無需用戶有任何操作,出現2s左右自動消失。

          Toast只有純文字提示,例如格式錯誤、刷新成功、刪除成功等;Hud會使用文字+圖標樣式,例如添加到購物車、關注成功等。


          2.2 提示對話框Snackbar

          Snackbar早期只是Android系統的一種彈窗控件,后在iOS、Web前端都會使用到,可以看作是toast的加強版。一般只出現在屏幕底部,存在的時間比toast長,提供0~1個操作入口,可自動消失,也可與用戶產生交互后消失或者跳轉至其他頁面。

          Snackbar反饋的重要程度強于toast,例如,某個應用今天有重要提醒,同時又不想影響用戶的其他操作,會在用戶首次進入時彈出提醒,并提供關閉操作入口,等待用戶通過手動關閉(部分自動關閉),加強用戶記憶。


          2.3 通知Notice

          最有代表性的就是消息通知、系統推送,在設備未鎖屏的情況下,通常從頂部彈出,停留幾秒后自動消失,鎖屏后,不同設備彈出的位置也有所不同。Notice的前提是需要在應用設置中打開消息通知開關,具備應用外推送功能的,需在設備系統設置中開啟通知權限。


          2.4 透明指示層HUD

          HUD是一種在透明元素上通過填充、反饋用戶當前交互操作的指示層,實時生效,例如視頻類產品中的調整音量、亮度、控制進度條等。




          三、彈窗的使用場景


          當我們對彈窗體系有了一定了解后,就需要清楚什么場景需要設計彈窗?用什么類型的彈窗?產品最終都是服務于用戶,如果僅憑自己的主觀意見亂加一通,整的花里胡哨,彈窗就成了干擾元素,很大程度上會影響用戶體驗。什么樣的場景適合什么類型的彈窗,我們可以從以下幾點來說明。


          1 打斷用戶的操作

          風險警示:當用戶的某種操作可能存在風險,為避免操作失誤,會彈出對話框打斷用戶,并給予一定的風險提示引起用戶的注意,讓其有足夠的時間確認是否真的需要進行下一步操作,如:刪除、放棄福利機會、退出登錄等,會彈出對話框提示操作后可能引起的后果。

          前置條件:部分任務在流程中設有一定的前置條件,需要滿足條件才能進入下一步操作,通常這種情況會根據內容量的多少、重要程度以對話框或動作欄的樣式彈出,例如下單時選擇優惠券、支付方式。

          任務關鍵節點:用戶在滿足任務的基本條件后,需要操作一個關鍵步驟才能成功,則會彈出對話框讓用戶完成最后一步操作,例如提交訂單、表單、輸入支付密碼等。


          2 定制化彈窗

          這類彈窗主要從產品角度出發,不會過于在乎用戶是否需要、會不會反感,都會引導或強制用戶操作。

          例如產品發布新版本,會強制用戶更新,否則將無法使用。還有各大電商APP,在進入首頁時會彈出一堆紅包、優惠券,刻意將取消/關閉入口弱化,給用戶返回造成一定的難度,利用突出的視覺、動態效果突出主題增加吸引力,以達到轉化用戶的目的。


          3 二次確認

          二次確認也是一種打斷用戶的操作行為,但跟上面純粹的打斷用戶相比其作用更大,主要是在用戶已做好選擇的情況下再次彈出確認,以免操作結果造成用戶認知上的偏差。雖然從用戶體驗角度出發,用最少的操作、最簡單的流程滿足用戶所需是產品追求的目標之一,但通過權和利弊之后,二次確認的出現實屬迫不得已的折中方案,它能夠起到給用戶多一次思考避免誤操作、同樣的含義換種方式表達、重要的內容加深二次記憶等作用。

          二次確認使用得當,可以避免用戶、產品的潛在風險,但若是從主觀角度一味的濫用,就成了對用戶的惡意干擾、影響使用體驗,導致出現因多步驟操作增加任務完成難度、降低轉化率、損害產品形象等問題,所以需要從業務(用戶側、產品側)實際角度出發,兩相其害(加-影響使用體驗;不加-造成一定損失)取其輕的考慮是否需要增加二次確認彈窗。

          當用戶的某個操作可能帶來不可逆轉、錯誤嚴重程度較高時,例如:放棄僅有一次機會的較好福利、手機系統還原、應用賬號注銷等,系統都會給予二次確認,降低用戶認知偏差后,以確保用戶是經過多次思考才做出的決定,即便后續給用戶造成損失也不會過于降罪產品,產品也算是“問心無愧”了。


          4 簡單提示

          常見于用戶操作之后的狀態反饋,即便用戶沒有注意到,也不會造成較大的損失、或結果已經注定,相對來說成本較低,大部分出現在任務過程中的提示(可重復)和結果反饋,以確保用戶知曉當前所處狀態。

          非模態彈窗toas樣式居多,例如加載中、操作成功、刷新結果、清除緩存等,可出現在其他類型的彈窗之后或同時存在。




          四、如何設計有效的彈窗


          1 前提條件

          優秀的彈窗需要從視覺、交互兩方面思考,視覺上簡潔、易懂,交互上可操作且可控。

          視覺層面:首先需要做到的是易懂,這時候就非常注重文案清晰程度及按鈕層級關系了,彈出的信息需能直擊要害,用戶看了能一目了然才是關鍵;其次,彈窗屬于一種干擾信息的存在,設計必須簡潔,在彈出時需要考慮是否會過度影響(影響是一定會有的、且看如何降低)用戶的其他操作。假想我們正在玩游戲、突然來了電話全屏幕覆蓋(傳統來電),自己會以最快的速度掛掉電話,回到游戲中后發現自己已領“盒飯”,即便來電是多么的理所當然,但心里必定是非常不痛快的,那么,如果來電以彈窗的形式且占據屏幕很小區域(如今的來電方式)是不是就給了用戶足夠反應時間及緩沖時間呢?

          交互層面:彈出的內容及操作入口需清晰可操作,雖然有時基于業務需求,產品更希望用戶能進行下一步操作而并非回到上一步,即便如此,我們也只能通過弱化次要操作以突出主要操作,用戶有來去自由的權利,如果弱化至用戶看不清、甚至找不到的程度,即便提供了次要操作入口,也會存在反面作用;另外需注意用戶對產品的可控性,不管產品如何期望用戶進入下一步轉化,但不能強制,一定要給用戶提供回去的路(強制版本更新除外),否則,任性的用戶可能會直接結束應用,甚至因產品過于霸道直接卸載。


          2 設計目的

          首先,設計師應該理解產品需求,分別從用戶側(能給用戶帶來什么?滿足什么樣的需求?避免什么損失?...)、產品側(能給產品帶來什么?產品如何期望?是否合理?能得到什么樣的結果?...)分析為什么要加彈窗,然后將分析的結果轉化為設計目標,以確保彈窗根據不同的需求,在恰當的時間、適合的樣式合理的呈現給用戶。

          其次,在得到設計目標后,同樣需要從設計側、技術側思考彈窗組件的一致性。從設計角度,團隊所有成員需要對該組件有清晰且統一的認知,了解組件的使用場景,以確保不會錯用、濫用,如果增加或更換新人設計師,很容易學習和上手,提升效率;站在技術角度,一致性的常用彈窗組件,便于開發做組件封裝后續復用,減少不必要的重復工作,大大提高開發效率。


          3 設計思路

          在UI設計中,組件的設計思路基本相通,旨在滿足產品的實用性、視覺的統一性,主要圍繞著以下幾點進行:

          ◇ 基礎定義:利用清晰易懂且簡短的文案描述彈窗組件的內容及目的。

          ◇ 類型及構成:明確彈窗的類型,如模態/非模態,將其拆分并注明每個小元素的具體信息。

          ◇ 規則用法:彈窗出現的位置、包含的具體內容及信息的展示規則,比如哪些場景可復用。

          ◇ 交互狀態:交互流程邏輯清晰,擬請產品交互前、交互中、交互后如何反饋以及用戶隨時可能碰到的問題。




          五、需關注的問題點


          1 信息的層級關系

          設計彈窗時需要注意信息的主次層級關系,優先傳達用戶想要的或產品想要讓用戶知道的,以確保重要的信息在第一時間傳達給用戶。


          2 展現形式

          彈窗需要根據實際的場景合理使用,不能為了簡潔而過分刪減內容、更不能畫蛇添足。例如一些偏向于操作狀態、系統報告類的提示可以使用簡單的反饋,而可能造成用戶損失的提醒就需要刻意打斷用戶,給予更明確的提示甚至二次確認。

          △ 例如刪除內容就需要使用模態彈窗明確提醒用戶,如果用非模態很可能被用戶忽略從而帶來不可逆的損失。


          3 文案表述

          因彈窗本身承載內容有一定的局限性,固文案一定要簡潔且精確,能用一句話說清楚的就不要過于啰嗦,不僅容器的空間有限且用戶的耐性也有限,需要在有限的空間、有效的時間內清晰的表達出核心內容。


          4 彈出的時機及頻率

          針對運營彈窗,如果彈出的時間不對或過于頻繁,可能會造成用戶反感,所以需要把握好彈出時機及頻率。

          例如用戶有一張未使用的優惠券,如果用戶每次進入應用都看到彈出提醒,確實又沒有購買商品的意愿,總是被彈窗打斷真的就很煩,那么可以將提醒彈窗設置為每日首次進入應用時提示、每累計進入應用5次后提示、即將到期提示或者用戶有購買意愿且優惠券支持改品類時提示等,總之,需要控制在大部分用戶的可接受范圍內。




          六、總結


          本篇文章主要系統的分析了彈窗組件分類及使用場景,總結的雖然不是很全面,但能讓很多新手設計師清楚認知彈出組件的定義及用法。另外,彈窗不管如何設計,都需要有一個不斷優化的過程,要根據產品的實際情況不斷思考與打磨,通過腦暴或已知問題作出更好的改善。

          能清楚認知、理解、使用彈窗組件是一個成熟UI設計師必備的條件,當然,并不能以此定義設計師是否優秀,在此基礎上,還需通過持續的學習探索,挖掘出更多技巧,不斷提高自身的專業能力。

          文章來源:站酷   作者:大漠飛鷹JYSJ

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設

          淺談設計中的溫度——如何用互聯網思維幫扶鄉村孤寡老人和留守兒童

          ui設計分享達人

          前言

           _


          提及“設計的溫度”,不得不提我們老生常談的“情感化設計”,提出這一概念的美國認知心理學家唐納德·諾曼將設計拆解為三個層次:本能層、行為層、反思層,層層遞進。



          1/ 本能層的設計,是視覺的直接反饋,是指用戶第一眼看到的、感覺到的東西是否會激發用戶興趣;

          2/ 行為層的設計,注重的是效用,產品功能是否好用,易用,用戶使用產品過程中能否高效解決問題;

          3/ 反思層的設計,是情感化設計的最高層次,指用戶使用產品后,是否建立情感連接和記憶反饋。

          因而,它們是從美學訴求到效率訴求再到情感訴求的一個進階關系。


          如果一款產品在滿足基本功能,對于用戶有用,同時好看并且易用,使用完之后還能產生愉悅以及滿足感的話,那么這將是一款好的情感化設計產品,那必然是一個有“溫度”的設計。


          如果一個項目本身充滿社會使命和責任感,那么“有溫度的設計”將可以助推項目的落地鏈條,讓使用平臺的用戶有“溫度”,更讓項目背后的人員感受到“溫度”。


          因為,接下來陳述的項目是一個很有“溫度”的項目——用互聯網工具去溫熱社會中的窮苦灰暗,用互聯網思維去幫扶社會的鄉村孤寡老人和留守兒童,用有溫度的設計去踐行有溫度的項目。




          項目背景

           _


          隨著我國社會經濟的快速發展,農村青壯年勞動力轉入城市,人口老齡化趨勢加劇和家庭結構的演變,“空心村”越來越多,因此在鄉村出現大量的“留守兒童”和“孤寡老人”。據統計,在農村獨居和空巢老人超過3000萬人,留守兒童也達到了近2000萬人



          孤寡老人因為獨居生活、物質困難、缺乏照料面臨著易患疾病、精神壓抑等很多問題;而留守兒童因為缺少父母監管和陪伴,極易產生很多身體及心理問題,這兩大群體是我國人群結構的重大組成部分,一個是未來的花朵和希望,一個是曾經發過光熱的遲暮老人,他們需要關愛和守護,需要有一座“有溫度”的橋梁,為留守兒童撐起藍天、健康成長;為孤寡老人送達溫暖、安享晚年。



          基于社會現狀,踐行社會責任,騰訊為村平臺聯合中國社會福利基金會、騰訊公益慈善基金會,預想搭建一個線上與線下結合的平臺,成立“為村暖心小站”,立足于脫貧地區的農村社區,主要服務農村的一老一小以及其他需要幫助的困難群體,解決日間照料、健康護理及心理關懷等諸多問題。




          設計思路

           _


          1,定義產品形態


          “暖心小站”的整個幫扶路徑是以線上+線下相結合的模式,依據產品需求,在線上可以招募志愿者、發布救助需求、觸達愛心人群;在線下建設實體服務站,開展具體的幫扶活動。從而形成一個從線上到線下的一個完整幫扶閉環。



          那在線上的呈現形態上,主要考慮APP和小程序兩種方式,經過對比分析,APP穩定性高、體驗好,但是在鄉村的受眾群體內,互聯網基礎還是很薄弱的,要讓村民朋友下載和適應一個新APP是一個難度非常大的事。而微信在鄉村的覆蓋面非常廣,占有率很高,那么依托于微信的生態、建立小程序,在推廣層面會更加便捷和高效。同時,暖心小站本身結構簡單,是一個非常輕量化的應用,這種特性也更適合以小程序為載體。



          2,確定產品結構


          在線上的產品框架上,設立兩大專區:關愛老人專區和呵護小孩專區,各自創建知識宣導、在線課堂、愛心募捐等版塊內容,同時在線上召集志愿者,在線下成立社區服務站,開展幫扶活動,然后志愿者們在線下實地服務打卡同步展示在線上的暖心小站。


          確定框架之后,梳理角色和場景。本項目主要包含線下服務站的站長,工作人員,志愿者以及社會的愛心人士。



          站長、工作人員、志愿者主要是通過線上為村暖心小站這個平臺發布活動信息、記錄服務概況、展示志愿者風采,社會的愛心人士通過線上平臺查看對應信息并參與對應活動,最終幫助農村的一老一小解決各種幫扶問題。


          經過梳理分析,平臺使用人群的年齡跨度較大,30歲到60歲這個群體占到了80%左右,所以在產品的呈現形式上將兼顧青年到老年的年齡跨度,讓設計更友好,讓產品有溫度。



          3,制定設計策略


          定目標


          基于前面分析,在農村現實環境中的孤寡老人和留守兒童,他們生活是灰暗的,情感是封閉的,他們需要有更多志愿者以及愛心人士給他們帶去陽光和溫暖,讓孤寡老人可以健康生活,讓留守兒童可以健康成長。 




          所以在設計目標的確定上:讓產品形成一個“有溫度、有故事、可以連接情感的橋梁”。讓貧苦生活滲透陽光、感受溫暖、看到希望。



          定色


          品牌色的推導,是站在線下的實際場景感受來提煉,鄉村的孤寡老人和留守兒童的生活是貧苦的、灰暗的,他們需要金燦燦的陽光給生活帶來希望,而我們日常所的見的公益組織通常都是以紅色系為主,似乎已經形成了作為公益組織的標識色,因為這種大紅色傳遞愛心、帶來溫暖。


          這些顏色都很有代表性,黃色代表陽光,紅色代表公益,而暖心小站,將這兩種顏色進行疊加融合,形成陽光橙,再以陽光黃納入輔助色,形成溫暖、友愛、活力、陽光的色彩體系。





          定原則


          在設計原則上,考慮到我們的用戶群體年齡跨度比較大,一些年長用戶互聯網基礎薄弱,為了讓產品更有親和力,讓年長用戶都能輕松上手,所以在策略上制定簡單、易用、溫暖的設計原則,保持框架簡單清晰、交互簡單易用,讓產品有溫度,讓用戶覺得有用、好用、還想用。



          在“簡單”方面,保持產品的頁面框架要簡單,結構要清晰,讓用戶清楚知道自己在哪里,所以在產品形態上只做了內容頁的垂直展示,沒有過多瑣碎的信息入口,讓頁面信息更集中,瀏覽體驗更聚焦,讓年長用戶也可以簡單使用。



          在“易用”方面,簡單的框架和結構是易用的基礎,在視覺元素的排列上,通過加大的圖片、加大的間距、加大的圓角,通透的頁面布局可以讓內容陳列更集中,獲取信息更高效。頁面的間距以4px為基數,分為5個跨度,在統一性的基礎上讓界面更有節奏感,層級更清晰,從而提高產品的易用性。



          在“溫暖”方面,主要體現在在調性、元素、和內容上:

          調性:以“溫暖橙”+“陽光黃”為品牌色系貫穿始終,形成溫暖、陽光的整體基調;

          元素:在常規尺度上進行適當加大,加大的字體,加大的卡片占符,加大的點擊區域,讓產品更照顧年長用戶的操作習慣,讓產品更有溫度;

          內容:在內容及主圖的運營展示上,突出“溫暖”的調性,增強用戶的共鳴,拉近用戶與產品之間的距離。





          整體視覺呈現

           _


          整體以大面積的“溫暖橙”為基調進行鋪設,營造溫暖陽光的質感,頂部展示產品名稱和合作logo,增加產品的權威性和信賴度。


          自上而下,控制大的間距和留白,分別設置了熱門小站、一老一小專區、志愿者風采、活動回顧、學習園地等版塊。全方面展示了小站的基礎信息、輸送了對孤寡老人和留守兒童的健康資訊、匯集了志愿者服務的風采、記錄了幫扶活動的結果反饋、以及陳列了關愛老人和小孩的相關線上課程。



          一老一小的入口及詳情:通過大頭圖的形式加強專題感知,引導用戶點擊。詳情內展示相關的關愛資訊和助力入口,讓用戶可以選擇性的進行點對點幫扶。



          小站詳情:分為小站介紹、人員風采、小站活動、和運營概況四個部分,清晰展示線下暖心小站的各項事務,讓線上用戶對線下小站有更全面的了解。



          個人中心:功能簡單,布局簡潔,根據不同身份類型展示不同入口。作為站長的話,擁有志愿者審核、活動管理的權限,整體表現形式以統一的卡片式陳列,讓內容更聚焦。




          秉持“簡單、易用、溫暖”的設計原則,盡可能地讓產品陳列簡單、操作流程易用、設計滿足功能凸顯溫暖,讓用戶想用,讓產品好用。


          經過多次推導與線下團隊配合,小站1.0在今年5月初上線,第一批試點小站正在使用中,得到了較多正向良好的反饋,為鄉村的一老一小帶去了許多暖心的幫扶行動。



          上線反饋

           _



          產品上線之后,通過在線上發布活動信息召集志愿者。在線上順利舉行了多場暖心活動,比如在重慶馬蜂社區的服務站內為當地留守兒童舉辦了多項課業輔導的活動,在重慶周家寨服務站新建了日間照料室,提升老人的居住生活質量。


          今年5月20號,在中國互聯網公益峰會上,為村暖心小站進行線上交流展示,獲得了很多與會代表的關注和認可。




          截止2021年7月,平臺上線了兩個試點小站,共舉辦了數10次線上+線下結合的活動,活動參與了520人,受到36000人以上的關注。暖心小站的建立和運營,對鄉村的“一老一小”提供了更加有針對性和個性化的服務,同時加強對當地社會組織的培育和孵化,提升了服務對象的生活質量,促進和諧社區建設,助力鄉村振興。


          通過這些試點小站的成果和反饋,讓設計目標也得到一定程度的印證,讓產品體現了“有溫度、有故事、可以連接情感”的橋梁。




          設計反思

           -


          隨著互聯網的發展,人們對于產品不再是簡單的形式服從功能,而是逐步轉向形式服從情感。讓設計回歸情感,讓有溫度的設計去創造有溫度的產品,可以增進人與產品之間的情感連接,讓產品更有生命力。再者,用有“溫度”的設計思維,去捕捉和解決社會問題,通過具有社會責任感的設計,推動社會進步,形成堅實有用的“設計力”。


          那么,如何提升自己的設計力呢?可以概述三個保持一個向善。



          保持熱忱心

          設計需要堅持,而堅持源于熱愛,保持熱忱之心會發現許多美好的事物,同一個需求會自發性地探索很多不同的解決方案,因此會洞察需求背后最本質的東西,切入要點尋找最優解。


          還有一句話:“設計路上,唯有熱愛,方能抵御歲月漫長”。


          保持敏感度

          這里的“敏感”指的是設計師要有好奇心,善于發現新事物,善于追蹤最新行業動態,是一種職業敏感,是一種自覺行為,表現為熱情、興奮、敏銳,對新事物充滿熱情,對于新發現充滿興奮,能夠特別敏銳的捕捉社會痛點解決設計難題。


          保持共情力

          生活中常說,有共情的人往往都特別感性、多愁善感,淚點低笑點也低,因為特別有代入感,而且對事物特別專注。


          設計上所說的共情力則需要保持感性,同時也需要理性加持,不偏不倚。讓設計師自己能切換到項目內的各種角色,不把自己當成局外人,將自己融于產品本身,隨時切換為不同用戶的視角,更能深入地發現、分析和解決問題,讓設計站得住腳、更接地氣,讓設計有依有據。


          讓設計向善

          設計的最終目的是傳遞需求、解決問題,這就意味著設計的初衷不同,那么最終的導向也會截然不同。

          設計向善,保持“善”的初心,主張設計回歸社會、回歸到人心最本質的出發點,做有溫度的設計、有仁心的設計、可持續的設計。


          關注社會問題,保持一顆敏感而善良的心,用“設計向善”解決社會痛點,堅實鞏固自己的設計力。


          文章來源:站酷   作者:峰HENG

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.


          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合