1. <sup id="1kcns"></sup>

    2. <rt id="1kcns"><legend id="1kcns"></legend></rt>
      国产AV巨作丝袜秘书,国产精品久久香蕉免费播放,国产草草影院ccyycom,涩涩爱狼人亚洲一区在线,日本阿v片在线播放免费,国产精品一区二区三区蜜臀,精品一区二区三区在线观看l,av深夜免费在线观看

      首頁

      蘭亭妙微原創作品 | 當硬核科研遇上極簡美學 這才是高端儀器該有的樣子

      麗潔 設計思維

      近期和團隊一起完成了一個超酷的項目——飛秒激光時域熱反射測量系統(TDTR)的軟件UI設計。

      不得不說,做科研設備設計真的太“上頭”了!

      這不僅僅是一個軟件界面,更是連接科學家與納米世界的窗口。

       

      分享一下我們的設計思考,希望能給做B端、科研儀器設計的姐妹們一點靈感~

      1. 項目背景:讓復雜的測量變簡單 客戶是一家專注于熱學測試設備領域的科技企業。 

      設備用途: 測量納米薄膜熱導率、界面熱阻等。

       核心挑戰: 如何把微納尺度的復雜數據,轉化成直觀、易操作的視覺語言? 我們輸出了深色和淺色兩套方案,客戶一眼相中了淺色方案!理由是:干凈、通透,長時間盯著屏幕做實驗眼睛不累。

      ScreenShot_2026-06-09_131239_604.png

       

      2. 設計亮點:嚴謹中的“小心機” 

      配色邏輯:紅灰CP太絕了!

      灰色背景: 作為基底,最大程度保證了數據圖表的清晰度,不搶戲。

       紅色點睛: 作為品牌主色和警示色,關鍵操作按鈕和重要數據用紅色突出,既符合工業嚴謹性,又增加了視覺活力。

      圖標設計:低飽和度的“科研風” 沒有用花里胡哨的漸變,而是采用幾何圖形+數據可視化元素。

      線條扁平化,小尺寸下也能看清,降低科研人員的認知成本。

      布局:多面板分欄 左側控制參數,中間展示實時數據,右側顯示擬合分析。

      這種布局讓科研人員可以“一眼看全”,不用頻繁切換頁面,大大提升了實驗效率。

       

      3. 從設計到落地:高還原度的秘密 讓人驕傲的是,我們不僅做了UI設計,還負責了QT前端開發! 

      通過多輪的效果走查,我們實現了設計稿的高還原度落地。看著設計圖變成真正能跑代碼、能測數據的軟件,這種成就感真的爆棚!

      ScreenShot_2026-06-09_131254_320.png

       

      4. 設計師碎碎念

      做科研儀器設計,“克制”是最大的美德。 我們不需要炫技,只需要讓數據更清晰,讓操作更流暢。每一個像素的打磨,都是為了致敬科學的嚴謹。

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

       

      image.png

      為什么審美跟得上,但沒參考就不會做設計?

      之晨 設計思維

      一、全文速覽圖

      image.png

      我想這是很多新手設計師都有過的感受,明明懂了很多設計知識,但到真正設計的時候還是會出現迷?;蛘邲]思路的情況。

      1. 看了很多內容/審美在線,但拿到需求沒想法
      2. 設計技法VS設計原理
      3. 平面能力差
      4. 學習路徑推薦

      二、原因分析

      造成這種情況的主要原因是,雖然我們每天看了大量的設計文章或者技法,但沒有第一時間應用到設計實踐中。

      換句話說就是,我們每天看的設計內容可能跟我們實際做的工作需求不夠搭邊,這樣就很容易造成拿到一個新需求后沒有想法,感覺之前看了很多設計圖或者文章都沒派上用場,不得不重新找競品找參考才能展開設計。

      就像學了一節新課程,如果沒有第一時間做配套的練習題,等過了一周再做練習題發現根本不會做,因為之前學的課程早都忘得差不多了。

      北京蘭亭妙微UI設計公司:下面展開講講如何避免這種情況,建立自己的設計成長體系。

      三、設計技法VS設計原理

      對于設計技法vs設計原理的問題,我覺得對于設計師來說同等重要,但具體要結合你現在的工作情況找到一個側重點。

      舉個例子,比如當前的工作偏UI視覺多一點,需要常做一些運營活動圖,那么日常就可以多側重練練技法,多做視覺練習;如果當前的工作偏向純UI,那么就可以多重視設計理論,多思考產品規劃、交互流程、用戶使用體驗等等這些產品交互相關的知識,用理論支撐起我們的設計方案。

      這樣既能保證我們能很好地勝任當前的工作,還能讓我們在持續的工作中不斷有進步有提高。

      四、如何看待平面能力

      對于平面能力差的問題,我覺得平面設計能力是基礎??赡芎芏嗤瑢W在大學時有過這種體驗,無論你的專業是視傳、數媒、產設,甚至攝影,都需要經歷平面設計這一關。排版、手繪、字體、后期合成等等這些平面能力需要我們不斷練習實踐。

      現在AI繪畫工具的出圖效果都不錯,大家可以好好利用起來輔助出圖,補齊UI設計師在平面設計上的短板。

      總的來說,平面能力要多練習多積累,日常工作中還是建議靈活運用“AI+設計”的形式,也能打造出好的效果圖,沒必要為了某個視覺效果死磕PS而浪費太多工作時間。

      五、可復制的學習路徑

      針對看了很多設計但做需求還是沒想法,以及到底怎么學UI、建立自己的設計體系這些情況,我結合自己的經歷總結一下,希望能對你有幫助:

      首先還是多積累,多看好的設計,審美需要一直提高。比如每天早上我都會拿出半小時的固定時間去Pinterest或者花瓣里去看各種各樣的設計圖。

      需要注意的是,這里的看也分為兩個方向:一個是日常看圖,一個是專項看圖。

      1. 日常看圖,就是我在網站里隨便瀏覽,看到好的圖就隨手采集下來。這是一種沒有目的性的,無論是APP設計、運營海報還是3D圖標,看著好的設計圖就存下來。
      2. 專項看圖,就需要根據接下來要設計的需求,提前有目的地去看一些圖,找各種競品,去體驗這些競品有哪些好的地方,哪些可以用到我們的設計上。這時需要結合需求,有針對性地去看圖。

      其次,每天看的圖很多,就需要把圖都整理一下,這個時候就需要建立一個系統性的設計素材庫。

      image.png

      拿花瓣舉個例子,在花瓣里可以創建各種各樣的分組。

      比如APP是一個大的分組,在這個APP的分組里面可以建各種各樣的畫板,像APP-首頁、APP-導航欄、APP-標簽設計等等;再比如網頁設計是一個大的分組,我可以在網頁設計底下創建網站首頁設計、網站登錄頁設計這些畫板。

      image.png

      這樣整理的好處一個是讓我們每天看的圖更加清晰有條理;另一個是有了分組/畫板后,接到新的設計需求后就可以直接定位到某個分組里,看看我們之前創建的畫板里有沒有類似的一些參考圖,省去了從0~1再重新找參考圖的這種過程。

      而且看到自己采集的參考圖突然派上了用場的過程,對于設計師來說特別棒!這說明我們每天看的內容有價值,不只是在收藏夾里吃灰。

      比如要設計一個UI標簽,我們可能需要反復去創建的素材畫板里看各種各樣的標簽設計,這樣不止一次地反復看收集的素材,看的多了之后我們就對這些素材圖特別熟悉,這樣就不怕后面的設計再沒思路。

      現在每天網絡上都有特別多的零碎信息,所以這種清晰的整理是一個特別有效的成長方法。經過這種「先整理再回看再設計」反復練習的過程,會有一個更清晰的設計體系和工作流,設計能力肯定會有一個質的提升。

      轉載自優設網

      image.png

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

      高手總結!教你做好登錄頁設計的12種切入點

      清陽 設計思維

      今天蘭亭妙微UI設計公司,跟大家分享登錄頁的 12 種設計切入點,相信總有一款會入甲方爸爸的心。

      作為設計師,我們常常面臨一個窘境:要面對各式各樣客戶審美的挑剔,有時候被虐得都懷疑人生。

      但找參考時,思維又容易被局限在常見的幾種形式里,我通過分析大量優秀的登錄頁,總結了 12 個高級的設計切入點,希望能為你打開新思路。

      一、以純色背景+品牌符號為出發點的登錄頁設計

      image.png

      設計解析:

      1. 形式:兩者都采用純色作為底色,底色配幾個跟系統主題相關的元素。
      2. 色彩:上圖的配色冷靜、柔和,突出專業與寧靜;下圖則大膽使用高對比度色彩,充滿能量與動感。
      3. 構圖:兩者均采用經典的左右分割構圖,這是登錄頁最穩健高效的布局之一。

      二、以用戶畫像為出發點的登錄頁設計

      image.png

      設計解析:

      1. 形式:兩個都采用了扁平插畫的表現形式,并且將產品的目標用戶投射到頁面上,產生強烈的身份認同感。
      2. 色彩:上圖采用高飽和度漸變背景,色彩大膽、鮮明,傳遞出年輕、潮流的品牌性格;下圖色調冷靜,應用場景比較普適。
      3. 構圖:兩者均采用穩健的左右分割構圖,它更像是一個價值宣言頁面,極大地降低了新用戶的認知門檻,提升了注冊的意愿。

      三、以場景沉浸為出發點的登錄頁設計

      image.png

      設計解析:

      1. 形式:兩個都通過高質量攝影圖來營造獨特氛圍;上圖傳遞大自然、自由等意象;下圖則傳遞溫馨、舒適、有溫度的服務感。
      2. 色彩:兩者的色彩都源于背景圖片本身,登錄框的配色和背景融合的無比自然、舒適。
      3. 構圖:兩者均采用全屏背景+中心卡片的經典構圖,它通過真實的場景,繞過生硬的文字說明,直接與用戶進行情感對話。

      四、以人物放大展示的登錄頁設計

      image.png

      設計解析:

      1. 形式:都使用了人物放大展示的表現手法,上圖通過多位兒童看書傳遞閱讀氛圍;下圖則通過虛擬角色傳遞潮流與個性。
      2. 色彩:上圖使用高飽和度的童話色彩,營造溫馨、快樂的感受;下圖采用灰色調搭配霓虹黃綠漸變,營造酷炫、動感的氛圍。
      3. 構圖:兩者均采用左右分割構圖,但側重點不同,上圖插畫重在營造氛圍和講述故事;下圖則重在角色與表單平衡,突出個性。

      五、以簡約幾何造型的登錄頁設計

      image.png

      設計解析:

      1. 形式: 均是幾何造型為主的表現手法,上圖采用冷紫漸變,傳遞出專業、穩定;下圖采用暖黃漸變,散發出活力、樂觀。
      2. 色彩: 色彩是這里唯一的變量,但效果截然不同,它完美驗證了色彩在塑造品牌感知和影響用戶情緒上的決定性作用。
      3. 構圖: 兩者都采用了清晰有力的左右分割構圖,左側是強有力的品牌口號,右側是功能清晰的白底登錄框。

      六、高對比的登錄頁設計

      image.png

      設計解析:

      1. 形式:都使用了風景攝影圖,且都內嵌在一個異形容器里,打破了傳統的方形容器造型,比較新穎。
      2. 色彩: 色彩運用非??酥魄矣心康男裕髠裙δ軈^使用無彩色,這種強對比確保了功能區域的操作清晰。
      3. 構圖:采用了最經典且不易出錯的左右分割構圖,左側是純功能性的白色表單區域,右側是激發用戶情感的場景化背景圖。

      七、以全屏插畫風格的登錄頁設計

      image.png

      設計解析:

      1. 形式:都采用全屏插畫為核心視覺,上圖使用色彩鮮明的城市插畫,營造活力都市氛圍,下圖采用紫色調山林夜景,傳遞出神秘氣質。
      2. 色彩:色彩在這里是品牌情緒本身,這種設計強項在于通過視覺瞬間建立情感連接,讓登錄體驗超越功能層面,成為一種品牌體驗。
      3. 構圖:采用中心構圖法,這種設計的視覺記憶點和品牌辨識度非常高,非常適合需要快速建立獨特品牌形象的創新型產品。

      八、打破邊界方式的登錄頁設計

      image.png

      設計解析:

      1. 形式:上下兩個案例都巧用了打破造型邊界的方式,每個頁面元素都特意打破傳統的容器邊界,給人布局靈動的感覺。
      2. 色彩:色彩都使用了低飽和度的色彩,給人高級、穩重、大氣的感覺。
      3. 構圖:采用了經典的左右構圖,打破邊界的圖形方向直指登錄表單,極大地引導了用戶完成注冊和登錄。

      九、玻璃質感的登錄頁設計

      image.png

      設計解析:

      1. 形式:這是最常見的 B 端登錄頁表現方式,設計師都喜歡用這種玻璃質感去表達產品內涵。
      2. 色彩:色彩使用比較干凈、輕盈,給人一種輕松、舒適的治愈感。
      3. 構圖:采用了經典的左右構圖,打破邊界的圖形方向直指登錄表單,極大引導了用戶完成注冊和登錄。

      十、小范圍 2.5D 插畫的登錄頁設計

      image.png

      設計解析:

      1. 形式:這是前幾年非常流行的 2.5D 插畫風格,通過一些 2.5D 元素的簡單組合,精準的傳遞平臺屬性。
      2. 色彩:兩者都采用了藍色主色調,但表達了不同的情感;上圖的淺藍色更具科技感;下圖的深藍色則更顯沉穩、莊重。
      3. 構圖:兩者均采用最經典、易用的左右分割構圖,確保功能表單區域的清晰可讀。

      十一、強質感的藍色科技登錄頁設計

      image.png

      設計解析:

      1. 形式:兩個案例都運用具象的形式將抽象的業務進行了很好的展示,科技感滿滿。
      2. 色彩:主色調采用體現科技感的深藍/黑色,關鍵元素則使用亮藍色和橙色作為點綴,打破了深色的沉悶,創造了視覺焦點。
      3. 構圖:兩者都采用中心聚焦式構圖,將最具科技感的可視化元素置于畫面中央,登錄框作為功能面板懸浮其上。

      十二、以安全信任、金融科技為出發點的登錄頁設計

      image.png

      設計解析:

      1. 形式:兩個案例都通過核心視覺符號高效傳達了產品屬性,質感比較強烈。
      2. 色彩:深藍色電路板背景營造出科技氛圍,金色則提升了頁面的品質感,發光效果和懸浮質感增強了元素的現代感和數字感。
      3. 構圖:左右構圖營造出嚴謹、平衡、可信賴的感受,登錄面板位于黃金視覺區域,確保了功能優先級。

      總結

      通過以上 12 個案例的系統性拆解,我們發現 B 端登錄頁的設計可以有如此豐富的切入點。

      它絕不僅僅是擺放表單的簡單任務,而是一個融合了品牌戰略、用戶體驗、視覺營銷和技術表達的綜合性設計挑戰。

      希望這 12 個切入點的詳細分析,能成為您應對登錄頁設計挑戰的靈感源泉和實用工具箱。

      一個高級的設計,其最高境界是讓用戶感覺不到“設計”的存在,卻能高效、愉悅地完成目標,并對品牌留下積極而深刻的印象。

      轉載:優設

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計APP界面設計、圖標定制、用戶體驗設計交互設計UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

       

      image.png

      8個防錯絕招+5大補救術!這份「微設計」救場指南太實用了!

      清陽 設計思維

      哈嘍,這里是蘭亭妙微UI設計公司,今天分享的是「如何化解錯誤時刻。

      說到用戶體驗設計,大家首先想到的都是“正常場景”:注冊流程順暢、支付順利完成、輸入順利通過。但現實并非如此,用戶總會不小心犯錯誤,系統偶爾也會掉鏈子。但這些“問題時刻”往往最容易被忽略。要是產品沒法幫用戶解決問題,所有錯誤的后果都得用戶承擔,最后只會讓他們焦慮。換句話說,錯誤是用戶體驗的最大危機,也是削弱用戶對產品信任的關鍵節點。

      相關干貨:

       

      一、用“微設計”化解錯誤

      這里的“微設計”比我們常說的“微交互”范圍更廣,包括文案、視覺元素,還有各種反饋設計。這些小細節看似不起眼,卻能精準安撫用戶的出錯焦慮,幫他們重新找回掌控感。

      image.png

      微設計的三個核心要素:

      1. 微交互:比如按鈕點擊時的震動反饋、輸入框實時提示、自動聚焦到目標區域等;
      2. 微文本:簡短清晰的提示,例如 “至少輸入10個字”、“請檢查您的網絡連接”;
      3. 微視覺:流暢的動畫、柔和的顏色、讓人放松的插畫。

      在深入探討具體案例之前,讓我們先來探究一下用戶遇到錯誤的背景和原因。下面簡要總結了用戶出錯的類型、背后的心理,還有哪些場景容易出錯。

      1. 兩種出錯類型:失誤VS錯誤

      在用戶體驗理論中,錯誤分“失誤”和“錯誤”兩種,前者是用戶在執行操作時無意識犯下的錯誤,后者是一開始就想錯了。

      失誤:行為不當

      image.png

       

      目標是對的,但采取的行動有問題。例如不小心點錯了按鈕、著急打錯了字,大多是做熟悉的事時分心、沒留意造成的。

      錯誤:判斷失誤

      image.png

       

      從一開始就誤解了情況。比如看到一個顯眼的按鈕,以為是自己要的功能,結果點擊后才發現不對。這種情況多是因為界面的信息混亂、層級不清晰,呈現的內容含糊不清。

      image.png

       

      通常“失誤”發生在執行階段,“錯誤”發生在規劃階段,但實際中兩者經常一起出現。重點是搞清楚 “為什么會出錯”,并給出解決方案。

      2. 出錯時的用戶心理

      出錯不只是功能出問題,更會讓用戶慌張:“萬一沒法恢復怎么辦?”(恐懼)、“我無法控制這種情況”(無助),甚至 “可能我根本不會用這東西”(自責)。最糟的就是自責——用戶不怪產品怪自己,壓力越來越大,最后干脆關掉頁面、放棄使用。

      所以設計師的任務很明確:別讓用戶背鍋,明確告訴他們“能補救”。先給情緒上的安慰:“沒關系,你可以再試一次。”

      image.png

       

      3. 增加焦慮的場景

      有些時候,用戶的選擇壓力和出錯焦慮會被放大,心里越沒底,越不敢動。

      image.png

       

      操作不可逆:刪除文件、轉賬、重置數據等,一旦點錯就沒法恢復,讓人不敢操作。

      操作反復失敗:連不上網、輸密碼總錯,越試越沮喪,甚至會想 “是不是只有我用不了?”

      尤其是對準確性要求高的場景,比如金融、商務、B2B工具,出錯體驗的設計更關鍵。有時候對于出錯的恐懼,比錯誤本身更影響用戶行為。

      image.png

       

      支付/轉賬:錯誤導致資金損失的壓力以及造成損失的可能性。

      傳輸/刪除關鍵數據:知道沒法恢復,更不敢操作。

      表單反復驗證失敗:失敗的次數越多,就會越沮喪。

      應對錯誤的核心是“雙管齊下”:提前預防 (別讓錯誤發生) +及時恢復 (錯了能輕松補救)。單獨用哪一個都不夠,需要根據場景靈活設計。

      image.png

       

      二、8個設計技巧,提前預防錯誤

      1. 主動限制風險操作

      image.png

       

      從根本上阻止可能出錯的情況,或者用視覺提示幫用戶識別風險。比如禁用按鈕、提供有限的選項、防止重復點擊。某種程度上哪怕稍微限制一點用戶的自由,也比讓他們出錯好。

      image.png

       

      例如訂酒店時,對于有住宿天數要求的酒店,預定的天數少于住宿天數時,無法進行預訂;類似的還有“信息沒填完時,登錄按鈕是置灰的”、“加載時不能點按鈕,避免重復操作”,都是這個道理。

      2. 自動補全&智能建議

      image.png

       

      在搜索框、輸入框里加入自動補全或關鍵詞建議,不需要讓用戶記住全部信息,輸入又快又準。尤其在輸入地址或者比較復雜的內容時,這種方法能大大提高效率。

      image.png

       

      例如在輸入地址時,搜索詞會高亮顯示,并且會可能提供清晰的搜索建議:想搜的是地鐵、公交還是某家店鋪,方便用戶減輕記憶負擔,快速做出選擇;在移動設備中,鍵盤的局限性導致打字失誤的情況頻繁發生,飛書的錯別字自動修正提示,能夠很好地提高輸入速度和準確性。

      3. 將常用選項設為默認

      image.png

       

      對于需要重復做的操作,可以把常用的選項設為默認,幫助用戶少費心。但默認選項不一定永遠是對的,如果存在錯誤的可能性,得讓用戶能檢查修改,不然反而會“誘導錯誤”。

      image.png

       

      例如在外賣軟件中,可以把常用地址加上默認標識,省去了再次添加收貨地址的麻煩。但當默認地址和當前的位置差很遠,超出配送范圍時,購物車中的商品會呈置灰狀態無法進行購買。

      4. 保持內容暫存

      image.png

       

      用戶進行多步驟任務時 (比如注冊),萬一不小心退出了再進來,保持之前填的內容還在。這樣不需要用戶重新填,也不會忘記已經完成了哪些步驟,減少失誤的發生。

      image.png

       

      編輯文章時,內容可以自動保存到草稿箱中。哪怕退出登錄過兩天再進入,草稿箱里的內容都還在,對于用戶來說也是一種很貼心的體驗。

      5. 固定顯示已選內容

      image.png

       

      對于需要記住很多選擇的流程(比如訂酒店),把選好的日期、人數、篩選條件固定在屏幕頂部,隨時能看。這種設計方法允許用戶在不依賴不準確記憶的情況下再次確認信息,從而及早預防錯誤。

      image.png

       

      像Airbnb會把要去的地點、 入住時間和人數這些篩選條件固定在頁面的頂部,讓用戶可以持續查看當前的預訂情況,這樣在找房子的時候會覺得更踏實。

      6. 二次確認不可逆操作

      image.png

       

      對于刪除文件或重置數據這類不可逆的操作,一定要增加 “確認步驟”,進一步確認用戶的意圖。

      一旦出錯無法恢復的操作可能會引發用戶的強烈焦慮,因此需要清晰傳達操作的影響,并通過問題和警告來確認操作,例如:“您確定要刪除xx?刪除后不可恢復,請謹慎操作。”

      但注意不能濫用確認彈窗,過于頻繁的確認彈窗可能會讓用戶在不仔細看內容的情況下,習慣性地點擊“確定”,增大出錯的風險。只在重要且不可逆轉的操作中使用。

      image.png

       

      例如刪除文件時進行二次確認,同時告知刪除后文件的位置、刪除后文件是否可以找回等一系列內容,讓用戶對于刪除的內容有清晰的認知;對于確認后無法再修改的信息,也最好來個再次確認,讓用戶做到心里有數。

      7. 提供實時反饋

      image.png

       

      對于表單輸入這類容易出錯的場景,好的使用體驗是在輸入時就“實時”提供反饋,而不是等所有信息都填完點擊提交之后再提示錯誤。

      比如字符超了、密碼格式不對,立即用紅色文字、錯誤圖標、邊框高亮、震動動效等形式反饋出來,減少重復輸入的麻煩。

      image.png

       

      例如發動態時,如果輸入的標題字數不符合要求,會在標題處有一段反饋提示,提醒用戶輸入符合要求的標題;填寫多個表單時,如果有多個表單未填寫,每個輸入框下面都會有錯誤反饋,而且每條錯誤反饋的內容會根據不同字段而調整,而不是用“請填寫內容”這種模板化的反饋。

      8. 先預覽再提交

      對于操作后不好修改的場景中 (比如發表文章、發布視頻、視頻渲染),可以先給用戶看 “最終效果預覽”。確認沒問題再提交,這樣用戶就能提前發現錯漏,心里也踏實。

      image.png

       

      例如在發布動態的時候上傳視頻封面后,在推薦列表、視頻動態中能提前預覽封面效果,有問題可以及時修改,省去了動態發布后再去修改的麻煩;視頻軟件中渲染一個視頻通常需要幾分鐘甚至幾十分鐘,通過提供“渲染預覽”可以快速檢查錯誤減少不必要的時間浪費。 

       三、5 個設計技巧,幫助用戶從錯誤中恢復

      1. 通過撤銷操作減少損失

      image.png

       

      “撤銷”功能允許用戶立即挽回錯誤,增強掌控感,減輕錯誤帶來的負擔,例如刪錯內容、發錯郵件后,點一下就能恢復。有了這個功能,用戶用著更放心,也敢大膽嘗試各種功能。

      image.png

       

      在花瓣中采集圖片后,會提供一個撤銷的功能,方便用戶快速撤銷采集有誤的圖片;在使用微信發消息、使用郵箱發郵件的時候,也都支持在發出去幾分鐘內撤回,盡可能幫用戶挽回錯誤。

      2. 說清錯誤發生的原因

      image.png

       

      如果錯誤不可避免,需要使用通俗易懂的提示文案告訴用戶哪里出現了錯誤,出現了什么樣的錯誤,而不是用一些模板化的或是含糊不清的提示文案,讓用戶感到困惑。

      image.png

       

      例如上圖中的登錄失敗提示,會明確告知什么地方出現了錯誤、出現多次錯誤后會有什么后果、如何操作能解決錯誤,這才是一個格式的錯誤提示;填寫新增地址信息時,如果手機號碼有問題,會明確提示“手機號有誤”,而不是只說 “輸入內容有誤”。

      3. 提供下一步操作

      image.png

       

      接著上一條,不僅要說清楚錯誤的原因,還要告訴用戶“該怎么做”,引導用戶立即采取行動。例如添加“重試”、“返回主頁” 按鈕,引導用戶回到正確的操作流程里。

      image.png

       

      如果訪問的頁面有問題,可以提供返回首頁或者聯系客服的入口,讓用戶可以繼續探索其他內容;例如蘋果的Face ID連續5次識別失敗后,系統會鎖定面容ID功能,并提示輸入密碼驗證后才能重新啟用。

      4. 自動聚焦錯誤選項

      image.png

       

      通過自動定位和聚焦錯誤輸入項來鼓勵快速更正。發現錯誤后,系統自動定位到出錯的輸入框,縮短錯誤從識別到更正的過程。尤其在那些表單特別多的后臺頁面中,這種錯誤定位的功能還是很有必要的。

      5. 用視覺設計安撫情緒

      利用情感化的視覺設計,例如柔和的色彩、插圖和動效等,提供了視覺上的舒適感,緩解用戶的焦慮和緊張。這不僅是簡單的錯誤反饋,還是展現品牌個性的好機會。

      image.png

       

      比如谷歌瀏覽器離線時經典的“恐龍小游戲”,讓用戶等待網絡連接的同時進行有趣的游戲體驗,能讓用戶沒那么煩躁。

      最后

      總的來說,減少錯誤的根本策略是避免不必要的差異化,并遵循熟悉的界面、交互和設計慣例。這里的“熟悉”不僅是風格問題,更是整個用戶體驗設計的通用標準。

      當然,再標準的設計也沒法完全杜絕錯誤的發生。這時候,貼心的微設計就派上用場了——幫助用戶快速發現錯誤、輕松改過來。

      這些細節,正是體驗設計師存在的價值,也是產品賦予用戶的最大信任。你還有哪些化解錯誤的小妙招呢?歡迎留言咱們一起聊聊~

      轉載:優設

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

       

      image.png

      表單設計:基于選擇的輸入

      清陽 設計思維

      蘭亭妙微UI設計公司分享:在設計學校文藝匯演報名表單時,如何有效地實現基于選擇的輸入?本文探討了隱藏非活動選項與顯示非活動選項的設計方案,分析了頁面級選項、水平Tab、垂直選項等多種形式的優劣及適用場景。

       

      進入正題之前,大家可以先思考一下,以下情形大家會怎么做?

      學校組織文藝匯演,老師、學生、家長可以任意組隊報名表演節目。組隊后,每個隊伍都需要在學校教務系統上錄入信息進行報名。

      假如你是教務系統的設計師,你會怎么設計這個報名表單?

      一、什么是基于選擇的輸入

      在上述案例中,對于“參與人員”這個信息,首先需要確定有哪幾類人參加?其次再具體錄入每一類的具體人員名稱。比如:“三年5班隊”表演的節目有40個人參加,其中只有老師和學生參加,那么老師分別是哪幾位?學生又是哪幾位?

      那么根據對初始問題“有哪幾類人參加?”的回答,要求繼續回答“這幾個人分別是誰?”,就是基于選擇的輸入。

      組成部分

      基于選擇的輸入內容大體上可以分為兩個部分:初始的選擇、選擇之后需要輸入的內容,如下所示。

      表單中基于選擇的輸入類型可選擇的交互形式有很多種,那么在需求過程中,如何選擇最適合的方式去進行設計?

      二、基于選擇的輸入設計方案

      表單基于選擇的輸入場景在B端產品中尤為多見。由于B端產品多為Web端,所以下列分析暫不考慮移動端的情況。

      如果把基于選中的內容需要輸入的選項稱為活動的選項,那大致可分為兩大類:隱藏非活動的選項、顯示非活動的選項。以上三個案例均為隱藏非活動的選項類型。

      1.顯示非活動的選項

      顯示所有未被選中選擇的選擇輸入內容,會導致表單中出現大量無需用戶處理的內容。除非用戶需要這部分信息去輔助判斷選擇選項,否則不建議使用此類方法。

      2.隱藏非活動的選項

      大部分設計方式都會通過隱藏非活動的選項,來降低輸入過程中無效信息對用戶的干擾。具體如何處理初始的選擇和活動選項之間的關系,又可以分為以下幾類:頁面級選項、水平Tab、垂直選項、下拉選擇、單選按鈕下方顯示、單選按鈕內顯示。

      (1)頁面級選項

      把過程明確分為兩步,這可能是解決表單中選擇性輸入問題最簡單的方法。最常見的做法是采用不同的步驟進行表單內容的填寫,如下:

      對多數用戶而言,初始選擇和相關輸入之間的關系明確,但一旦做出初始的選擇,兩者之間的聯系會變得微弱。在第二步進行相關輸入時,無法查看先前進行的初始選擇??瓷先ミ@種方案比在當前頁面完成所有輸入任務的方式更慢。

      但在實際測試中,通過該方案設計的表單,用戶填寫錯誤比較少,眼動測試參數表現也比較好(主要是眼睛固定的次數、總固定時長以及平均固定時長)。

      (2)水平Tab

      通過Tab的形式進行初始選擇的區分,用戶可以瀏覽表單的Tab,進入對應的Tab中進行選擇輸入的部分。例如:飛書的登錄頁。

      Tab不僅作為一組篩選功能,還對選擇之后輸入的內容起到一個明顯標題的作用。但大部分人都熟悉Tab作為導航的概念,對于Tab在表單中的應用可能會存在一定的歧義。比如Tab之間是否互斥?提交選擇是針對表單中所有Tab還是當前選中的Tab?

      對比以上兩種設計形式,如果只從結果考慮用戶的使用情況,水平Tab在測試過程中基本沒有用戶出錯,并且可以快速完成任務。但根據頁面級選項案例的眼動測試數據中會發現,用戶瀏覽整個表單相比上面的方案所需要耗費更多的努力。

      (3)垂直選項

      從水平Tab方案中表現出來的眼動測試結果可以發現,其不符合用戶自上而下的閱讀模式。而垂直選項的方案則彌補了這一缺陷。如下圖所示。

      在選擇選項之后,眼睛不需要做太多的移動,設計更有效率,如下方案例眼動數據所示。

      (4)下拉選項

      相比水平Tab和垂直選項,下拉選項在視覺上沒那么獨特。每一個選項對應一個初始選項,如下圖所示。

      下拉選項的解決方案利用選擇后,輸入的內容在下方特定的位置進行展示。所選選項可作為標題,更好的傳達初始選項的范圍和影響(看具體業務是否需要在表單中映射這個關系),上方案例中的映射關系就比較弱。

      (5)單選按鈕下方顯示

      展示所有選項,根據用戶選擇情況在下方顯示具體需要選擇輸入的內容,如下圖所示。

      (6)單選按鈕內顯示

      與單選按鈕下方顯示的辦法類似,在初始選項內顯示額外的輸入內容。

      三 、各方案的優劣及適用場景

      四、寫在最后

      基于選擇的輸入,在設計方案的選擇中,需要考慮各個方面。

      如果每個初始選項的額外輸入選項數量很多,且同時存在其他需錄入的信息時,那么頁面級選項可能是最佳方案。雖然需要兩個網頁來拆分表單,但至少不會讓用戶產生困惑,也無需懷疑選項之間是否互斥。

      垂直選項和水平Tab兩個方案需要通過交互設計或者視覺設計來規避其互斥問題。

      如果初始選項列表較長(4或者5個以上),并且每個選項都自帶一套基于選擇的輸入,在設計時最好能針對額外選項采用下拉列表和視覺分組。

      如果每個初始選項只有幾個額外的輸入選項,單選按鈕下方顯示或者單選按鈕內顯示是最佳的方案。但容易出現因選項切換而造成的頁面跳動問題。

      就整體而言,隱藏無關的輸入項,可以減輕用戶對表單的負擔,幫助用戶更快的完成表單內容。

      最好能清晰的顯示選項與基于選擇的輸入項之間的關系。

      轉載:人人都是產品經理

       

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

       

      image.png

      蘭亭妙微UI設計公司,實時表單設計指南

      清陽 設計思維

      這篇文章核心講:實時表單驗證不只是技術交互,更是人機心理博弈,從設備適配、場景策略、案例實踐三個層面給出完整設計方法。
       

       

      一、跨設備與無障礙驗證

      image.png

      1. 移動端
        • 痛點:屏幕小、軟鍵盤遮擋錯誤提示,用戶反復試錯
        • 做法:提示放鍵盤上方;加大觸控區;用顏色 / 動畫 / 震動多維度反饋
         
      2. 桌面端
        • 優勢:空間充足,可做非打斷式細膩反饋
        • 做法:氣泡提示、懸停說明、修正后綠色正向反饋,克制不打擾
         
      3. 無障礙
        • 不只用顏色 / 圖標提示,需兼容屏幕閱讀器
        • 給錯誤字段加屬性、提示做語義標記,讓視障用戶可 “聽” 到錯誤
         
       

       

      二、分場景驗證策略

      image.png

      1. 注冊 / 登錄(第一印象)
        • 自動聚焦首字段,默認無警告
        • 密碼用強度條 + 鼓勵語,重名給替代建議

        image.png

      2. 支付 / 商業(防錯止損)
        • 強格式:自動空格、限制非法字符、動態掩碼
        • 智能容錯:提示錯誤細節、輔助修正,降低投訴
         
      3. 高風險(實名認證 / 稅務 / 公積金)
        • 原則:安撫情緒→解釋原因→給方案→告知無影響
        • 顯示進度、保存進度,避免用戶焦慮
         
       

       

      三、國內外案例對比

       
      • 國內(務實安全):支付寶分步驗證、京東智能地址、小紅書實時推薦
      • 國外(友好共情):Typeform 對話式、Airbnb 國別適配、Dropbox 路徑兜底
      • 差異:國內偏失焦驗證 + 強規則;國外偏即時驗證 + 容錯引導
       

       

      核心結論

      表單驗證的目標不是攔錯,而是幫用戶順利完成:跨設備保證反饋可見,分場景匹配用戶情緒,最終提升提交率、降低放棄率。
       

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

       

      image.png

      蘭亭妙微:如何做好 UI 設計|實戰干貨篇

      濤濤 設計思維

      在蘭亭妙微,我們服務過金融、醫療、軍工、智能制造等大量政企與企業級項目,見過太多設計師「軟件很溜、想法很空、落地很慌」。同樣是做界面,為什么有的人只能當美工,有的人卻能拿高薪、控項目、帶結果?

      蘭亭妙微:高級 UI 設計的三大核心特質

      濤濤 設計思維

      好的 UI 設計,從來不止是界面美化,而是品牌、場景、體驗三位一體的系統能力。蘭亭妙微深耕 UI/UE 設計 16 年,服務金融、軍工、醫療、能源、智能制造等多領域,沉淀出一套可復制、可落地的高級 UI 設計方法論。我們認為,真正的高級 UI 設計師,必須具備三大核心特質 ——品牌體系化、場景業務化、體驗心智化,這也是蘭亭妙微所有項目的底層設計準則。

      UI 設計文字規范全解|蘭亭妙微:讓設計 100% 還原落地

      濤濤 設計思維

      在蘭亭妙微多年 UI 設計項目中,文字排版是設計師與前端對接時高頻出問題的環節:視覺稿精致清晰,開發還原后卻錯位、擁擠、層級混亂,反復像素級微調浪費大量時間。

      B端表單設計|標題樣式細節設計

      清陽 設計思維

      B端系統軟件中表單的應用場景非常多,今天蘭亭妙微UI設計公司,就撈點干貨,說說B端產品表單如何設計,用戶體驗會更好。

      從標題、輸入框、布局排版、數據展示四個方面,詳細介紹一下關于表單的體驗設計,目錄如下:

      一、標簽是否加冒號

      設計師A說:不加冒號,用戶不在意,而且占空間…..

      設計師B說:要加冒號,加上可以更好的區分上下文,以及標簽和輸入框的關系…..

      以上A/B設計師說的都有一定的道理,那到底加不加冒號呢?

      遇到問題咱就先調研一波,看一下Win、Mac系統中是否有無冒號。

      Win系統:最新版本不加冒號。

      Mac系統:最新版本設計偏向C端化,不加冒號,13.0.1之前版本有冒號。

      是不是感覺主流的設計是不加冒號呀?

      稍等一下…那在具體B端系統中是有怎樣的應用場景呢?

      以上場景中左右布局,單選/多選組件、標題加內容組件都不適合去掉冒號展示。

      那到底加不加冒號呢?

      可以先說一下答案,加不加冒號對用戶無影響,《Web 表單設計·創建高可用性的網頁表單》中,卡羅琳·賈雷特做過大量測試,最終證明沒有一名用戶留意表單冒號是否出現。

      因此,得出以下建議:

      • 如果你希望系統重表單使用更多的業務場景和對齊方式,請使用冒號
      • 如果你當前已使用有冒號的表單,請保持使用冒號

      如果你新建一個系統,使不使用冒號隨意一旦決定是否使用冒號,需要全部表單統一規則  

      二、表單必填樣式

      用戶填寫表單時,有必填項和選填項,如果表單中多數或全部是必填項,那是否還應該對其標記?

      答案是肯定的,用戶遇到較多表單填寫項時,是需要通過必填標記來評估工作量。下面就介紹一下具體標記必填項的三種樣式。

      ① 頂部統一提示

      填寫表單過長或填寫表單被打斷(移動端常見),就會增加用戶工作記憶和認知負荷,完成任務更加困難,從而降低了用戶體驗。

      ② 文字提示“必填”

      有部分設計師認為紅色“*”會增加視覺噪音,并且重復的紅色“*”會帶來一些認知恐慌,便采用文字提示方式,但這種方式比較占用空間,文字內容過長,用戶壓力較大,用戶體驗降低,不建議使用。

      ③ 紅色星號“*”必填提示

      雖然有設計師認為紅色“*”會增加視覺噪聲,帶來一些認知恐慌,但紅色“*”在互聯網中很常見,用戶熟知其意,已形成固定的視覺語言,并且空間較小,能與標簽文字足夠區分開,相比之下采用紅色“*”必填提示是非常值得推薦使用。

      但是還有一個問題,就是紅色“*”的位置是在字段前還是字段后呢?

      紅色“*”的具體位置有三種位置,如上圖做了詳細展示。

      1. 標題左側:比較常見,用戶打眼一看就能區分出必填項,推薦使用;
      2. 標題右側:比較常見,多配合無號碼使用;
      3. 輸入框右側:現有系統較少使用,由于輸入框形式、長度不統一,會導致難以瀏覽和判斷,不推薦。是否可標記可選字段?

      這不是強制性的,但標記可選字段非必填,確實減輕了用戶思考,提升用戶體驗。  

      三、提示樣式

      用戶最理想閱讀的標題文字數是7±2,當標題文字過長,或不足對輸入項準確說明時,要給出對應的提示文字,幫助用戶更好的輸入內容,常見樣式如下。

      這三種樣式是遞進邏輯,根據不同的文字提示內容和難度,選擇不同的提示樣式。其中對于第二種樣式中,圖標提示的位置還有幾種方式,如下圖說明。

      四、小結

      本文事無巨細的說了一下表單中標題樣式問題,雖然很多是表單設計的一些較冷較小的內容,但也需要設計師沉下心來,打磨細節之處。

      轉載:人人都是產品經理

      蘭亭妙微(藍藍設計)www.payeee.cn 是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計B端界面設計桌面端界面設計、APP界面設計、圖標定制用戶體驗設計交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。

       

      image.png

      日歷

      鏈接

      個人資料

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

      存檔

      主站蜘蛛池模板: 天天综合色一区二区三区| 中文字幕丰满乱子无码视频| 99riav国产精品视频| 99RE6在线视频精品免费下载| 在线看免费无码的av天堂| 久久国产免费观看精品3| 精品无码国产不卡在线观看| 波多野结衣无码视频在线观看 | 亚洲人成无码www| 中文字幕久热精品视频在线| 亚洲国产日韩欧美一区二区三区| 57pao成人国产永久免费视频 | 人妻偷人精品| 成人免费无码大片a毛片| 久久96热在精品国产高清| av天堂最新版在线| 无码av永久免费大全| 日韩无矿砖一线二线卡乱| 丰满熟妇高潮一二三区| 成人网站免费大全日韩国产| 久久精品国产成人av| 午夜免费无码福利视频| www内射国产在线观看| 国产中年熟女高潮大集合| xxx精品| 人人人澡人人肉久久精品| 亚洲VA久久久噜噜噜久久无码| 黑人巨大无码中文字幕无码| 精品视频不卡免费观看| 亚洲人成亚洲人成在线观看| 日本免费一区二区三区日本| 剑川县| 欧美大逼| 精品国产制服丝袜高跟| 精品亚洲综合一区二区三区| 2021亚洲国产精品无码 | 国产极品女主播国产区| 精品一区二区三区无码视频| 国产女人水真多18毛片18精品| 亚洲成片在线看一区二区| 日本精品一区二区不卡|