• <noscript id="ggggg"><dd id="ggggg"></dd></noscript>
    <small id="ggggg"></small> <sup id="ggggg"></sup>
    <noscript id="ggggg"><dd id="ggggg"></dd></noscript>
    <tfoot id="ggggg"></tfoot>
  • <nav id="ggggg"><cite id="ggggg"></cite></nav>
    <nav id="ggggg"></nav>
    成人黃色A片免费看三更小说,精品人妻av区波多野结衣,亚洲第一极品精品无码,欧美综合区自拍亚洲综合,久久99青青精品免费观看,中文字幕在线中字日韩 ,亚洲国产精品18久久久久久,黄色在线免费观看

    首頁

    人機交互時代的交互新趨勢——智能駕艙多感官交互

    杰睿

    隨著電動車的發展,駕艙也越來越智能,對設計的要求也越來越高。從一開始的只是展示信息,到現在的情感陪伴、多感官交互,這篇文章,我們來看看都有哪些變化。

    在科技飛速發展的今天,汽車已不再僅僅是一種交通工具,更是人們生活中的重要伙伴。隨著人機交互技術的不斷進步,智能駕艙多感官交互正從滿足傳統的安全駕駛需求逐漸轉變為提供有情感的智能 AI 陪伴需求,為駕駛者帶來全新的出行體驗。

    一、傳統安全駕駛需求下的智能駕艙

    在過去,智能駕艙的主要功能是確保駕駛的安全。通過先進的傳感器、顯示屏和控制系統,為駕駛者提供車輛狀態信息、導航指引和安全警示等。例如,高清數字儀表盤能夠清晰地顯示車速、油耗等關鍵數據,幫助駕駛者隨時掌握車輛運行情況;倒車影像和雷達系統可以在倒車時提供清晰的后方視野,降低碰撞風險。然而,這種以安全為核心的智能駕艙雖然滿足了基本的駕駛需求,但缺乏情感互動和個性化體驗。

    二、向情感智能 AI 陪伴需求的轉變

    1. 情感識別與回應

    如今的智能駕艙多感官交互技術能夠實現對駕駛者情感狀態的識別。車內的攝像頭和傳感器可以捕捉駕駛者的面部表情、語音語調、身體動作等信息,分析其情緒變化。當檢測到駕駛者疲勞時,智能 AI 會發出溫馨的提醒,建議休息或播放輕松的音樂來緩解疲勞;當駕駛者感到焦慮或緊張時,智能 AI 可以通過調節燈光顏色、播放舒緩的音樂或者講述有趣的故事來幫助駕駛者放松心情。

    智能 AI 還能根據駕駛者的情緒做出個性化的回應。例如,如果駕駛者心情愉快,智能 AI 可能會播放歡快的音樂并與駕駛者進行愉快的交流;如果駕駛者情緒低落,智能 AI 則會給予安慰和鼓勵,讓駕駛者感受到被理解和關心。

    2. 個性化交互體驗

    基于對駕駛者的了解,智能駕艙可以提供高度個性化的交互體驗。智能 AI 會記住駕駛者的喜好,如喜歡的音樂類型、溫度設置、座椅調節角度等,并在駕駛者上車時自動調整到相應的狀態。這種個性化的服務讓駕駛者感受到車輛是為自己量身定制的,增強了駕駛者與車輛之間的情感連接。

    智能 AI 還可以根據駕駛者的日常習慣和興趣愛好提供個性化的建議和服務。比如,如果駕駛者經常在周末去郊外游玩,智能 AI 可能會在周末來臨前推薦適合的郊游地點和路線;如果駕駛者喜歡聽某一類型的廣播節目,智能 AI 會在合適的時間自動播放該節目。

    3. 增強社交互動

    智能駕艙不再是一個孤立的空間,而是可以與外界進行社交互動的平臺。通過車聯網技術,駕駛者可以與家人、朋友保持聯系,分享自己的行程和感受。例如,在行駛過程中,駕駛者可以通過語音指令發送消息給朋友,或者與家人進行視頻通話。

    智能 AI 還可以組織車內的社交活動,增強駕駛者與乘客之間的互動。例如,在長途旅行中,智能 AI 可以發起游戲或話題討論,讓大家在旅途中充滿樂趣。

    4. 陪伴成長與學習

    對于長期駕駛者來說,智能駕艙可以成為一個陪伴成長與學習的伙伴。智能 AI 可以記錄駕駛者的駕駛習慣和技能提升過程,提供針對性的駕駛建議和培訓。例如,當駕駛者在某個駕駛操作上存在不足時,智能 AI 會及時指出并提供改進方法。

    智能 AI 還可以提供各種知識和信息,滿足駕駛者的學習需求。比如,在等待紅綠燈的間隙,智能 AI 可以播放一段新聞、歷史故事或者科普知識,讓駕駛者在碎片化的時間里不斷學習和成長。

    三、多感官交互技術的支持

    1. 視覺交互

    高清顯示屏和數字儀表盤不僅可以提供車輛信息,還可以展示溫馨的畫面和個性化的主題,根據駕駛者的情緒和喜好進行變化。例如,當駕駛者心情愉悅時,顯示屏可以呈現出絢麗的色彩和歡快的動畫;當駕駛者需要放松時,顯示屏可以切換到寧靜的自然風景畫面。

    氛圍燈的運用也為情感交互增添了色彩。不同顏色的氛圍燈可以反映不同的情緒狀態,營造出相應的氛圍。比如,藍色的氛圍燈可以帶來寧靜的感覺,紅色的氛圍燈可以增加活力和激情。

    2. 聽覺交互

    高品質的音響系統可以播放各種類型的音樂和聲音,滿足駕駛者不同的情感需求。智能 AI 可以根據駕駛者的情緒選擇合適的音樂播放列表,或者根據場景自動調整音樂的風格和音量。

    語音交互更加自然和親切。智能 AI 的語音不再是機械的合成音,而是具有情感色彩的聲音,能夠更好地與駕駛者進行交流和互動。

    3. 觸覺交互

    座椅的按摩功能和溫度調節可以根據駕駛者的身體狀況和情緒進行調整,提供舒適的駕駛體驗。例如,當駕駛者感到疲勞時,座椅可以自動啟動按摩功能,幫助駕駛者放松身體。

    方向盤和控制面板的觸摸反饋更加靈敏和個性化,讓駕駛者在操作過程中感受到與車輛的互動。

    4. 嗅覺交互

    香氛系統可以釋放不同的氣味,調節車內的氛圍。智能 AI 可以根據駕駛者的情緒和喜好選擇合適的香氛,如清新的花香可以帶來愉悅的感覺,舒緩的草本香可以幫助駕駛者放松心情。

    四、未來展望

    隨著技術的不斷進步,智能駕艙多感官交互將在滿足情感智能 AI 陪伴需求方面發揮更大的作用。未來的智能駕艙將更加智能化、個性化和人性化,成為駕駛者真正的情感伙伴。汽車制造商和科技企業將不斷創新和完善多感官交互技術,為駕駛者帶來更加豐富、溫暖的出行體驗。

    五、結論

    從滿足安全駕駛需求到提供有情感的智能AI陪伴需求,智能駕艙多感官交互的發展為汽車行業帶來了新的機遇和挑戰。通過情感識別、個性化交互、增強社交互動和多感官技術的支持,智能駕艙將成為駕駛者生活中不可或缺的一部分,為人們的出行帶來更多的樂趣和溫暖。

    本文由 @INFP怡伶設計 原創發布于人人都是產品經理。未經許可,禁止轉載。

    題圖來自 Pexels,基于 CC0 協議

    該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    深入剖析交互狀態:設計與體驗的關鍵

    杰睿

    對九類交互狀態的深入理解和不斷創新,將為產品設計帶來更大的提升空間,為用戶帶來更加卓越的體驗,推動產品在競爭激烈的市場中不斷發展和進步。

    一、交互狀態的重要性

    交互狀態在產品設計中起著至關重要的作用,它直接關系到用戶體驗和產品的可用性。良好的交互狀態設計能夠讓用戶在使用產品的過程中感受到便捷、高效和愉悅,從而提高用戶對產品的滿意度和忠誠度。

    從用戶體驗的角度來看,交互狀態可以增強用戶參與感和控制感。例如,在人機交互設計中,互動性和反饋機制能夠讓用戶覺得他們對系統有一定的掌控能力。當用戶進行操作時,系統能夠及時給予反饋,如按鈕按下后出現的狀態變化、鼠標懸停時的提示信息等,讓用戶清楚地知道他們的操作產生了什么效果。這種即時的反饋可以幫助用戶理解系統的運作邏輯,減少用戶的操作失誤,提升用戶的效率和滿意度。

    在產品的可用性方面,交互狀態的設計也至關重要。例如,在電子產品設計過程中,實現人機交互可以為消費者提供良好的使用體驗。設計師需要考慮不同人群的需求,如設計操作簡單的老人機,以滿足老年人的使用需求。同時,將人機交互理念融入產品設計中,能夠提升消費者對產品的喜好程度,使設計出來的產品能夠滿足人們對電子產品設計的要求。

    此外,交互狀態的設計還能夠影響產品的整體品質。例如,在 B 端產品的 UI 設計中,深入了解用戶需求與場景,進行簡潔直觀的界面設計,可以提升產品的可用性。通過用戶研究方法,了解用戶的工作環境、使用習慣和設備網絡條件等,將用戶需求轉化為具體的設計元素和功能,為用戶提供更加貼合實際的使用體驗。

    綜上所述,交互狀態在產品設計中具有重要的地位,它對用戶體驗和產品可用性有著重大的影響。產品開發者和設計師應該充分重視交互狀態的設計,以提高產品的競爭力,在市場中脫穎而出。

    二、九類交互狀態詳解

    1. 加載相關

    加載類型:除了電商 APP 和計算器應用的不同加載方式外,一些社交平臺在加載用戶動態時也會采用類似的漸進式加載。當用戶打開社交平臺,首先會看到最近的幾條動態,隨著用戶不斷下拉刷新,更多的動態內容逐步加載出來。這樣既保證了用戶能夠快速看到部分內容,又不會因為一次性加載過多數據而導致等待時間過長。

    加載狀態:在加載狀態中,不同的產品會有不同的表現形式。例如,一些在線學習平臺在加載課程視頻時,除了會有旋轉的加載動畫外,還會顯示加載進度條,讓用戶清楚地知道視頻加載的進度。如果加載成功,會有一個短暫的提示音,增強用戶的感知。而如果加載失敗,除了提示用戶檢查網絡連接外,還會提供一些常見問題的解決方案,如清理緩存、更換網絡環境等。

    中斷:中斷情況在實際應用中較為復雜。以在線辦公軟件為例,如果在編輯文檔過程中出現網絡中斷,軟件會自動保存當前文檔的進度,以防止數據丟失。同時,會提示用戶網絡中斷,并嘗試重新連接。如果長時間無法連接,用戶可以選擇將文檔保存到本地,待網絡恢復后再進行上傳。

    2. 特殊模式

    深度 / 夜間模式:除了閱讀類應用,一些視頻播放平臺也提供夜間模式。在夜晚觀看視頻時,開啟夜間模式可以降低屏幕亮度,減少對眼睛的刺激。同時,夜間模式下的界面顏色通常會更加柔和,營造出舒適的觀看氛圍。

    存在沉浸模式插件:在一些在線教育平臺中,也會有類似沉浸模式的功能。當學生進入課程學習時,平臺會自動隱藏無關的通知和廣告,讓學生專注于學習內容。同時,學生可以通過特定的快捷鍵退出沉浸模式,方便隨時查看其他信息。

    3. 操作相關

    輸入:除了即時通訊軟件,一些辦公軟件在輸入方面也有很多優化。例如,在文檔編輯軟件中,當用戶輸入一些特定的關鍵詞時,軟件會自動彈出相關的文檔模板或格式設置選項,提高用戶的輸入效率。

    點擊:在電商平臺的商品詳情頁面,點擊商品圖片通常會放大顯示,讓用戶更清楚地看到商品的細節。同時,點擊購買按鈕后,會有一個短暫的確認彈窗,讓用戶再次確認購買信息,避免誤操作。

    重復點擊 / 惡意操作:在一些金融類應用中,對于重復點擊或惡意操作的防范更加嚴格。例如,在股票交易軟件中,如果用戶連續多次提交相同的交易指令,系統會自動鎖定該用戶的交易功能,并提示用戶聯系客服解決問題。

    4. 限制相關

    極值:在旅游預訂平臺上,用戶在選擇酒店價格區間時,系統也會進行極值限制。價格下限通常為平臺上的最低價格,價格上限則會根據當地酒店的市場價格和用戶的搜索歷史進行動態調整,確保用戶能夠得到合理的搜索結果。

    邊界:在一些圖形設計軟件中,除了畫筆工具的邊界限制,其他工具也有類似的限制。例如,當用戶使用裁剪工具時,裁剪區域不能超出畫布的范圍,否則無法進行裁剪操作。

    時間:在在線考試系統中,時間限制尤為重要。考試開始前,考生只能看到考試的相關信息和注意事項,無法進入答題頁面。考試開始后,系統會精確計時,一旦考試時間結束,答題頁面會自動提交,無法再進行答題。

    5. 網絡相關

    網絡中斷:在在線游戲中,網絡中斷會對玩家的游戲體驗產生很大影響。當網絡中斷時,游戲會自動暫停,并提示玩家網絡中斷。如果玩家在網絡中斷前已經保存了游戲進度,那么在網絡恢復后可以繼續游戲;如果沒有保存進度,可能會丟失部分游戲數據。

    信號不佳 / 不穩定:在視頻會議軟件中,當網絡信號不佳時,軟件會自動降低視頻的分辨率和幀率,同時關閉音頻中的一些高級功能,如降噪和回聲消除,以保證會議的基本溝通需求。

    流量形式切換:在一些音樂播放軟件中,用戶可以根據自己的網絡環境手動切換流量形式。例如,在 Wi-Fi 環境下,用戶可以選擇自動播放高清音樂視頻;而在移動數據環境下,用戶可以選擇只播放音頻,以節省流量。

    6. 內容相關

    沒有內容:在在線文檔協作平臺中,如果一個文檔沒有內容,系統會提示用戶 “此文檔為空,請添加內容”,并提供一些常用的文檔模板供用戶選擇,方便用戶快速創建內容。

    敏感 / 違規內容:在電商平臺上,對于商品描述中的敏感或違規內容,系統會進行嚴格的審核。如果發現違規內容,商品會被下架,并通知賣家進行整改。同時,平臺會對賣家進行警告,嚴重的可能會關閉賣家的店鋪。

    7. 站外內容相關

    站外內容:在一些知識分享平臺中,當用戶點擊站外鏈接時,平臺會提示用戶 “該鏈接為站外內容,請注意安全”,并提供一個返回平臺的快捷按鈕,方便用戶隨時返回。同時,平臺會對站外鏈接進行安全檢測,確保鏈接的合法性和安全性。

    8. 設備相關

    橫豎屏:在一些圖片編輯軟件中,橫豎屏切換會影響用戶的操作體驗。當用戶將手機從豎屏切換到橫屏時,軟件會自動調整界面布局,將工具菜單和編輯區域分別放置在屏幕的兩側,方便用戶進行操作。而當用戶將手機從橫屏切換回豎屏時,軟件會恢復到原來的布局。

    分辨率:在一些游戲開發中,開發者會根據不同設備的分辨率進行優化。例如,在高分辨率的設備上,游戲畫面會更加細膩,特效也會更加豐富;而在低分辨率的設備上,游戲會自動降低畫質,以保證游戲的流暢運行。

    清晰度:在一些在線視頻教育平臺中,清晰度的選擇會影響用戶的學習體驗。在網絡條件好的情況下,用戶可以選擇高清或超清的視頻清晰度,以便更清楚地看到教學內容;而在網絡條件差的情況下,用戶可以選擇標清或流暢的清晰度,以保證視頻的播放流暢度。

    不同版本:在一些軟件的不同版本中,功能和界面會有所不同。例如,在一款繪圖軟件的專業版中,會提供更多的高級功能和工具,而在免費版中,功能會相對較少。同時,軟件會在界面上明確標識出不同版本的特點和優勢,方便用戶根據自己的需求進行選擇。

    硬件調用:在一些智能家居控制軟件中,當用戶需要調用攝像頭進行監控時,軟件會彈出請求授權的提示框。在獲得用戶授權后,軟件會提供實時監控畫面,并支持遠程控制攝像頭的角度和焦距。

    硬件聯動:在一些智能辦公場景中,硬件聯動可以提高工作效率。例如,當用戶在會議室中使用智能投影儀時,投影儀可以與會議室的燈光和音響系統聯動,根據投影內容自動調整燈光亮度和音響音量。

    9. 角色相關

    未登錄 / 已登錄:在一些在線教育平臺上,未登錄用戶只能瀏覽部分公開的課程內容,無法進行課程報名和學習進度跟蹤。而已登錄用戶可以享受更多的服務,如個性化課程推薦、學習記錄保存等。

    新用戶 / 老用戶:對于新用戶,一些在線購物平臺會提供新人專享優惠券和折扣,幫助新用戶快速熟悉平臺的購物流程。對于老用戶,平臺會根據他們的購買歷史和瀏覽記錄,為他們推薦個性化的商品和促銷活動。

    游客賬號:在一些在線音樂平臺中,游客賬號可以讓用戶試聽部分歌曲,但無法下載和收藏歌曲。當游客想要享受更多功能時,可以通過注冊賬號成為正式用戶。

    普通 / 會員賬號:以在線閱讀平臺為例,會員用戶可以享受無廣告閱讀、優先閱讀新書等特權。同時,平臺會在會員專屬內容上進行明顯標識,吸引普通用戶升級為會員。

    內網 / 外網賬號:在一些企業內部的項目管理軟件中,內網賬號可以訪問企業內部的項目信息和文件,外網賬號則只能查看一些公開的項目進度和報告。在設計這種賬號體系時,軟件會明確區分內網和外網賬號的權限,確保企業信息的安全。

    管理員賬號:在一些社區論壇中,管理員賬號可以對用戶的發言進行審核和管理,維護社區的秩序。同時,管理員賬號還可以進行系統設置和插件管理,提升論壇的功能和性能。

    三、總結與展望

    通過對九類交互狀態的深入分析,我們可以清楚地看到交互狀態在產品設計中的重要性。無論是加載相關、特殊模式,還是操作相關、限制相關等各個方面,交互狀態都直接影響著用戶對產品的使用體驗和滿意度。

    例如,在加載相關方面,合理的加載類型和狀態顯示能夠減少用戶的等待焦慮,中斷處理機制則能在意外情況下最大程度地保護用戶數據和操作進度。在特殊模式中,深度 / 夜間模式和沉浸模式插件為用戶提供了更加舒適和專注的使用環境。操作相關的輸入、點擊和防范重復點擊 / 惡意操作等設計,確保了用戶操作的準確性和安全性。限制相關的極值、邊界和時間限制,使得產品的使用更加規范和合理。網絡相關的處理能夠在不同網絡狀況下為用戶提供盡可能好的體驗。內容相關的處理確保了用戶在面對不同內容情況時都能得到恰當的引導和提示。站外內容相關的設計保障了用戶在訪問外部鏈接時的安全。設備相關的橫豎屏、分辨率、清晰度、不同版本、硬件調用和聯動等設計,適應了不同設備和用戶需求。角色相關的不同狀態設計,為不同類型的用戶提供了個性化的服務和體驗。

    展望未來,隨著科技的不斷進步,交互狀態的設計也將不斷發展和創新。一方面,人工智能、大數據等技術的應用將使交互狀態更加智能化和個性化。例如,通過分析用戶的使用習慣和偏好,自動調整加載策略、推薦適合的操作模式等。另一方面,虛擬現實、增強現實等新興技術的發展將為交互狀態帶來全新的體驗。例如,在虛擬現實環境中的交互狀態設計將更加注重沉浸感和自然交互。同時,隨著物聯網的發展,硬件之間的聯動將更加緊密和智能,為用戶提供更加便捷和高效的服務。

    本文由 @用戶體驗王叔 原創發布于人人都是產品經理。未經作者許可,禁止轉載

    題圖來自 Unsplash,基于CC0協議

    該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    馮.雷斯托夫效應 | 設計師需要知道的設計原則!

    杰睿

    在設計領域,有些原則雖然我們經常使用,卻可能并不熟悉其背后的理論。馮·雷斯托夫效應(Von Restorff Effect)就是這樣一種現象,它解釋了為何在一系列相似元素中,獨特的那個更容易被記住。

    在我們的日常生活中,心理學的影響無處不在。它像一把神奇的鑰匙,能打開人們內心深處的秘密。作為設計師,我們更應該掌握并運用心理學,將其融入我們的設計中,從而創造出更具有吸引力和影響力的作品。

    設計并不僅僅是形狀、顏色和布局的組合,更是對人類心理的探索和解讀。我們的每一個設計決策,都與用戶的心理狀態和認知過程息息相關。如何抓住用戶的眼球、引發他們的興趣、引導他們的行為,這些都是我們需要深入研究的課題。

    在眾多的心理學原理中,馮·雷斯托夫效應(Von Restorff Effect)是一個值得設計師們關注的設計法則。這個效應揭示了一個有趣的現象:特殊的東西往往比普通的東西更容易被人記住。這就意味著,在設計中,我們要制造一些“特殊”的元素,使它們能夠從眾多的信息中脫穎而出,成為用戶關注的焦點。今天筆者就帶大家了解一下設計中常用的心理學之一馮·雷斯托夫效應。

    一、關于馮.雷斯托夫效應

    1. 產生背景

    在1933年的德國,一個名叫海德維希·馮·雷斯托夫的醫生開啟了一項改變我們對人類記憶理解的實驗。她深入探索了當人們面對一系列物品時,他們的記憶是如何運作的。通過精心設計的對比實驗,她發現了一個令人驚奇的現象:在一組物品中,那個最特別的物品總是更容易被人們記住。

    這一發現為我們揭示了一個核心事實:特別的事物更能吸引我們的注意力,并在我們的記憶中留下深刻的印記。想象一下,在一組物品中,如果有一個被聚光燈照亮,那么相比其他未被照亮的物品,它無疑會成為人們關注的焦點,從而在記憶中留下更深的痕跡。

    這個人類行為和記憶的規律后來被命名為“馮·雷斯托夫效應”。這一效應不僅僅是一個簡單的觀察,它實際上是人類行為學和心理學領域的一項重要研究成果。隨著時間的推移,這一效應逐漸被應用于美學和設計領域,為設計師們提供了全新的視角和工具,以創造出更具吸引力和影響力的作品。

    自馮·雷斯托夫效應被正式確立命名以來,眾多科研學者在此基礎上進行了更深入的研究,他們不僅剖析了這一效應的內在機制和影響因素,還探討了其在不同情境下的應用。隨著研究的深入,對于這一效應的理解也在不斷加深,并衍生出了許多其他的理論和學術觀點。

    2. 融入設計行業

    馮·雷斯托夫效應為我們提供了一個獨特的視角,幫助我們更好地理解人類記憶的運作方式。通過運用這一原理,我們可以在設計中有意識地創造出令人難忘的元素,從而與觀眾建立更深刻的聯系。無論是在廣告、品牌推廣還是產品設計中,突出特別的元素都是一種有效的策略,可以幫助我們更好地吸引觀眾的注意力并留下深刻的印象。

    馮·雷斯托夫效應,又被稱為隔離效應或新奇效應,揭示了人們在記憶中的偏好。當情境或經歷中出現與眾不同的刺激時,這種效應尤為明顯。

    在當今信息爆炸的時代,用戶往往沒有耐心去仔細查找信息,而是快速掃視。因此,設計師需要巧妙地運用萊斯托夫效應,使關鍵內容從繁雜的信息中脫穎而出,吸引用戶的目光。

    統一性是設計的基礎,但只有差異化的元素才能讓信息從頁面中脫穎而出。通過巧妙運用顏色、形狀、布局等元素,我們可以創造出與眾不同的視覺效果,引導用戶的視線。通過巧妙地突出關鍵內容,我們能夠更好地與用戶溝通,引領他們的注意力,為業務創造更大的價值。

    二、馮.雷斯托夫效應對設計的影響

    1. 背景不同 強化視覺

    在界面設計中,我們常常會遇到這樣的情況:在同類型的元素中,某一元素與其他元素存在顯著差異,這種現象我們稱之為“背景不同”。為了使某個模塊或元素在用戶心中留下深刻印象,我們可以利用環境差異來提高其識別度和記憶度。這種手法在UI設計中被廣泛應用,它利用了馮·雷斯托夫效應,能有效吸引用戶點擊。

    例如淘寶底部標簽欄中的四個ICON,唯獨首頁的第一個ICON(品牌logo)風格與眾不同。即使離開了該頁面,這個特殊的ICON依然讓人印象深刻,餓了么第二的圖標也是如此。因此,我們在設計界面時,若想吸引用戶的注意或提高點擊量,可以打破常規,讓特定元素在同背景下脫穎而出。

    再比如下圖的個人中心界面,功能入口模塊均采用ICON展示,而游樂場模塊卻采用了特殊的布局和設計。因此,當用戶進入個人中心時,最先映入眼簾的便是游樂場模塊。這也解釋了為什么我們在進行廣告和活動投放時,需要特別設計的原因。

    2. 經驗不同 強化記憶

    當遇到與過去經驗顯著不同的情況時,我們的大腦會產生一種特殊的效應,這種效應被稱為“經驗不同”的效應。例如,在騎自行車的過程中,我們通常習慣于左手控制左把手,右手控制右把手。但是,如果我們嘗試用雙手交叉的方式來騎車,結果很可能會摔倒。從此以后,每當我們聽到或描述有關騎車摔倒的事情時,我們都會立刻想起那次“經驗不同”的嘗試。

    同樣地,淘寶和京東在618、雙十一等大型促銷活動時,會選擇重新設計他們的首頁。與往常的設計相比,這些新的首頁設計通常會增加更多的促銷入口,甚至改變ICON的風格。從馮·雷斯托夫效應的角度來看,這種與以往不同的設計能夠更好地吸引用戶的注意力,加深用戶的記憶,并擴大活動對用戶的影響力。

    三、在設計中的應用

    1. 功能隔離提高效率

    在視覺層面難以實現強烈差異化時,我們可以通過功能來實現有效的隔離。以微信為例,其置頂功能允許用戶將好友或群聊消息置于頂部,從而與其他信息區分開來。這種設計確保了關鍵信息的優先級,使用戶能夠更快速地找到和關注所需內容。通過巧妙地運用功能,我們可以輕松地解決視覺上的一致性與差異化之間的矛盾,為用戶提供更加流暢和個性化的體驗。

    2. 動效加強引導

    靜態頁面容易讓人視覺疲勞,動效能夠更加生動有趣地展示內容,引導用戶更加關注頁面。相較于被動接受信息,動效能夠更加有效地吸引用戶注意。

    3. 背景聯動吸引目光

    隨著Banner自動輪播的普及,用戶對其的吸引力逐漸降低。面對不斷變化的廣告,用戶不再耐心地逐個瀏覽。當無法獲取所需信息時,他們的視線會迅速轉向其他區域。

    為了應對這一挑戰,騰訊視頻首頁的Banner采用了背景聯動的形式。這意味著頭部背景色會根據Banner圖片的色調進行變化,從而擴大了內容的變化空間。這種設計不僅使廣告更加引人注目,還使用戶更容易被吸引并保持關注。

    4. icon強化加強視覺感知

    頻道頁的入口方式多種多樣,金剛區icon無疑是最優選擇。若要突出展示某些業務功能,單一的icon配合動效可有效吸引用戶關注。此策略簡單高效,有助于用戶快速找到所需內容。

    5. 內容強化凸顯價值感

    在設計界面時,我們追求的是在有限的空間內展示更多的有效信息,避免信息的無效重復。但在電商平臺中,尤其是涉及到利益點時,我們需要確保信息具有足夠的價值感和吸引力。

    以智行APP開通會員為例,領神卡作為核心賣點被突出展示,采用了平鋪展開的方式,從而突顯其價值。相對其他權益則相應地進行了弱化處理,以保持整體信息的清晰度和重點。這樣的設計既充分利用了屏幕空間,又確保了用戶能夠快速了解到核心的利益點。

    6. 分層隔離提高信息層級

    頁面信息層次分明,信息層級越高,用戶感知越強烈,越能吸引注意。例如,模態彈窗處于最上層,與內容層完全隔離,用戶無法忽視。其次是非模態懸浮層,與內容層隔離,但不影響用戶操作。還有側邊懸浮按鈕、頂部或底部懸浮橫條等。

    四、常見問題及解決方式

    1. 本末倒置的危險

    受“危險按鈕”的影響,過去設計師常常給予負向情緒操作很高的視覺層級,例如退出登錄。這樣的設計意圖是警示用戶操作危險,但視覺上卻過于強調,甚至有些“喧賓奪主”。近年來,移動端設計中這種矛盾逐漸減少,但仍然存在。與其強調操作的難度和危險性,不如考慮如何讓用戶自然地忽視這些操作,減少不必要的干擾。從馮·雷斯托夫效應來看,這種設計方式有本末倒置之嫌,應盡量避免。

    2. 什么都突出等于什么都不突出

    新手設計師常常會遇到想要突出所有元素,但最終無法突出任何一項的問題。頁面中的特異點應該屬于少數,如果所有元素都想做得不一樣,都會讓頁面整體視覺效果崩潰。因此,在設計中要學會取舍,選擇最重要的元素進行突出,才能達到最佳的視覺效果。

    五、結語

    總的來說,將馮·雷斯托夫效應運用到設計中,能幫助我們創造出更具吸引力、更容易被記住的設計。但請記住,任何設計決策都應以用戶為中心,了解他們的需求和心理是關鍵。只有這樣,我們才能真正創造出打動人心的設計。

    專欄作家

    大漠飛鷹;人人都是產品經理專欄作家。致力于產品需求的驅動、產品體驗的挖掘,利用設計的手段為受眾用戶帶來更好的體驗,即好看、好用。

    本文原創發布于人人都是產品經理,未經許可,禁止轉載。

    題圖來自 Unsplash,基于 CC0 協議。

    該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    掌握這些基本要素,讓你的界面設計脫穎而出

    杰睿

    對于設計同學來說,很多基礎知識可能看起來很簡單,容易被忽視。但隨著設計經驗越來越多,更建議大家牢固系統地掌握這些基礎知識。在本篇文章中作者給大家系統性地講解了界面設計進階過程中需要搞懂的基本設計要素。一起來看吧。

    當下大多數界面設計類軟件都是以矢量圖的方式工作。通過調整參數來定義圖形的大小,并且在不降低質量的情況下對圖形進行拉伸和放大。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    在進行界面設計時,我們需要生成出各種尺寸的矩形、圓形等對象,規定這些對象的尺寸和樣式,并對這些對象進行移動,將它們放到合適的位置上。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    很多基礎知識可能看起來很簡單,容易被忽視。但隨著設計經驗越來越多,更建議大家牢固系統地掌握這些基礎知識,厚積薄發才能越走越遠!

    一、盒子模型

    盒子模型是在設計和開發中定義數字接口最基本的方法。我們所做的大多數設計都是根據盒子模型進行,因此了解盒子模型對界面設計來說非常重要。

    盒子模型由四個主要元素組成:

    內容 (content)、內邊距(padding)、邊框(border)、外邊距(margin)。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    內邊距(padding)是內容和邊框線之間的空間,如下圖灰色區域。內邊距的范圍越廣,內容的安全區域就越大。

    外邊距(margin)是盒子與其他元素之間的空白區域,如下圖藍色區域。外邊距保證了盒子與盒子之間有足夠的間距。

    二、尺寸

    寬度(width)和高度(height)是定義對象大小的參數。在二維空間上,寬度代表橫軸上的比例,高度代表縱軸上的比例。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    一定比例的寬和高構成的矩形是容納對象的最小矩形框。如果對象本身是不規則的形狀,在設計時我們需要根據對象的尺寸制定一個規則的矩形框,方便交付開發。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    三、角度

    角度定義了對象順時針旋轉的方向,默認為0°。另外旋轉也可以是負數,比如-15°旋轉與345°旋轉的角度是相同的。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    如果我們想要一個統一的界面,最好不要手動旋轉對象,而是通過輸入度數來旋轉,這樣會比手動旋轉更精確。

    旋轉對圓形來說是特殊的存在,因為一個圓形無論旋轉到哪個角度看都是一樣的。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    四、圓角半徑

    邊框半徑數值越大,這個形狀的圓角度數就越大。例如一個矩形,既能一次性設置四個點的圓角半徑,也可以單獨設置某個點的圓角半徑。

    正常來說,設置圓角的圖形看起來比直角圖形更友好。界面設計中,相同的圖形最好能保持一樣的的圓角度數,這樣界面看起來會更統一。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    另外一個圖形是否需要圓角,要根據產品風格靈活選擇,確保與當前使用場景相匹配。例如某個產品的logo或主視覺使用了不同半徑的圓角,在界面中我們也可以使用不同半徑的圓角按鈕,保持風格統一。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    一旦我們決定了用某種樣式的圓角按鈕,那么界面中的其他按鈕也應該保持一致。

    五、填充

    填充是指對對象內容的操作,填充的可以是一種顏色,也可以是一張圖片。

    針對不同對象,我們需要差異化定義每個對象的填充效果,保證這些對象簡單易懂,清晰可見。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    在設計過程中,可以對同一個對象組合使用多種填充效果。例如一個正方形頭像,首先填充一張照片,在照片的基礎上再添加各種顏色效果,能讓頭像的設計與界面更匹配。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    六、描邊

    如果說填充強調對象內部,那么描邊就是對對象外部邊框的操作。

    描邊分為內部邊框、居中邊框和外部邊框三種樣式,其中只有內部邊框不會在視覺上使對象變大。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    例如下圖是一個60px大小的正方形,有2px的描邊。從左起分別是內邊框、居中邊框、外邊框的描邊效果。因為內邊框是在正方形內部描邊,所以視覺上看這個正方形仍是60px大小。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    居中邊框是指正方形的外部和內部各占1px,那么采用居中邊框的正方形尺寸變成了62×62。

    同理,外部邊框是指正方形的外部多了2px,采用外部邊框的正方形尺寸變成了64×64。

    對于不同的對象,我們可以設定不同寬度的描邊,描邊的樣式可以是虛線、實線、純色、漸變色等多種樣式。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    目前大多數設計軟件支持修改描邊的端點和節點。端點樣式包括方頭、平頭和圓頭,節點樣式包括斜接連接、圓角連接、斜角連接。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    七、陰影

    陰影是UI設計中最常用的效果,根據對象的X軸、Y軸的偏移程度、模糊程度、擴展程度、顏色和不透明度等屬性構成。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    通過設置模糊能讓陰影的面積擴散擴得更大,顏色由深變淺。一般來說陰影的不透明度低于40%時,呈現的效果比較好。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    當陰影的擴展程度為負數時,陰影看起來會更自然。對比上下兩個圖例也能看出來,擴展程度為負時陰影看起來更柔和。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    使用陰影有助于劃分界面的層次結構!在設計中,讓陰影看起來自然柔和不生硬是界面美觀與否的關鍵因素之一。

    首先要避免純黑色陰影,純黑對比太強會影響視覺效果,建議使用基礎色調派生的顏色作為陰影顏色。

    例如基礎色是綠色,可以使用飽和度、亮度較低的深綠色作為陰影顏色。陰影顏色確定后,再給陰影足夠大的模糊數值,最終會得到了一個不錯的陰影效果。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    顏色太深、太生硬的陰影和按鈕顏色對比太大,設計時應盡可能調整陰影的顏色、透明度等參數,避免生成這種效果;把黑色陰影調整成同色系的深色陰影,陰影的效果看起來就會更自然、更柔和;再把陰影的擴展程度調成負數,就能消除陰影的外展,讓陰影看起來更真實。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    內陰影

    內陰影在UI設計中相對少見,內陰影和上面所講的陰影有相同的參數設置,只不過內陰影是在圖形內部起效果。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    內陰影無法像外陰影那樣展現圖層之間的深度和層級關系,只對圖形內部起作用。如果內陰影使用太多,可能會混淆圖層間的層級關系,讓界面關系看起來不明確。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    八、模糊

    1. 高斯模糊

    高斯模糊是最常用的設計效果,呈現出從中心向四周均勻擴散的模糊效果。高斯模糊由半徑控制,半徑數值越大,模糊效果越明顯。

    高斯模糊常用在界面之間的過渡或者用來模糊背景突出景深效果。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    高斯模糊還可以作為陰影效果,放在對象下面使用。例如新建一個橢圓做成模糊效果,放在對象下面,就能快速呈現出一個帶有陰影的效果。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    2. 背景模糊

    蘋果在操作系統中經常使用背景模糊,呈現出背景很模糊的玻璃效果。

    背景模糊主要針對圖層覆蓋的內容起作用,比如新建一個矩形調整透明度,做成背景模糊效果,那么該圖層覆蓋的區域會變模糊,圖層沒有覆蓋的區域保持不變。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    3. 動感模糊

    動感模糊由模糊數值和角度兩個參數控制,用來模擬對象在不同角度上的移動效果。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    4. 縮放模糊

    當對象由內到外變得模糊時,就會發生縮放模糊。這種模糊效果在界面設計中用得較少。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    縮放模糊由模糊數值和原點兩個參數控制。在縮放模糊中可以隨機設置模糊原點,通過移動原點獲得一些有趣的圖形效果。

    界面設計進階密籍:掌握這些基本要素,讓你的設計脫穎而出

    最后

    以上是界面設計進階過程中需要搞懂的基本設計要素,希望通過本次系統性的講解,能更進一步提升設計精細度

    專欄作家

    作者:Clippp,每周精選設計文章,專注分享關于產品、交互、UI視覺上的設計思考。

    本文原創發布于人人都是產品經理,未經作者許可,禁止轉載。

    題圖來自 Unsplash,基于CC0協議。

    該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    完美界面設計秘訣:界面設計的八大黃金法則

    杰睿

    如果你想設計出卓越,高效和流暢的用戶界面,就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果,谷歌和微軟設計的產品都反映了Shneiderman的法則,這些行業巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征,而這些公司的熱門界面設計則是法則的視覺體現。本文將告訴你如何整合8大黃金法則來改進你的工作。

    界面設計的八大黃金法則

    Ben Shneiderman(生于1947年8月21日)是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面:有效的人機交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介紹了界面設計的八個黃金法則:

    一致性

    當你在設計類似的功能和操作時,可以利用熟悉的圖標,顏色,菜單的層次結構,行為召喚,用戶流程圖來實現一致性。規范信息表現的方式可以減少用戶認知負擔,用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產品的數字化環境從而更輕松地實現其目標。

    常用用戶使用快捷操作

    隨著使用次數的增加,用戶需要有更快的完成任務的方法。例如,Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式,隨著用戶更有經驗,他們可以更快速,輕松地瀏覽和操作用戶界面。

    提供有用信息的反饋

    用戶每完成一個操作,需要系統給出反饋,然后用戶才能感知并進入下一步操作。反饋有很多類型,例如聲音提示,觸摸感,語言提示,以及各種類型的組合。對于用戶的每一個動作,應該在合理的時間內提供適當的,人性化的反饋。如設計多頁問卷時應該告訴用戶進行到哪個步驟,要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。

    作者/版權持有人:Google,Inc.    版權條款和許可:合理使用

    Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則:提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼,對用戶來說這毫無意義。作為一名好的設計師,你應該始終給用戶以可讀和有意義的反饋。

    設計流程需要設計一個完結

    不要讓你的用戶猜來猜去,告訴他們其操作會引導他們到哪個步驟。例如,用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。

    提供簡潔的錯誤操作的解決方案

    用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會,但如果用戶操作時發生不可避免的錯誤,不能只報錯而不提供解決方案,請確保為用戶提供簡單,直觀的分步說明,以引導他們輕松快速地解決問題。例如,用戶在填寫在線表單時忘記填寫某個輸入框時,可以標記這個輸入框以提醒用戶。

    允許撤銷操作

    設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作,無論是單次動作,數據輸入還是整個動作序列后都應允許進行返回操作,正如Shneiderman在他的書中所說:

    “這個功能減輕了焦慮,因為用戶知道即便操作失誤,之前的操作也可以被撤銷,鼓勵用戶去大膽放手探索。”

    給用戶掌控感

    設計時應考慮如何讓用戶主動去使用,而不是被動接受,要讓用戶感覺他們對數字空間中一系列操作了如指掌,在設計時按照他們預期的方式來獲得他們的信任。

    減少短時記憶負擔 

    人的記憶力是有限的,我們的短時記憶每次最多只能記住五個東西。因此,界面設計應當盡可能簡潔,保持適當的信息層次結構,讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易,因為再認通過感知線索讓相關信息重現。例如,我們經常發現選擇題比簡答題更容易,因為選擇題只需要我們對正確答案再認,而不是從我們的記憶中提取。被彭博商業周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發明了幾種可用性研究方法,包括啟發式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發式原則之一。

    了解蘋果的設計如何整合Shneiderman的8大黃金法則

    蘋果整合Shneiderman的八項黃金法設計出成功的產品,他們從Mac到移動設備設計都取得了巨大的成功,他們以產品設計的一致性,直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。

    1. 一致性

    “一致性”和“感知的穩定性”在Mac OS的設計中體現得淋漓盡致。不管是80年代的版本,還是現在的版本,Mac OS菜單欄設計都包含一致的圖形元素。

    作者/版權持有人:StockSnap.io    版權條款和許可:CC0

    作者/版權持有人:StockSnap.io    版權條款和許可證:CC0

    隨著時間的推移,Mac OS的外觀有很大變化,Mac OS菜單欄設計都保持一致。

    2. 快捷操作

    如前所述,Mac允許用戶使用各種鍵盤快捷鍵,使用頻率高的包括復制和粘貼(Command-X和Command-V)以及截圖(Command-Shift-3)。

    作者/版權持有人:StockSnap.io    版權條款和許可證:CC0

    Mac允許用戶鍵盤快捷方式操作實現通常需要鼠標、觸控板或其他輸入設備才能完成的操作。

    3. 有用信息反饋

    當用戶點擊Mac桌面上的文件時,該文件會“突出顯示”,這是視覺反饋的一個很好的示例。另外,當用戶拖動桌面上的文件夾時,他們可以看到在按住鼠標時,文件夾顯示被移動的狀態。

    作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用

    作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用

    4.  操作流程的設計

    當用戶將軟件安裝到Mac OS時,提示信息的屏幕顯示用戶當前的安裝步驟。

    作者/版權持有人:Google,Inc.    版權條款和許可:合理使用

    5.  錯誤操作的解決方案

    在軟件安裝過程中,如果發生錯誤,用戶將收到友好的提示信息。提供復雜的解決方案,或用戶難以理解的解決方案,或只報錯不提供解決方案,都是極大影響用戶體驗,使用戶沮喪的關鍵原因。根據錯誤操作的嚴重程度,區分何時使用小的,不會影響用戶操作的提醒,以及何時使用大的,侵入式提醒。但當錯誤操作發生時,請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。

    作者/版權持有人:Google,Inc.    版權條款和許可:合理使用

    Mac OS通過顯示一個溫和的提示消息向用戶解釋出現了什么錯誤操作及其原因。另外,解釋這是由于自己的安全偏好選擇,進一步向用戶保證,告訴他們一切在掌控范圍內。

    作者/版權持有人:Manutencaonet Blogspot     版權條款和許可:CC BY 3.0

    Windows系統中這個非常不友好的提示信息使用“fatal(后果嚴重的)”和“terminated(被終止)”字樣。這樣的負面的,不友好的言語肯定會嚇倒大多數用戶!

    6. 允許撤銷操作

    當用戶在安裝過程中提供信息時發生錯誤,允許他們重新回到上一步,而不必重新開始。

    作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用

    7. 給用戶掌控感

    讓用戶有權選擇是繼續運行程序還是退出程序,Mac的活動監視器允許用戶在程序意外崩潰時“強制退出”。

    作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用

    8. 減少短時記憶負荷

    由于人類短時記憶每次只能記住5個東西,所以蘋果iPhone屏幕底部的主菜單區域中只能放置4個及以下的應用程序圖標,這個設計不僅涉及對記憶負荷的考慮,還考慮了不同版本一致性問題。

    作者/版權持有人:Brian Voo    版權條款和許可:合理使用

    工作表:如何將Shneiderman的8項黃金法則應用于你的界面設計

    作為設計師,你的工作是創建直觀,精美和流暢的用戶界面設計,讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規則應用于你的設計中。

    譯者:oftodesign

    原文作者:Euphemia Wong(The Interaction Design Foundation用戶體驗研究員,設計師)

    本文由 @oftodesign 翻譯發布于人人都是產品經理。未經許可,禁止轉載。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    界面設計方法:界面設計的原則與標準

    杰睿

    編輯導語:前幾篇文章中,我們已經了解到了許多關于界面設計的相關知識。今天這篇文章讓我們回歸一下界面設計本身,談一談其設計原則與標準,希望對你有幫助。

    前面介紹了5種基本的界面形式,如果從構成界面的要素(構件)層面看,實際上所有的界面都是一樣的,因為它們都是由同樣的控件構成的,只是控件的位置不同而已。

    因此就有必要對界面的布置進行統一的標準化,建立了界面布置的標準后設計效率會提升、同時也為界面設計資料的復用奠定了基礎。

    界面設計的標準化非常重要,因為界面是用戶認知系統的窗口,這個標準實際上是構建“人-機-人”工作環境的標準之一,標準化的界面形式也可以減少用戶的認知負擔和培訓成本。

    這里給出一些界面設計上的基本原則和標準供作參考,按照從整體到局部的順序,重點提出以下的幾個界面設計時的原則與標準(不限于此):

    • 界面布局對原則
    • 子窗體設置的原則
    • 字段控件的標準
    • 美工設計的原則

    這些原則/標準根據界面的使用場景不同、設計師的設計理念的不同等都會有所不同,需要根據具體情況具體分析設計,這些原則和標準僅供參考。

    一、界面布局的原則

    1. 整體布局

    界面的布局是用戶理解業務功能的重要手段,布局一定要以“業務導向”,布局的規范化、規律化可以培養用戶逐漸地走向“無師自通”的方向,如:

    1. 同類界面的布局要統一,卡式、主細表、樹形等同樣格式要風格一致;
    2. 重要信息放在界面的核心位置,如:左上方位置,次要信息放在其它位置。關于界面重要信息的擺放位置請參看前面的博文;
    3. 界面上近似內容要放在相近處,如:加框以示區別、或拉大與其它內容區域的距離;
    4. 重視用戶界面友好性,易于操作、易于查看,比如:常用按鈕在鼠標移動最短的地方配置。工具欄的左端配置界面操作開始的功能按鈕、右端配置界面操作結束功能按鈕等;
    5. 界面橫向一次的顯示信息量(標題個數)多少,要以完成一次操作不用或是少用橫向滾動條為標準(縱向滾動條不限),因為頻繁使用橫向滾動條會使得用戶看到了左端的信息看就不到右端、造成看了右端又忘了左端信息的現象。

    界面設計方法 (2) — 4.界面設計的原則與標準

    圖1 布局原則

    如圖1所示,細表區的標題設置過多(A~J),致使大約有40%的信息在處在窗口外,用戶不使用橫向滾動條就看不到。

    如果這是一個頻繁操作的動作,那么工作效率就會低下,這就是所謂的應用體驗設計的不好,這種設計會極大地造成用戶滿意度的下降。解決的方法可以考慮采用分頁表達的形式。

    注:對具有自適應功能的界面也存在同樣的原則,由于列數過多界面自適應后的字體太小看不清楚,為了看清楚必須要放大字體,結果還是要頻繁地使用橫向滾動條,所以適當減少列數是最有效的解決方法。

    2. 局部尺寸

    要約定好界面上基本的控件距離、尺寸,參見圖2,比如:

    • 窗口與控件之間的距離;
    • 控件之間的間距,包括縱向的行間距、橫向的字段框間距等;
    • 控件的高度;
    • 使用文字的字號大小等。

    界面設計方法 (2) — 4.界面設計的原則與標準

    圖2 界面設計標準的制定

    二、子窗體設置原則

    以組件的主界面為第一層界面,子窗體的層數最好控制在3層以內,也就是連續打開三個界面為限,參見圖3:

    • 從菜單第一次打開的為主界面(父)
    • 從主界面打開的第二層為子界面(子)
    • 從子界面打開的第三層為子界面的子界面(孫)等

    界面設計方法 (2) — 4.界面設計的原則與標準

    圖3 子窗體的層數示意圖

    如果內容實在是比較多,最終彈出的子窗體要超過3層時,可以考慮另外再設置一個組件來分擔處理的內容,不然子界面彈出過多,就會造成界面的混亂,會降低用戶的操作效率。

    三、字段控件的標準

    字段控件的表達格式根據內容不同而不同,字段控件由兩個部分構成:標題欄和輸入框,參見圖4:

    界面設計方法 (2) — 4.界面設計的原則與標準

    圖4 字段控件的長度與數據位置

    1. 標題欄的長度

    標題的字數不要太多,因為標題長到如同一句話時就不容易記憶了,最佳字數在2~6個字之間(易于記憶與稱呼的長度);另外標題中的文字位置可以參考:有背景框時居中,沒有時居左或居右,圖4中的標題欄有背景色,所以采用了文字居中的形式。

    注:這里的”標題欄名稱“指的是”字段名稱“,不是4個業務功能中的”表單名稱“,后者可以按照實際的名稱寫,多少字都可以,不必要設置字數。

    2. 輸入框的長度

    輸入框的字段長度是不一定的,建議輸入框的長度與字數相匹配不必統一,如圖4(a)的式樣,因為如果要統一長度就一定會以字數最多的字段為準,那么字數少的字段也用長輸入框就不容易讀取,而且輸入框的長度一樣時字段之間的辨識度就會降低,尋找某個字段的時間會增加。

    比如:圖4(b)樣式的“工程月數”字段只有2個單位的長度,如果采用和具有30個單位長度的“項目名稱”一樣長的輸入框時,則“工程月數”就會因為標題與數據的距離太遠而不容易讀取(看不準)。

    相比較而言,圖4(a)樣式中的“座機號碼”、“郵政編號”、”工程月數“的輸入框長度比較短,就比較容易尋找和識別。

    3. 數據的位置

    輸入框內數據的位置,根據內容不同而不同,參見圖4(a):

    • ①文字型數據:靠框的左端布置,如:名稱、說明文;
    • ②③數值型數據(長度固定):居中布置,由于編號類數據長度是一定的,所以居中容易讀取,如:電話號碼,郵政編號、材料編號,這樣做也容易與“文字類”和“數值類”數據進行區分;
    • ④⑤數值型數據(長度非標):靠框的右端布置,如:金額、數量、長度。

    四、顏色與裝飾的原則

    這里介紹的界面設計中雖然不涉及到美工的內容,但是也希望作為設計師具有一些美學的意識,因為最終用戶的滿意度是個綜合的指標,這個指標至少包括了下述內容:

    • 業務正確:來自于業務設計(需求分析、架構、功能、數據等)的成果,信息的分區等;
    • 易操作性:來自于功能應用設計的成果(界面、控件),推送機制等;
    • 性能良好:來自于技術開發測試等的成果;
    • 美觀易讀:來自于UI、美工設計等。

    因為企業管理系統不是宣傳用的網站、電商平臺,界面風格要具有以下的特點(僅供參考):

    • 界面的整體要做到簡潔、明了,界面上的各種要素(控件)的擺放位置、顏色、是否使用3D形式都要思考,輔助的功能不要喧賓奪主;
    • 使用淡雅的色彩作為基調原色,不要大面積地使用原色,容易造成眼睛的疲勞;
    • 要給用戶以安靜的感受,不要用有炫酷和跳躍感的要素去分散用戶的注意力(電商平臺的界面希望不斷地帶給用戶新的發現、驚喜)。

    五、小結

    隨著計算機技術的發展,計算機的使用領域和用途越來越廣泛,界面風格也隨之更加多樣化。

    比如:互聯網風格頁面、物聯網的界面,硬件技術的進步也影響界面風格的變化;比如:智能手機端、平板電腦端等,它們的設計內容、風格都有所不同,但是上述的基本理念、原則等還是適用的。

    本文由 @李鴻君 原創發布于人人都是產品經理,未經許可,禁止轉載

    題圖來自 Unsplash,基于 CC0 協議

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    交互設計:理解用戶思維,創造價值

    杰睿

     

    在交互設計的范疇里,對用戶的深入研究能夠為設計師提供關鍵的解決問題的參考依據。本文旨在運用一些成熟的方法,助力新人設計師更深入地理解用戶,拓寬認知視野,進而創造出更多具有價值的設計。

    在設計的廣袤領域中,對于眾多初入行業的設計新人來說,設計工作常常被誤解為純粹主觀且感性的行為。

    他們往往認為個人對美觀的評判即是設計的全部要義,似乎用戶理應沉浸于設計師所營造的美感之中。然而,設計的本質遠非如此表面。

    實際上,設計是一項通過精心設想和精確計算來創造價值的工作,其真正的意義聚焦于是否具有價值以及能否切實解決特定的問題。

    一、錯誤判斷背后的深度思考

    首先,讓我們從一道看似簡單的題目開始:

    一雙球鞋和一個籃球共計 1100 元,球鞋比籃球貴 1000 元,那么這個籃球究竟值多少錢?

    許多人可能會在瞬間給出 100 元的答案,但經過仔細斟酌后會發現正確答案其實是 50 元。

    這種錯誤判斷的根源在于大多數人所具有的兩種思考模式,即快思考和慢思考。它們也被稱為“無意識思維和有意識受控思維”“感性和理性”等不同的表述方式。

    每個人都同時擁有這兩種思考方式,然而通常情況下,慢思考會在接收快思考的估計和決策之后才開始啟動。人類在漫長的生存歷程中,不斷地處理著各種各樣的問題,有復雜的難題,也有相對簡單的情況。快思考是對眾多事情給出下意識的回應,是一種未經充分大腦思考的快速處理方式,其主要目的在于降低大腦的能量消耗。人類作為一種善于尋找規律的生物,快思考往往在以往的經驗中迅速找尋答案。只有當問題獲得反饋或者進入需要慢思考的情境時,人們才會察覺快思考中存在的疏漏。例如,我們時常會在未經深思熟慮的情況下,脫口而出對某些問題的回答,這正是快思考在發揮作用。

    二、剖析用戶的感性與理性

    正如前文所述,大多數人同時具備快思考和慢思考兩種模式,所以在未經特殊訓練的情況下,大多數用戶也同樣兼具感性和理性。在大多數情形下,用戶帶著感性的心態而來,只有當遭遇問題或者涉及自身切實利益時,才會啟動慢思考,從而變得理性。對于商業領域而言,更傾向于快思考的用戶。

    因為快思考會帶來感性和沖動,促使用戶迅速做出決策。這也正是為什么許多銷售人員熱衷于趁熱打鐵,讓用戶在快思考的狀態下被感性和沖動所支配,進而快速完成交易。在各類電商以及活動類的運營活動中,精心營造氛圍的目的就是期望用戶在快思考的時候就完成決策,避免用戶進入慢思考狀態后因猶豫不決而影響決策的達成。

    三、讓用戶持續保持感性的深度策略

    在交互設計中,有以下更為深入的常見做法可以讓用戶持續保持感性:

    1、顯著地標識狀態與當前進度

    不僅僅是簡單地顯示狀態和進度,更要通過巧妙的設計讓用戶在第一時間就能直觀地理解其含義。例如,使用動態的進度條,配合清晰的數字顯示和簡潔的文字說明,讓用戶不僅知道自己所處的位置,還能預估完成任務所需的時間。同時,根據不同的進度階段,采用不同的顏色或圖標進行區分,增強用戶的視覺感知和心理預期。

    在游戲設計中,常見的經驗條就是一個很好的例子。玩家可以通過經驗條的變化,清晰地了解自己距離升級還有多遠,這種明確的進度展示能夠激發玩家繼續努力的動力,保持他們在游戲中的投入感。

    2、引導用戶完成他們的目標

    引導不僅僅是提供方向,更要深入理解用戶的心理需求和行為模式,以更加個性化的方式引導用戶。通過分析用戶的歷史行為數據和偏好,為用戶量身定制引導路徑。例如,在在線學習平臺上,根據用戶的學習進度和能力水平,為其推薦適合的課程和學習資源,引導用戶逐步實現學習目標。

    利用智能助手或虛擬角色進行引導,增加互動性和趣味性。例如,一些購物 APP 中的虛擬導購員,可以根據用戶的瀏覽記錄和購買意向,為用戶提供個性化的購物建議和推薦商品,讓用戶在購物過程中感受到貼心的服務和引導。

    3、明確無誤地告知用戶想了解的信息

    信息的傳達要做到準確、簡潔、全面。除了基本的產品特點、功能和價格等信息外,還應提供用戶可能關心的其他細節。例如,在電子產品的介紹頁面,除了列出產品的技術參數外,還可以提供使用教程、常見問題解答、用戶評價等內容,讓用戶能夠全面了解產品,做出更明智的決策。

    采用多種信息傳達方式,滿足不同用戶的需求。例如,對于視覺型用戶,可以提供圖片、視頻等直觀的信息展示;對于聽覺型用戶,可以提供語音介紹;對于閱讀型用戶,可以提供詳細的文字說明。同時,利用信息分層和漸進式披露的方式,讓用戶可以根據自己的需求逐步獲取更深入的信息。

    4、不要讓用戶去診斷問題

    系統應具備強大的自我診斷和故障排除能力,在問題出現的第一時間自動檢測并提供解決方案。例如,當軟件出現故障時,系統可以自動彈出錯誤提示窗口,同時提供可能的解決方案,如重新啟動軟件、檢查網絡連接等。用戶只需按照提示進行操作,無需自己去尋找問題所在。

    建立完善的用戶反饋機制,及時收集用戶遇到的問題,并進行快速響應和解決。例如,在 APP 中設置反饋入口,用戶可以隨時提交問題和建議,開發團隊可以及時跟進處理,并將處理結果反饋給用戶,增強用戶的信任感和滿意度。

    5、盡量減少設置的數量和復雜度

    進行深入的用戶需求分析,去除不必要的設置選項,簡化操作流程。例如,在智能家居設備的設置中,通過智能化的默認設置和自動配置功能,減少用戶的手動操作。同時,對于一些復雜的設置,可以采用逐步引導的方式,讓用戶在需要的時候再進行深入設置。

    采用可視化的設置界面,讓用戶能夠直觀地了解設置選項的作用和效果。例如,在圖像編輯軟件中,通過實時預覽功能,讓用戶可以在調整設置參數的同時看到效果的變化,從而更加方便地進行設置。

    6、讓用戶感覺而不是去計算

    設計要注重用戶的直覺和感受,通過巧妙的視覺設計、交互反饋和情感化元素,讓用戶在無需進行復雜計算的情況下就能做出決策。例如,在酒店預訂網站上,通過展示酒店的圖片、評價和星級等信息,讓用戶能夠直觀地感受酒店的品質和舒適度,從而更容易做出選擇。

    利用大數據和人工智能技術,為用戶提供個性化的推薦和決策支持。例如,音樂播放 APP 根據用戶的聽歌歷史和偏好,為用戶推薦符合其口味的音樂,讓用戶無需花費時間去搜索和篩選。

    7、讓描述更貼近用戶

    深入了解用戶的語言習慣和文化背景,使用用戶熟悉的詞匯和表達方式進行描述。例如,在面向年輕人的產品中,可以采用流行的網絡語言和表達方式,增強用戶的認同感和親近感。在面向不同地區的用戶時,要考慮到當地的文化差異,采用合適的語言和表達方式。

    進行用戶測試和反饋收集,不斷優化描述內容。邀請用戶對產品的描述進行評價和建議,根據用戶的反饋進行調整和優化,確保描述內容能夠準確傳達產品的特點和優勢,同時符合用戶的需求和期望。

    8、在需要計算的內容提前幫用戶計算好

    利用自動化計算和智能算法,為用戶提供準確、及時的計算結果。例如,在理財 APP 中,自動計算用戶的收益和風險,為用戶提供投資建議。在購物網站上,自動計算商品的總價、優惠金額和運費等信息,讓用戶清楚知道自己需要支付的費用。

    提供多種計算方式和比較工具,讓用戶可以根據自己的需求進行選擇。例如,在房貸計算器中,提供等額本金和等額本息兩種還款方式的計算結果,讓用戶可以比較不同還款方式的優缺點,做出更合適的選擇。

    9、用情感帶給用戶細微的感受

    通過情感化設計,觸動用戶的內心深處,建立與用戶的情感連接。例如,在社交 APP 中,通過溫馨的提示和問候,讓用戶感受到關懷和溫暖。在紀念日或特殊節日,為用戶送上個性化的祝福和禮物,增強用戶的忠誠度。

    利用故事和場景化設計,讓用戶在使用產品的過程中產生情感共鳴。例如,在旅游 APP 中,通過展示美麗的風景圖片和用戶的旅行故事,激發用戶的旅行欲望。在產品介紹中,以故事的形式講述產品的誕生和發展歷程,讓用戶更加了解產品的背后故事,增強用戶的認同感。

    四、設計的價值與目的之深度探討

    許多新人設計師在初期往往喜歡站在個人和美學的角度來看待自己的設計。然而,隨著設計經驗的不斷積累和對行業的深入理解,他們會逐漸認識到有價值、能解決問題才是人類發展的核心目的。在市場上存在眾多同類型產品都具有價值、能解決問題的情況下,才需要通過設計出不同的差異點來脫穎而出。但始終要牢記的前提是設計必須具有價值、能解決問題,一旦拋棄了這個大前提,任何設計都會顯得空洞、索然無味。

    設計與藝術雖然有一定的關聯,但它們并不是一回事。設計更注重實用性和功能性,以滿足用戶的需求和解決實際問題為主要目標。而藝術則更強調審美價值和自我表達,追求的是情感的共鳴和創造力的展現。設計師需要在設計過程中平衡好實用性和美觀性,既要確保設計能夠解決問題,又要讓設計具有一定的審美價值,從而提升用戶的體驗和滿意度。

    總之,交互設計要深入理解用戶的思維方式,通過更為深入和有效的方法讓用戶持續保持感性,從而提高用戶的滿意度和忠誠度。同時,設計師要時刻牢記設計的價值和目的,不斷創造有價值、能解決問題的設計作品,為人類的發展和進步做出貢獻。

    以上觀點僅代表個人看法,如有不對之處,歡迎在評論區指正交流。謝謝!

    本文由 @用戶體驗王叔 原創發布于人人都是產品經理。未經作者許可,禁止轉載

    題圖來自Unsplash,基于CC0協議

    該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    如何設計 B 端產品的頁面加載功能?

    杰睿

    “B 端頁面加載,關乎用戶體驗。” 在 B 端產品設計中,頁面加載功能不容小覷。如何讓用戶在等待中減少焦慮?怎樣使頁面加載邏輯清晰、策略得當?本文將詳細闡述,為 B 端產品設計提供指引。

    每一個用戶都不喜歡進入頁面時需要長時間的等待,并且對著一個空白的頁面。

    因此在 iOS當中會使用大量的動效、情感化設計來引導用戶多停留一些時間等待加載;在較多 app 當中,也會通過動效設計,優化頁面信息的加載。

    那既然頁面加載很重要,對于B端產品而言,我們也需要去考慮頁面的功能究竟要如何進行設計。

    今天我們會聊聊 頁面加載 功能的具體邏輯,以及B端產品的常見頁面加載策略,希望能夠對各位同學有所幫助~

    一、頁面加載的邏輯

    在系統當中,頁面加載其實是用戶對系統界面進行交互后,系統會將對應的數據傳給服務器,而服務器又會將內容反饋給用戶的整個過程。

    比如在按鈕組件中,我們就需要去設定「當用戶點擊了按鈕過后它需要長時間加載的 Loading 狀態」

    通過這樣的做法,其實就是緩解用戶等待所花費的時間,減少焦慮。

    在很多C端產品中,頁面加載是非常常見的。比如會有懶加載、預加載、異步加載等。

    同時會使用非常多的 插畫設計、動效設計 去降低用戶所使用的焦慮。但是在桌面端中,它的思考方式會有些許不同,我們將其分為四種不同的方式。

    二、骨架圖/skeleton

    骨架屏是較為常規的頁面模塊加載方式。

    它主要適用于模塊當中,加載內容需要提供占位信息時進行使用。通常會在 列表、卡片類 圖文信息較多的頁面當中進行呈現 。

    在用戶預期上,骨架圖能夠幫助我們展示當中頁面的大體結構,以避免在頁面加載信息的過程當中出現隨意跳動、亂展示的情況。

    特別是在很多頁面第一次加載時,由于數據內容較多,因此使用骨架圖填充會更為合理。比如在有贊當中, 就會使用骨架圖的方式來進行頁面信息的加載。而在B端后臺中也更多的適用于工作臺信息的加載,特別是在工作臺中有數據部分的內容呈現的時候,需要格外去注意。

    三、加載中/Spin

    Spin 主要要于頁面和區塊當中的信息加載,通過適當的動效,能夠保證頁面加載時緩解用戶的焦慮。

    在 Spin 當中,會有許多不同的類型:基礎Loading、動畫Loading、進度Loading

    基礎Loading 更適用于頁面當中的組件類級別的加載,像是在輸入框內、按鈕中、下拉選擇… 的內容加載。

    動畫Loading 則偏向于區塊、頁面級別的加載,比如在表格頁面中,就會經常使用加載的方式展示目前正在相應。

    進度Loading 則更像是進度條的外露,想要更凸顯目前的真實進度情況。目前在 Ant Design 5.18.0 版本當中即可支持

    四、長時間加載

    當然,在系統當中還會出現一些特殊的加載狀態。比如在針對數據量較大的情況下時,我們會采取什么樣的加載策略?

    比如在神策數據當中,當我們在去分析后臺的行為數據時,需要進行大量的計算,因此在分析完一次過后所等待的時間也會更為長久。這時候神策會給出一套更為復雜的加載策略。

    首先在加載層面上,它會優先告知用戶目前整體的加載進度,這對于用戶的等待是非常有益的。

    其次,如果你對于整體加載的時間進度不夠滿意,那我可以給你相應的解決策略,像是分批加載等等。

    最后如果你在加載過程當中有其他的分析任務,也可以通過異步加載的方式,進行后臺計算,等結果出來后會通過通知的方式進行提示。當然,在此過程中,你可以中斷、退出。

    五、異步加載

    異步加載也是針對長時間加載的一種策略,比如我需要去上傳較大信息的時候,我需要耗費特別多的時間。那這時候就可以采用異步加載的方式,滿足用戶的正常使用。

    在飛書當中,我要上傳飛書妙記,我要導入飛書成員,那都可以通過異步加載的方式來進行呈現。

    那在設計的時候需要去考慮異步加載整體的入口以及功能之間是如何實現的。

    像是在飛書妙記中,它會將其作為一個上傳入口,進行快速的展現。而在導入飛書成員的時候,則會展現是將其放在后臺進行加載,等完成過后通過通知的方式來告知用戶(與神策相同)

    關于加載,其實在設計上還會有很多細節,我們也會在課程當中,通過 功能設計 的方式給大家進行梳理設計要點(肯定會比現在更為系統),后續有時間,再和大家分享~

    本文由人人都是產品經理作者【CE青年】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

    題圖來自Unsplash,基于 CC0 協議。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    2025 B端設計趨勢之風格和質感

    杰睿

    從擬物風格到扁平化,再到如今的多變色彩與微妙質感,設計風格的演變不僅反映了技術的進步,也折射出用戶需求的轉變。本文結合釘釘近10年的B端設計經驗,深入探討2025年B端設計的三大趨勢:多變豐富的色彩、微妙克制的質感以及清晰明了的圖形。揭示了如何在滿足企業高效、專業需求的同時,為用戶帶來更具情感價值和科技感的視覺體驗。

    回溯互聯網的發展進程,從桌面端的撥號上網,到5G移動互聯網,再至人工智能的助力,科技領域正在經歷著翻天覆地的變革。未來的數字世界,在沉浸感、參與度、個性化等維度對體驗會提出更進階的要求;與此同時,B端企業對于高效、簡便、用戶友好的界面需求與日俱增。在2025年的當下,B端設計師唯有持續學習,適應新技術與新趨勢,緊密圍繞客戶的業務價值展開設計,進一步注重實用性、包容性以及可定制化,方可為企業客戶塑造出卓越的產品與服務。

    因此,我們結合釘釘近10年的B端產品設計經驗,鑒于未來B端設計趨勢將展現出多元化、智能化和人性化的特質,從B端產品個性化、風格與質感、界面版式、圖標、動態交互等多維度設計展開深度研究,與大家一道探討B端設計的本質和趨勢,期望在真正駕馭B端產品設計的這條道路上,帶來些許有益的啟迪。

    上篇文章我們講述了B端產品的個性化趨勢,如何利用個性化幫助個體提升用戶價值,打造個體形象、滿足個體情緒以及增強個體自信。

    今天,我們要給大家分享的是B端產品風格&質感,為企業塑造品牌形象、為個人用戶提供情感價值。

    一、從技術發展看UI設計風格的演變

    設計作為科技和藝術的結合,UI設計風格的演變不僅與技術的發展密不可分,而且與藝術創作風格的發展有著異曲同工之妙,都經歷了抽象—具象—抽象的過程。

    第一階段:萌芽風格

    20世紀70-80年代是計算機圖形界面的萌芽階段,就像繪畫藝術起源之時的那個茹毛飲血的年代,當時的原始人所能利用的工具只有火堆熄滅后留下的木炭,圖像呈現的載體也只有山洞內的墻壁和巖石。就像剛剛進入計算機時代的設計師們,不僅缺少專業的繪圖軟件,而且當時計算機本身的顯示能力也尚且不足。這個階段的UI設計,能夠在顯示器上清晰地顯示并傳達明確的含義,比畫出風格更加重要。觀察當時的操作界面,不難猜測當時的設計師,努力以具象的表現風格來減少人們對計算機界面的陌生感,但由于工具和載體的限制無法完美實現,雖然這種風格無法被稱為擬物風格,但為后來真正的擬物風格的出現和發展奠定了基礎。

    第二階段:擬物風格

    1995年,家用計算機的顯示能力迎來了質的飛躍,Windows95發布、對真色彩的支持、PhotoShop5.0的發布……技術進步和專業軟件的加持讓設計師突破了過去創作工具和呈現載體的限制,就好像在山洞里用木炭繪畫的原始人,擁有了畫筆、顏料和畫布。設計師的創作空間和寫實能力得到極大提升。

    與此同時,個人計算機和手機開始普及,圖形化的操作界面不再是科研人員和專業人士的專屬,而是普通人工作學習中的一部分。為了讓沒有接觸過圖形化操作界面的用戶快速識別圖標代表的功能,最好的方式就是在界面中對現實世界中的物體進行還原,這便推動了擬物風格的發展。

    擬物風格的設計作品,通過模擬現實物品的造型和質感,通過疊加、高光、紋理、材質、陰影等效果對實物進行再現,讓用戶以極低的學習成本快速熟悉圖形化的操作界面和產品功能,并以符合日常習慣和直覺的方式引導用戶進行交互。

    例如在ios6中的相機icon,對鏡頭部分細節刻畫非常細致,用戶很容易聯想到使用真實相機時能夠做到的事情,這對用戶理解和熟悉某一個產品功能的幫助無疑是巨大的;再比如同樣在ios6中的書架icon設計也十分精彩,不僅對真實報刊架的結構和質感極度還原,而且對書架內的雜志也進行了展示,用戶甚至能像真的面對一個書架一樣看到書架中的內容,小小的icon中信息含量極高。

    第三階段:扁平化風格

    到2013年左右,智能手機在全球主要國家和地區的普及率大幅提高。根據統計數據,許多發達國家的智能手機普及率超過了50%,發展中國家的智能手機普及率也在快速上升。大部分用戶已經對圖形化的操作界面非常熟悉,無需那些極致寫實的風格也能快速理解圖形背后的含義和功能。同時,越來越多的信息和應用涌入智能設備,擬物風格所推崇的肌理、質感、光影……帶來精致效果的同時,也讓細節變得冗余,如何處理爆炸的信息成為UI設計的首要問題。就像19世紀攝影技術對傳統寫實繪畫藝術的沖擊,讓藝術家們重新思考繪畫藝術的發展方向一樣,擬物風格的極致具象化在達到巔峰之時也漸漸到達了轉折點。

    2013年9月ios7發布,并且首次在UI設計中采用了扁平化的設計風格。這種風格摒棄了擬物設計風格中的寫實光影、肌理、冗余的細節、甚至放棄了體積的塑造以及一切可能會對識別產生干擾的元素,只保留對用戶最關鍵的信息,呈現出十分干凈整潔的視覺效果。

    然而物極必反,扁平化設計的極致簡潔,容易讓長期使用的用戶感到冷淡和無趣,于是新擬物風格應運而生。

    新擬物融合了擬物和扁平兩種風格的特點,在光影和立體效果方面較為寫實,元素通常是凸起或凹陷于界面之上,視覺上錯落有致,但是在色彩和造型方面則更偏向于扁平化風格,圖形往往經過一定的簡化和抽象,并搭配少量簡潔的主觀顏色。但是新擬物風格過于依賴投影和立體效果對界面元素的區分,很難呈現復雜的信息層級,而且微妙的對比度也不利于無障礙識別,所以這種風格并未真正大面積流行和使用。

    二、AI時代的B端設計風格趨勢

    2022年,ChatGPT發布,AI在自然語言處理方面達到了前所未有的高度,同年Midjourney和stablediffusion的出圈讓每個人看到了AI生圖的魅力。不僅各種AI應用和網站如同雨后春筍般出現,而且各行各業的APP都在爭前恐后的升級自己的AI能力。這樣的時代背景,為UI設計提出了一個新的命題:如何用設計展現應用的AI能力以及企業的智能化心智。

    趨勢1:多變豐富的色彩

    色彩在B端設計風格中占據著至關重要的地位,能夠帶給用戶非常強烈的直觀感受,是用戶對產品和品牌的第一印象。例如藍色就是過去對To B或科技產品的色彩印象,諸如英特爾、微軟、聯想、戴爾、IBM…這些品牌通過藍色來傳達簡潔、未來感和高科技等視覺感受。但是這個標準并非是一成不變的,越來越多的B端設計,選擇使用豐富的色彩來表達智能化千變萬化的特點,科技感的表達不再是千篇一律的冷色,而有了更多的變化。

    彌散漸變

    彌散漸變是一種借助模糊效果將多種顏色進行混合的特殊漸變形式,多種顏色的混合以及不規律的漸變走勢,讓彌散漸變具有很強的氛圍烘托效果和表現力。暈開的色彩仿佛在一片虛空之中慢慢彌散開來,細膩、柔和又夢幻,很適合用來提升界面的局部氛圍。

    優秀的場景適用性

    在B端設計中,屏效和識別尤為重要,利用圖形或插畫的形式烘托氛圍,往往需要占用更多的空間,并且在網頁端的適配過程中,容易產生圖文重疊帶來的識別的問題。而彌散漸變由于其模糊和明度均勻的特點,可以在為畫面貢獻豐富度的同時,不產生視覺上的焦點,所以在適配過程中也不會產生圖文重疊的問題,具有很普遍的應用場景。

    高效的場景拓展

    在調整漸變時,通過保留一些相對清晰的輪廓,彌散漸變還能呈現出虛實結合的視覺體驗,讓畫面更具動感和層次變化,就像一面磨砂玻璃后飄浮著一些真實的物體一樣,十分具有空間感。虛實的變化讓色彩有了具體的造型,可能是一段波浪、一個球體、或是一座山丘……這樣的背景配合一些簡單的排版,便可以是一張海報、一張banner、一個推送封面……這無疑為高速迭代的B端設計提供了一個高效的解決方案。

    動態變化

    根據資料顯示,手機軟件的AI生圖時長一般在10秒至120秒之間,AI搜索平均時長大致在2秒到15秒之間,專業的寫作AI成文時間大致在3秒到30秒……

    AI應用伴隨著大量的等待時間。使用動態變化的顏色能夠降低用戶在等待期間的焦慮感,并且不斷變化流動的色彩也能暗示用戶,當前仍處在“生成中”的狀態下。例如用戶在等待釘釘AI助理回答的過程中,聊天氣泡會呈現出多彩的流光效果;用戶在與AI助理進行語音交互時,整個屏幕邊緣會呈現動態的彩色光效,以表示當前的AI激活狀態。

    除此之外,全屏動態的漸變背景還很適合用在信息不多的功能或應用首頁,例如在釘釘的登錄頁面,屏幕近三分之二的空間中只有簡單的文字動畫,搭配全氛圍的動態漸變背景,不僅清晰地傳達品牌的智能化心智,而且為“登錄”這一操作增添了滿滿的儀式感。類似的還有釘釘AI搜索的功能首頁,大面積涌動的動態漸變,充分在視覺層面展現了智能化的心智,而且大面積的留白也讓釘釘AI企業搜索的功能價值描述顯得格外突出。

    趨勢2:微妙克制的質感

    雖然新擬態風格并未大規模的使用和流行,但其衍生和沉寂的背后反映了設計的本質就是一場功能和審美之間的角逐。B端設計更是如此,用戶側需要美的設計來愉悅工作中的心情,但又不想被花哨的色彩和裝飾干擾工作效率,企業側需要擺脫沉悶古板的刻板印象,但同時也需要呈現專業、科技的高大形象保持可信度。微妙克制的質感表達為這種“平衡”的實現提供了解決思路。

    玻璃擬態

    玻璃擬態是2020年末開始流行的設計風格,顧名思義就是對玻璃這種材質的一種擬物化設計,玻璃擬態風格相較于新擬物風格最明顯的進步在于,它巧妙地利用玻璃這種材質解決了新擬物風格中元素邊界不清晰、難以體現復雜層級等問題。其風格特點可以總結為以下特點:

    通透:

    由于磨砂玻璃的通透性,在界面中存在多個層級時,會呈現出一種虛實結合的美感。并且其透明的屬性,能夠很好的暗示用戶目前所處的位置,利用此特性,不僅能更沉浸的展現用戶當前關注的信息,而且“疊加”而非“跳轉”的交互邏輯也極大減輕了用戶操作時的心理負擔。

    懸浮:

    傳統的擬物風格往往會塑造一個地面,再將圖標“放置”在上面。而玻璃擬態風格則更像是構建了一個“無重力”的虛擬空間,界面中的元素有明顯的懸浮感,顯得十分輕盈,同時也非常適用于B端場景下對于科技感的體現。配合投影、虛實對比,用戶能夠清晰地感受到元素在空間上的高度差異,不僅保障了信息的可讀性,而且讓可交互元素更具點擊感。

    微妙:

    由于磨砂玻璃的物理特性,頁面背景在經過“玻璃層”的模糊處理后會變得十分柔和,類似上文所述的“彌散漸變”,呈現出一種明度均勻,沒有視覺焦點的狀態,無論是動態還是靜態都能很好的保障前景文字、UI控件等元素的可識別性。并且在玻璃擬態風格中,常常使用輕薄微妙的邊框來強化物理質感,這種既作為描邊,又作為“玻璃”的厚度的處理方式,讓卡片能夠以一個恰到好處的對比度呈現在界面中。

    綜上所述,玻璃擬態風格在擬物程度上找到了一個很好的平衡點,既為枯燥的B端設計提供了真實感和趣味性,又保障了復雜信息情況下的識別度。并且由于玻璃光滑、透明等物理特性,也為“科技感”的視覺呈現提供了新的方向。

    柔和光影+微質感材質

    與C端設計中常用強烈的光影效果吸引用戶不同,b端設計相對更加沉穩。對比阿里云、WPS、釘釘、騰訊云的官網首頁,都不約而同地使用了非常柔和的環境光,這種光影設計,在保障整體亮度的基礎上,不會產生明確的光照方向和陰影效果,并且在材質選擇上,也都使用了高光、反光均不明顯的漫反射材質或微質感的毛玻璃材質,整體視覺感受十分沉靜和整潔。

    趨勢3:清晰明了的圖形

    圖形在設計中扮演著兩部分角色,一方面圖形作為頁面的裝飾需要保證審美的愉悅性,另一方面圖形也作為文字信息的補充,需要傳達某些特定的含義。好的圖形設計不僅能為整個頁面的氛圍添光加彩,而且能幫助用戶更好的理解文字信息。

    規律感的幾何圖形

    在b端場景下,常常需要借助圖形表達一些抽象的概念,例如PaaS、服務器、AI、用量、科技、流量……這類含義并不直接對應一個特定的造型,使用有規律的幾何圖形,似乎是一個不錯的選擇。這些技術概念的背后來自于二進制中0和1的組合,而將幾何元素有機地排列,甚至衍生出不同的形態的過程,不是正如代碼的編寫嗎?

    簡潔高效的手繪元素

    在當下的B端設計領域,越來越重視情感關懷和個人用戶的體驗。在頁面中使用具有手繪感的元素或使用直接使用手繪圖案作為配圖,不僅能夠快速拉近品牌和用戶之間的距離,塑造年輕化、有親和力的品牌形象,也能提升用戶在使用產品工作時的愉悅感。這類充滿輕松感的圖形比起傳統的插畫或3d建模更加簡潔,色彩鮮明,具有很強的表現力,并且設計成本也更低,十分適合作為一些小而美的產品配圖。

    例如Google推出的Material design的設計語言就大量使用了抽象且配色艷麗的手繪元素作為配圖,這類圖案更加強調色彩并不過多細化造型,穿插在文字之間,讓深色背景的頁面一下活躍了起來。與此類似的還有figma的官網,設計師將軟件內的部分工具比如線條、線框、錨點、指針等元素抽象出來作為插圖,不僅簡潔耐看,而且十分具有自身的品牌特色。

    除此之外,利用手繪線條來表現hover的交互狀態,圈畫重要的文字信息,或是進行操作引導,也具有極高的效率。簡單的箭頭或者波浪線,能夠非常直接地將用戶的注意力指引到重要信息處,就像學生時期在書本上圈畫重點一樣,感受上十分自然而親切。仿佛應用的設計者悄悄在用戶耳邊說了一句小tips,而不是粗暴地把信息丟到用戶眼前。

    三、結語

    無論是擬物風格時期的極致寫實,還是扁平化風格時期的極簡,又或是AI時代的多彩絢麗,設計風格的發展始終圍繞著技術發展的主線,其發展的目標,始終圍繞著如何讓當前時代的用戶更好更便捷地享受到技術應用帶來的便利。一個好的b端設計風格,不僅能夠幫助企業展現品牌心智和技術上的先進性;而且能夠讓個人用戶更高效且愉悅地完成工作任務。在未來的B端產品設計中,我們應該始終堅持形式服務于功能和以人為本的原則,探索更適合業務場景的設計風格,為用戶帶來更加舒適自然的視覺體驗。

    以上是本期帶來的B端設計趨勢之個風格篇。

    本文由人人都是產品經理作者【釘釘用戶體驗】,原創/授權 發布于人人都是產品經理,未經許可,禁止轉載。

    題圖來自Unsplash,基于 CC0 協議。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    你的“優秀”設計,可能正在摧毀用戶價值

    杰睿

    多數產品經理總是認為很專業,總會有一些異想天開的想法;殊不知我們不少自以為是的“優秀”設計,并不符合用戶使用場景,還可能摧毀用戶價值。就像本文列舉的這幾個案例,你有注意到嗎?

    產品經理的專業視角與用戶視角,如同孿生兄弟,外表相似但內在迥異。

    有時我們說誰的產品專業能力過硬,可能是一句褒獎的話。但專業能力若不能融合專家視角與用戶視角,便可能被視為局限而非優點。

    張小龍說自己可以很快變小白,而馬化騰卻可以“一秒變小白”。

    所謂“一秒變小白”是指快速從專業視角切換到用戶視角,確保在設計產品和評估用戶價值時,避免陷入專家思維,無意中損害用戶價值

    一、那些“優秀”的設計,正在摧毀你上廁所的體驗

    兩年前,我帶著幾個“朋友”坐飛機回云南老家,到達長水機場后,準備去上廁所。其中一位女性朋友,徑直走進男廁所,直至上完廁所出來后,我們提醒她才“恍然大悟”——進錯了廁所。

    究其原因就在于一個“設計”:女廁所圖標設計不明確,導致誤解。

    目前在機場、商場(尤其是高級商場)、寫字樓等場所,設計者都采取一種精簡設計方案,他們追求簡潔的設計感。即只有一個非常簡潔的圖標,有的是男和女的人物圖標,有的是煙斗和高跟鞋等。總之,不會有任何一個漢字(或英文)描述。

    好像一旦圖標旁寫上“男廁”、“女廁”后,它們就變成了一種“土”、“low”的設計方案。

    同一個空間內,不僅僅是廁所圖標,還有扶梯、直梯、貨梯、嬰幼兒室、母嬰室等各類圖標,甚至有時它們會同時出現在一個引導牌,讓你真正玩一把“猜猜猜”的圖像游戲。

    結果是:你無法快速找到圖標;找到后,你需要仔細辨認以及“揣摩”圖標的含義,避免走錯;直至你走錯后,才能“吃一塹,長一智”

    同時,某些商場或寫字樓的洗手臺,為了追求設計感以及合理利用空間,把洗手液跟紙抽“融入”到鏡面里,表面看確實簡潔,是一種優秀設計方案。

    但當你伸手接洗手液洗手時,卻無法精準對接,需要反復嘗試2-3次。沒接到的洗手液,自然流就流落到洗手臺之上。

    結果是:用戶體驗差,浪費洗手液,增加清潔成本

    保潔阿姨發現這個問題后,最后的解決方案就是:在洗手臺旁邊,直接放了一個自助式的洗手液。至此,那個“優秀”的設計方案,從此成為了擺設。

    你自以為的優秀設計,往往卻摧毀了用戶的價值。它肯定不是你的初心,而是你的專業視角所致,卻忽略了用戶視角(尤其是小白用戶視角)。

    二、那些“優秀”設計,正在讓用戶“不明所以”,甚至“不知所措”

    如下圖所示,用戶對發放工資條時,選擇方案的設計進行了“吐槽”。一般默認勾選時,顯示一個多選框,勾選即選中,反之不選,而設計升級后,期望讓選中效果更明顯,去掉勾選框,點擊列表選中,再次點擊取消。

    結果是:用戶不知道如何勾選,“優秀”設計摧毀了用戶體驗。

    我們再看一個例子。

    如下圖所示,它們都是新建班次的設置頁面,核心是約定員工的上下班時間跟打卡范圍,但它們代表兩種不同的設計風格。

    方案1采用平鋪直敘的用戶語言風格,以對話感設計頁面元素,旨在增強用戶互動體驗,但可能導致信息顯示冗余。比如最早可提前x分鐘打卡,晚于x分鐘打卡記為遲到;

    方案2采用簡潔設計,避免冗余文字,以簡潔頁面提升視覺效果,但可能增加用戶理解和使用難度(就像廁所圖標的設計一樣)。比如上班卡當天5:00-當天12:00,用戶自行設置取卡范圍。

    三、如何避免讓“優秀”設計無意損害用戶價值?

    第一,認知層面。產品經理的專業能力體現在創造用戶價值和商業價值,而非局限于單一專業領域。這種能力需同時滿足專業人士和小白用戶的需求,否則不能稱之為真正的專業能力

    第二,設計語言。采用用戶語言/自然語言作為設計語言,而不是設計師或產品經理的“專業”語言。比如晚于30分鐘打卡記為遲到,就好于“豁免30分鐘”;最早可提前120分鐘打卡,最晚可延后120分鐘打卡,就好于“上班卡范圍:當天6:00-10:00”。

    第三,設計“潛規則”。遵循行業“潛規則”設計,避免過度自我創造(或創新),導致傷害了用戶價值。比如單選、多選、開關等設計要素,遵循成熟的設計方式,而不是非要“獨樹一幟”。

    四、彩蛋:如何解決家長帶異性子女上廁所?

    我們在商場、機場等,比較常見的解決方案是:提供一個間親子衛生間。

    哈爾濱江北商場提供了一種創新的解決方案。即:在正常男女廁所旁邊,新建了一個開放式的兒童廁所,配備了男孩和女孩專用的小便池及兒童洗手臺。

    既解決了家長帶異性子女上廁所的難題,也方便了兒童獨立使用,體現了對兒童和家長需求的細致考慮,這是真正用戶視角下的產品設計。

    專欄作家

    邢小作,微信公眾號:產品方法論集散地,人人都是產品經理專欄作家。一枚在線教育的產品,關注互聯網教育,喜歡研究用戶心理。

    本文原創發布于人人都是產品經理。未經許可,禁止轉載。

    題圖來自 Unsplash,基于CC0協議

    該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

    蘭亭妙微(m.lzhte.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

    日歷

    鏈接

    個人資料

    藍藍設計的小編 http://m.lzhte.cn

    存檔

    主站蜘蛛池模板: 亚洲国产成人精品福利无码 | 美女的胸www又黄的网站| 国产成人啪一区二区| 日韩三级片网站| 日韩精品中文乱码在线观看| 亚洲成人av在线系列| 小13箩利洗澡无码视频免费网站| 国产AV无码专区亚洲AV漫画| 久久99精品久久久久久9| 日韩视频中文字幕| 老司机久久99久久精品播放| 91视频操| 啪啪视频一区二区三区入囗 | 久久伊人蜜桃av一区二区| 麻豆第一区MV免费观看网站| 国产aⅴ无码专区亚洲av综合网| 熟妇啊轻点灬大JI巴太粗| 亚洲国产成人久久综合碰碰动漫3d| 亚洲欲色欲色xxxxx在线| 国产极品美女到高潮| 717午夜伦伦电影理论片 | 国产日韩精品视频无码| 91精品国产免费久久久久久青草 | 最新国产麻豆aⅴ精品无| 国产亚洲一二三区精品| 日本中文字幕第一页| 亚洲自偷自偷在线成人网站传媒| 成人在线视频网址| 亚欧免费无码aⅴ在线观看蜜桃 | 大悟县| 18禁黄网站禁片免费观看国产 | 三级在线视频观看| 毛片亚洲AV无码精品国产午夜| 欧美yw精品日本国产精品| 又色又爽又高潮高清免费国产| 色爱无码AV综合区老司机非洲| 午夜福利大片| 久久66久6这里只有精品| 欧美 日韩 国产 成人 在线观看 | 成人免费AV一区二区三区| 蜜臀亚洲一区在线观看|