<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>

          首頁

          10個優秀的UI/UX設計技巧

          seo達人


          一、利用手勢輔助實現快捷操作

          利用手勢交互輔助隱藏式功能操作,可以在不改變當前結構的基礎上實現快捷操作,帶給用戶更加便捷化的體驗。

          夸克 APP 在訪問了多層級頁面之后,如果想要快速回到瀏覽器主頁,點擊返回按鈕一級一級返回過于繁瑣。通過底部導航欄向上進行滑動,可以快速激活返回主頁的操作,手勢輔助實現自動跳轉。該設計解決方案通過手勢輔助隱藏功能操作,提高了用戶對于產品的使用體驗。

          圖片

          圖片

              

          二、點贊設計的情感化探索

          點贊在閱讀類場景中隨處可見,用于表達用戶對內容的認可度而產生的情感共鳴,通過點贊給予贊同。點贊設計的創新已逐步在探索,通過更加情感化的設計表達提高用戶體驗,借助手勢的變化呈現出更有趣味性的點贊設計。

          今日頭條 APP 單擊點贊圖標會隨機性彈出表情化符號,多次點擊會持續彈出更為豐富密集的表情符號,長按則會像模擬持續發射的特效,伴隨著音效和震動帶來“視聽觸”等多重體驗。點贊設計的情感化探索不僅帶給用戶多重感官體驗,也是用戶釋放閱讀壓力的一種情感共鳴。

          圖片 
           

          三、情感化的點贊文案設計

          除了從點贊視覺感官層面進行設計探索以外,眾多產品也在文案提示設計上面進行情感化探索。

          AcFun APP 在對話題等內容點贊時,會彈出溫馨的文案提示,每次點贊都會出現不同的文案。情感化的文案設計提高了話題互動的活躍度,帶給用戶更好的社交互動體驗。

          圖片 
           
           

          四、突破常規的模式切換設計

          設計都在探索差異化的感官表達,如何突破常規至關重要。無論是在布局結構層面還是元素情感化表達層面,設計師都在嘗試更有創新的表達,帶給用戶不一樣的使用體驗。

          Wonder APP 在模式切換上做出了一個新穎的設計解決方案,通過環形卡片設計進行模式切換,可以單擊和滑動進行切換。動態的卡通形象增加了感官體驗,流暢的卡片切換也帶來了不錯的操作體驗,是一個在布局層、視覺感官層、互動層等方面的不錯探索。

          圖片

          [優化輸出圖像]

           

           

          五、特色的簽到展示設計

          簽到設計對于大家來說并不陌生,提高用戶簽到的參與度是大家都在不斷思考和探索的方向。

          AcFun APP 將簽到設計成日歷展示形式,點擊簽到之后彈出,配合日歷運勢的概念來設計,提高用戶的簽到興趣。內容卻不是正式的日歷運勢相關內容,配合趣味化的文案設計,讓用戶會心一笑。視覺感和情感化文案設計的融入,提高了簽到設計的感官體驗,進而提高用戶的參與度。

          圖片 
           

          六、自定義字號提高閱讀體驗

          通過公眾號等自媒體進行閱讀已經成為大家的習慣,不同公眾號編輯內容都會有所不同,字體大小和行間距等沒有特定的規范。官方雖然會有默認設置,但是無法兼顧不同的內容需求。提高小編的編輯體驗和滿足用戶的閱讀體驗,自定義的閱讀調整至關重要。

          在公眾號閱讀文章時,可以通過右上角的功能入口進入“調整字體”。用戶可以根據自己的閱讀習慣設置字體大小,在標準和自定義大小之間切換,提高用戶的閱讀體驗。

          圖片 
           

          七、自選色實現更靈活的個性換膚

          個性化的皮膚主題在眾多產品中已經運用普遍,當用戶體量增加之后,個性化的設置才能滿足不同用戶的體驗需求。

          酷我音樂 APP 在個性換膚模塊中,除了設置多個主題皮膚供選擇以外,用戶還可以通過自選色設置更加靈活的配色風格??梢赃x擇更多推薦的配色風格,也可以通過色環自己調節任意顏色,滿足不同用戶對于感官體驗的需求。

          圖片 
           

          八、自定義圖滿足用戶的創作欲

          對于一些追尋個性化較強的用戶,預裝的自定義設計已經無法滿足他們的體驗需求,激發用戶創作欲的設計迎面而來。

          酷我音樂 APP 在個性換膚模塊中,用戶可以通過“自定義圖”實現更加個性化的皮膚。用戶可以選擇任意拍攝的照片,然后通過透明度和模糊度來調節照片效果,滿足自己對背景效果的要求。針對按鈕的顏色也提供了幾個配色選擇,用戶可以根據自己調節后的背景效果進行搭配。基于更加個性化的需求滿足用戶的創作欲,才能帶給用戶更加人性化的使用體驗。

          圖片 
           

          九、關聯功能疊加設計提高使用率

          為了提高功能的曝光度,直接展示在用戶的視野中是很多設計師的處理形式,但是卻增加了感官層面的視覺負擔。

          幸識 APP 把關聯功能進行合并式的疊加設計,不僅對視覺進行降噪,由于屬于關聯性的操作,用戶更容易通過功能聯想進行使用。當用戶點擊觀看“時間戳”時,底部功能會被替換為“發起”,發起時間戳和觀看本身就是一個流程的體驗。當我們遇到關聯性功能設計時,不一定選擇各自展示,相互疊加或者切換式的交互設計也是不錯的解決方案。

          圖片 
           

          十、趣味性爆滿的點贊設計

          點贊是用戶情緒化表達的關鍵,表示對于內容的認可度和作者的支持度。普通的點贊設計已經無法滿足一些情緒爆滿的用戶,更加趣味夸張的設計在逐步被探索。

          微博 APP 針對點贊設計單擊時,出現表情化的符號彈出,持續點擊或者長按點贊圖標則會出現色彩豐富、表情符號四處爆發的視覺效果。一場趣味性爆滿的視覺盛宴,滿足用戶釋放情緒的最大化需求。

          圖片

          源圖像

           

          小結

          在用戶使用體驗和感官體驗層面探索了這些優秀的案例,希望可以拋磚引玉,帶給大家更多啟發。發現設計背后的思路,總結設計表達的經驗,運用優秀案例的技巧,提高我們的設計解決能力。

          以上總結僅代表個人觀點,如有不足歡迎大家留言補充,我們互相進步。

           
          原文地址:黑馬家族(公眾號)

          作者:黑馬青年
          轉載請注明:學UI網》10個優秀的UI/UX設計技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成

          seo達人


          01 替代重復繁瑣操作的效率插件

          智能填充

          做設計時,同學們一定遇到過這種情況,某些模塊需要用圖片或文字進行展示。

          用單調的圖形和隨意的文字占位不夠真實美觀,手動添加圖片編輯文本又太麻煩,能不能有工具幫我一鍵隨機生成并填充?

          當然可以,「智能填充」插件就是專門解決這類問題的。

          選中任意文本,即可選擇智能填充人名、時間、日期、段落及對話等 9 種不同的預設內容;選中非文本圖層、分組或畫板,就可以智能填充人物頭像、風景、美食等 8 種類型的無版權圖片。

           

          快速復制

          做設計時,很多同學會遇到一個頁面中需要出現多個相同模塊的情況,比如商品列表、視頻頁、相冊等等。

          處理起來也不難,多按幾次 Ctrl+C 和 Ctrl+V 就行。但復制出來的模塊經常重疊在一起,還需要逐個拖拽排版……時間就是被這樣浪費的。

          但其實,這些繁瑣的步驟完全可以用「快速復制」插件一鍵搞定。

          只需做好第一個,選中全部圖層,打開插件,設定好橫向與縱向的復制數量及間距,點下按鈕就能一鍵復制。

          像我演示用的這個即時設計的插件,復制完成后,還預留了按鈕,點一下就能打開「智能填充」,很貼心。

           

          ? 文本拆分

          還有專門用于處理大段文字的「文本拆分」插件,能將一個文本圖層拆分為多個,方便分別設計排版;也可以將多個文本圖層組合為一個重新編輯。

          類似的提高設計效率的插件還有很多,例如:

          「圖標尺寸調整」——可以批量調整不同 icon 及其外框大??;

          「字體替換」——批量替換設計稿中使用到的所有字體,并保持原有文本樣式屬性;

          「查找替換」——能搜索定位文本內容并替換,且不改變原有文本樣式。

           

          02 整合圖標字體的資源插件

          各種各樣的免費或付費的素材庫給我們提供了很多便利,但也不是所有類型的資源,都適合下載文件,再導入使用的。

          比如圖標和字體這兩類,使用頻率非常高,如果每次都需要下載導入安裝,無形中就增加了很多重復工作。

          所以,很需要有一些工具,來讓這兩類資源的取用更加便捷,比如,圖標插件和字體插件。

           

          海量圖標—— iconify、iconfont & IconPark

          現在的圖標庫都能直接下載 SVG 格式,所以不用太考慮顏色尺寸的問題。

          但做設計久了,就會在電腦里存下許多圖標文件,整理起來屬實麻煩,都刪掉了又可惜,萬一哪個還能用到呢?

          這時候,如果安裝幾個圖標插件,就沒有這些問題了。

          點開插件,搜索想要的圖標,選中圖標并修改尺寸和顏色,直接拖拽使用。

          國內常用的 iconify、iconfont 和 IconPark 都已有插件接入。

           

          字體方案——字由插件

          做海報、封面、banner 圖的時候,同學們應該經常會用到很多不同風格的字體。

          但經常會遇到精挑細選并下載安裝了好幾款字體后,發現用在作品里視覺效果并沒有那么好,還得重新找字體并安裝……

          面對這種情況,最省事的方式應該用類似「字由」的第三方字體插件來管理字體。

          安裝字由客戶端后,里面的字體方便查找,點一下就能激活,然后直接在設計時使用,幫我們省去了很多檢索和下載安裝字體的步驟

          這里需要提出的是,Sketch 和 XD、PS 這些本地軟件應該都是支持字由的,在線工具的話,目前只有「即時設計」支持字由,Figma 也是完全沒辦法用的。

          當然,即時設計的字體方案還是值得一說的,其實之前也提過挺多次了,“本地+云端”的多種方案,最大的亮點是:

          1. 個人設計師不止可以使用本地安裝的字體和「字由」的字體,還能免費上傳自己的字體文件到云端和其他人一起使用。

          2. 團隊的版權字體還可以直接上傳到團隊共享庫,所有團隊成員都能隨時在線使用,完全不用下載安裝。

           

          03 提供圖形配色方案的插件

          圖形生成——不規則圖形

          我經常給星球的同學們布置一些作業,而在設計過程中最常用的裝飾元素之一,就是不規則圖形,看起來簡約又高級。

          需要不規則圖形時,最常見的做法是用鋼筆工具自己畫一個,但還有更快捷的方法,用「不規則圖形」插件隨機生成斑點或者波浪。

          這類插件一般包含很多預設方案,點一下就能隨機生成。

          如果覺得隨機“搖”出來的圖形不合心意,還可以自己調節修改。斑點的錨點和曲率,波浪的高度、層數、峰數都支持自定義。

          雙擊生成的不規則圖形,還能繼續拖拽修改形狀。這么一通修改下來,只有復制粘貼才能得到兩個完全相同的圖形了。

           

          色彩使用——漸變色

          同學們在設計作品中,經常會用到漸變色,但是很多同學不擅長調出好看的漸變色,做出來的圖看起來很臟,尤其是顏色跨度較大的時候。

          這種情況下,一個收錄若干經典配色的「漸變色」插件就能幫上大忙。

          如圖我用的這個漸變色插件,就收錄了來自 WebGradients 的 180 種線型漸變配色,可以一鍵快速填充;給出的漸變色方案,也都很具備學習參考的價值。

           

          ? 色彩搭配——圖片取色

          我還找到了一個非常適合用來參考和使用色彩搭配的插件——「圖片取色」。

          優秀的攝影或設計作品中都具有極為豐富且和諧的色彩搭配,而「圖片取色」這個插件可以識別圖片中 5 種主要顏色,方便我們學習配色、汲取靈感。

          用起來也很方便,選中圖片,再點一下「圖片取色」,就能精準識別圖片中配色,并按照顏色占比依次展示。

           

          04 點一下秒安裝/卸載

          今天的插件就先分享這些了,上面的演示我都是用「即時設計」做的,Sketch、Figma 應該也都可以找到不少類似的插件。

          如果想要快速感受一下的話,可以直接打開即時設計,插件廣場里還有很多,安裝卸載也很方便,點一下就行。

          安裝完回到編輯頁面就能直接使用,展開的列表里,每個插件在名字旁邊還配有簡單易懂的圖標,一眼看過去就能更快地定位自己想要的插件。


          總結

          提高效率減少重復操作,到整合常用資源讓取用更順手,再到圖形色彩的方案提供。

          即時設計充分照顧到設計過程中最常見的一些問題,已經能滿足我大部分的需求了。

          除了已有的這些,即時設計還在持續上新,官方還表示之后也會像 Sketch、Figma 一樣開放第三方插件。

          現在只想喊他們快點開放,我已經迫不及待想看看,國內的大神能做出什么樣更好用的插件工具了!

          鏈接我放在下面了,對這些插件感興趣的同學們,可以去體驗一下~

          即時設計插件廣場:

          https://js.design/pluginSquare

           

          原文地址:菜心設計鋪(公眾號)

          作者:菜心

          轉載請注明:學UI網》太簡單了!別人要做一小時的頁面,我用這些效率插件一鍵生成

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          金剛區圖標設計的 10 大風格

          seo達人


          圖片

           

          目錄

          一、晶白風格的扁平突破

          二、磨砂玻璃質感的運用

          三、強化圖標微質感的深入

          四、2.5D 風格的巧妙結合

          五、三維的立體感強化

          六、插畫風格的簡化融入

          七、立足于品牌的圖標設計

          八、造型疊加豐富色彩搭配

          九、動效圖標強化局部差異

          十、主題化圖標風格普及

           

          一、晶白風格的扁平突破

          晶白風格是通過白色質感來實現的,通過對圖標元素進行透明度變化、投影、內陰影、外發光等進行設計,使得更有層次感。

          相較于扁平化的圖標設計來說,晶白風格更有層次感和質感,作為金剛區圖標設計運用非常普遍。除了通過白色不透明度漸變來實現以外,也會隨著背景或者環境色的變化融入色彩渲染,呈現出更豐富的設計細節。

          晶白風格圖標就是通過兩端白色漸變,配合兩端顏色不透明度來進行深淺控制,也可以通過內陰影和外發光等來增強質感。眾多設計軟件都可以實現,靈活性非常高。

          圖片

           

          二、磨砂玻璃質感的運用

          磨砂玻璃質感的設計表現是近些年較為流行的設計趨勢,被廣泛運用到視覺設計的眾多領域。在 UI場景中作為視覺感強化被普遍應用,其中在圖標設計上的表現尤為突出,呈現出了眾多的優秀案例。

          金剛區作為產品架構中的重要組成部分,也是更新較為活躍的部分,對于視覺感的要求非常重要。磨砂玻璃質感的圖標很多產品都會階段性使用,也是因為這一類風格具有典型的特點和視覺張力,能夠形成比較大的視覺差異,帶給用戶不錯的感官體驗。

          磨砂玻璃質感圖標可以通過 Sketch、Figma 等軟件的背景模糊功能實現;如果是 PS 和 AI 等沒有背景模糊功能的軟件,則可以通過模糊度結合剪切蒙版來實現。實現的方法很多,大家可以多多嘗試,這是一類比較容易掌握的圖標風格。

          圖片

           

          三、強化圖標微質感的深入

          圖標設計從寫實到扁平,再到微質感,都在不同的時期進行改變,通過風格的優化避免用戶的視覺疲勞。寫實類圖標視覺疲勞度較大,在年輕化的趨勢中顯得過于繁瑣,而介于寫實和扁平之間的微質感被深入探索。

          微質感的深入可以使得圖標風格突出,質感和層次感強化了圖標的立體空間感,在整個界面中可以形成視覺差異??梢泽w現出模塊的重要性,也是圖標設計感體現的一種方向。

          通過漸變色、不透明度漸變、投影、內陰影等形成層次變化和光影效果,多圖層刻畫來強化圖標質感和層次感。

          圖片

           

          四、2.5D 風格的巧妙結合

          2.5D 也稱之為偽三維,在前兩年非常流行,作為插畫風格延伸出來的,當時 2.5D 插畫被普遍運用到眾多領域。把一個獨立元素作為原子,通過原子的數量分布形成 2.5D 場景。

          將 2.5D 風格結合到圖標設計中,可以使得圖標更容易形成立體感,設計師不會受制于透視基礎的薄弱。無論是 C 端還是 B 端場景中的金剛區圖標都比較適合,很容易基于簡單的立體造型上設計出豐富的變化。比如結合玻璃質感、微動效或者其他設計趨勢均可,設計的駕馭度很高。

          2.5D 風格的圖標很容易掌握,只要繪制好基礎原子部分,就可以演變形成各式各樣的 2.5D 造型??梢酝ㄟ^ AI 軟件的 3D 功能輕松繪制,大部分場景都是基于立方體、圓柱體等基礎造型進行變形。

          圖片

           

          五、三維的立體感強化

          三維類的圖標設計相較于 2.5D 風格來說,空間感和透視角度更加深入,光影的變化更加豐富。圖標設計中的三維立體感強化,對于設計師的要求更高,掌握一個三維軟件需要一定的學習成本。

          隨著 C4D 等三維軟件的走熱,掀起了一股學習熱潮,被運用到金剛區圖標設計中,帶來的視覺效果也是非常不錯的。較強的空間立體感和光影效果,在界面中的視覺呈現尤為突出,也能帶給用戶更好的感官體驗。

          圖片

           

          六、插畫風格的簡化融入

          隨著用戶對于感官體驗的升級,風格特征的差異化體驗至關重要,而插畫風格的融入可以提升圖標設計的特征感。

          插畫風格運用到圖標設計中,需要做簡化處理,可以是插畫的局部元素或者簡化后的小場景插畫。風格多樣的插畫風格也會延續到圖標中,不僅可以使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。

          通常矢量風格的插畫類圖標比較常用,由于圖標占比限制,不合適表現特別繁瑣的插畫風格??梢允俏鼍暗牟瀹嫳憩F,或者是局部元素的插畫表達,這一類圖標風格將會在未來被廣泛運用,以此來提高圖標設計的視覺差異化表達。

          圖片

           

          七、立足于品牌的圖標設計

          立足于品牌做設計,這是設計師需要深入探索的方向,而金剛區圖標設計亦是如此。品牌基因融入到圖標設計中,可以輔助突出產品的品牌感,也能形成設計表達的差異化。

          品牌基因化的圖標設計具備一定的特征性,也是視覺差異化的一種形式。通常的做法有將品牌色全部融入圖標中,或者品牌色作為圖標配色點綴;也可以提取品牌 LOGO 輔助圖形形成基因圖形,融入到圖標造型設計中;也有結合吉祥物來突出品牌感的,融入吉祥物造型、局部圖形、輪廓圖形等;如果圖形角度無法提煉,也有提取品牌文化、服務特征、用戶群體特征、行業特征等,從中提煉關聯性的圖形融入圖標設計中,以此來強化品牌感。

          品牌作為設計的思考起點,不僅可以輸出差異化的設計作品,也能串聯起整個項目設計的規范。

          圖片

           

          八、造型疊加豐富色彩搭配

          如果覺得質感一類圖標表現力比較繁瑣,但是又不想只是簡單的線性或者面性圖標,造型疊加和配色疊加形成的圖標風格算是介于兩者之間的存在。

          通過圖形之間疊加豐富圖標造型,疊加部分配色的調節豐富圖標色彩搭配,形成的圖標風格比較年輕化。視覺效果也是深受年輕用戶的喜歡,帶來不錯的感官體驗。

          這一類風格的圖標可以通過布爾運算設計圖形部分,顏色的疊加效果可以通過圖層樣式實現,也有一些是圖形分割之后進行分別著色的。通常疊加部分的顏色會往更深的方向延伸,大家可以嘗試不同的形式去進行配色,選擇符合主題的圖標配色效果。

          圖片

           

          九、動效圖標強化局部差異

          微動效運用到圖標設計中尤為普及,特別是在金剛區模塊,可以作為突出功能的強化。動效圖標已經成為一種獨特的表現力,相較于靜態來說更有吸引力,也能帶給用戶更加趣味性的感官體驗。

          在金剛區模塊中,動效圖標通常是用于區別特殊功能,或者需要重點突出的服務或者主題活動等。不改變整體圖標的風格,只是動態和靜態的區分,需要個別做動效,形成表現力的差異才能達到重點突出的目的。

          作為設計師來說,動效也是需要掌握的基礎技能,可以提高我們的設計表現力,也能將交互動作表達得更清楚。

          圖片

          圖片

           

          十、主題化圖標風格普及

          隨著情感化設計的普及,金剛區圖標在特定主題節日也會進行氛圍強化,主題化圖標設計越來越多。

          比如在春節、中秋節、國慶節、端午節等場景中,根據主題設計圖標更能體現我們是有溫度的產品??梢允侵黝}元素的融入,或者主題氛圍感的渲染,要嘛就是主題文案的融入,形式已經是非常豐富了。雖然不同節日主題效果各有差異,不過這一類主題化的圖標設計,已經成為非常普及的風格特征。

          除了節日主題以外,根據運營需求也會進行主題化強化,眾多自定義主題活動也會結合到金剛區圖標設計中。這一類視覺表現力比重較大,視覺感統一性較強,帶來的視覺張力和感官體驗都非常不錯。

          圖片

           

          小結

          金剛區在產品中就像百變金剛一樣,隨著眾多因素而變化,是更新迭代較為活躍的。圖標設計的風格也是豐富多樣,本文僅是拋磚引玉,總結了 10 個較為流行的圖標設計風格或者趨勢。

          希望這些案例總結可以加深大家對于金剛區圖標的風格認知,大家也要繼續體驗探索,總結出更多風格特征,強化我們的圖標設計能力。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》金剛區圖標設計的 10 大風格

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          構圖太常規?教你一個過稿率超高的構圖技巧

          seo達人

          很多平面設計作品都喜歡用幾何圖形來進行構圖,比如把畫面布局在一個幾何圖形內,或者用一個幾何圖形與畫面主體元素進行組合。

          圖片

          圖片

          圖片

           

          一、這種構圖有幾大優點:

          1.能使畫面更整體、更聚焦。

          把畫面控制在一個幾何圖形內,就好比用柵欄把羊群圍了起來,各元素可活動的范圍縮小了,外輪廓變得更簡單了,畫面自然會更整體、更聚焦。

          圖片

           

          2.加強畫面視覺沖擊力

          幾何圖形內的圖形集中區域,與幾何圖形外的留白可以形成強烈的虛實對比、輪廓對比、色彩對比等,故視覺沖擊力可以進一步加強。

          圖片

           

          3.增強形式感

          如果畫面的元素比較單一,而且也不是很有創意和特色,那么形式感和設計感往往會比較弱,而如果用幾何圖形進行構圖,通常會對原有的圖形進行裁切或規范,畫面就會變得沒有之前那么普通。

          圖片

           

          4.減少創作時間

          這一點在插畫作品中尤為明顯,如果采用全屏式構圖,那么設計師就得把整個矩形畫布都畫滿素材,但是如果用幾何圖形構圖,那么重點展示主體區域就好,沒有足夠的空間展示太多輔助的元素和場景,所以可以省去很多創作時間。

          圖片

           

          5.便于文案排版

          對于一些文案比較多的畫面,如果畫面布局太慢,那么文案的排版就會比較麻煩,如果把文案壓在畫面上排版,既會破壞畫面的美觀性,也會影響文字的識別性。

          圖片

           

          二、常用的幾何圖形

          1.圓形

          圓形是最常用于構圖的幾何圖形,因為圓形本身就是一個很完美的圖形,美觀、平衡且聚焦性強,圓形與矩形的版面也能形成鮮明對比。

          圖片

          圖片

           

          2.圓環形

          圓環的內部空間比較小,所以適合素材比較多的情況,也常常會配合圓形一同使用。

          圖片

           

          3.半圓形

          半圓雖然沒有圓形那么好看,但是更特別、更平穩。

          圖片

          圖片

           

          4.橢圓形

          由于正圓在很多時候并不適合展現某些畫面,這時候橢圓也是一個不錯的選擇。

          圖片

          圖片

           

          5.圓角矩形

          圓角矩形融合了矩形和圓形的一些優點,既不會像矩形那么硬朗和常規,也比圓形更靈活,更能適應不同的畫面需求。

          圖片

          圖片

           

          6.菱形

          菱形的感覺比較尖銳,適合一些科技屬性比較強的風格和品牌。

          圖片

          圖片

           

          7.三角形

          三角形與菱形一樣,也具有較強的科技屬性,且通常會用到三角形而不是正三角形,因為正三角形過于平穩,缺少動感。

          圖片

          圖片

          圖片

           

          8.其他圖形

          圖片

          圖片

          圖片

           

          三、注意事項:

          1.根據畫面特點選擇合適的幾何圖形

          首先,每一類幾何圖形都有一定的調性偏向,所以要根據自己的產品調性和主體調性來選擇一些氣質合適的圖形,例如母親節、清明節的海報用三角形來構圖就不太合適。

          圖片

           

          其次,如果想把現有的畫面用一個幾何圖形進行剪切,那么這個圖形最好能夠比較完美地保留畫面的主體部分,同時也要保證該幾何圖形內的構圖是飽滿的、平衡的。

          圖片

           

          2.關于“破”的處理要節制

          用幾何圖形進行構圖時,大多數情況下都可以使用“破”的處理方式,即讓圖形內的部分元素打破圖形限制,這可以使畫面看起來更活潑。但也要節制。

          避免過多元素使用“破”的處理,否則畫面容易變得凌亂、不聚焦。

          圖片

           

           

          不是所有采用幾何圖形構圖的畫面都要使用“破”技巧。對于一些很簡約、調性比較高級、畫面是攝影圖片的設計,通常不太適合使用該技巧。

          圖片

          圖片

           

          3.排版可以呼應幾何圖形

          為了避免文字排版與圖形完全是割裂的,我們可以在排版時與幾何圖形形成呼應,比如用文字繞著圖形排版。

          圖片

          圖片

           

          或者是把文字與圖形交叉排版。

          圖片

          圖片

          圖片

          原文地址:蔥爺(公眾號)

          作者:蔥爺

          轉載請注明:學UI網》構圖太常規?教你一個過稿率超高的構圖技巧

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          近期輸出的一些UI設計探索作品

          seo達人

          軟件:Sketch & Adobe Illustrator

          圖片  

          以下作品主要是練習通過 Sketch & Adobe Illustrator 軟件配合實現立體圖標設計,掌握通過色彩的變化營造質感和光感。 

          圖片
          圖片 

          以下作品主要是練習圓柱體的繪制和光影的處理,以此來表現排行榜。配色比較趨向于年輕化,青春活潑的風格探索年輕化的設計趨勢。

          圖片
          圖片 

          這一組作品主要是研究極光風的配色和磨砂玻璃效果的結合,用磨砂玻璃層作為圖標的保護罩,帶來朦朧美的感官體驗。

          圖片
          圖片
          圖片
          圖片 

          隨著網民年輕化的趨勢,UI設計也逐漸趨近于更加青春活潑的風格。探索了一組低飽和度高明度的圖標配色,利用不透明度漸變實現晶白風格圖標。

          圖片
          圖片 

          這是在五一假期前繪制的一個相機 APP LOGO,探索多色環形組合來進行色感營造,利用簡單的內陰影和蒙版工具刻畫效果。

          圖片 

          一組帶給大家好心情的 IP 表情設計作品,超橢圓的造型和青春可愛的風格結合,練習表情設計的能力和光影把控的技巧。情感化設計的技能被逐步放大,也是提高作品亮點和視覺感的一個不錯的方向。

          圖片
          圖片 

          想要休息的時候來了一個靈感,大家都喜歡喝咖啡,我還是比較喜歡喝茶~O(∩_∩)O哈哈~有感而發繪制了一個關于茶的 APP LOGO。

          圖片 

          帶有紋理的球體繪制,你可以想象這是一個瑜伽球。利用 AI 軟件的 3D 功能進行造型繪制,然后利用 Sketch 軟件進行質感細節的刻畫完成。

          圖片 

          這組作品主要是研究 B 端設計的柵格化系統,以及配色風格的嘗試。隨著 B 端 C 化的趨勢,在 UI設計層面的風格探索中,將會變得更為大膽,突破風格定義的束縛。

          圖片
          圖片
          圖片
          圖片
          圖片
          圖片 

          以上是近期輸出的一些 UI設計探索作品,后期將會繼續探索更多設計風格和細節的刻畫。

           

          原文地址:黑馬家族(公眾號)

          作者:黑馬青年

          轉載請注明:學UI網》近期輸出的一些UI設計探索作品

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          7個基礎的用戶體驗設計細節

          seo達人


          1、專注于20%

          maggelato

          你可曾聽說過80/20法則?簡而言之,80%的用戶通常只會使用你網站內容和功能的20%,絕大多數的用戶只是在掃視網站內容,并且只會挑選真正感興趣的瀏覽。

          同時這也意味著,剩余的20%就相當重要了。大多數的點擊將源自于這一區域,它也是近乎完美的內容和互動區域。

          你可以借助數據分析來決定哪個部分是整個網站最被關注的那20%。對于剛剛上線的網站,這個數據搜集的過程可能長達好幾周,隨后再進行調整。

          當然,你也可以通過引導將用戶引流到你希望用戶去的那20%的區域。借助視覺引導和行動召喚設計來引流,用有趣和有意思的設計來營造令人有興趣的區域,讓他們樂于點擊,從而達到目的。

          2、架構式的思維

          goldhill

          設計一個網站和搭建一所房子其實差不多。首先,它需要一個堅實的基礎,然后是能夠承載所有內容的框架,做好后要好好裝飾一下。同樣的思維模式可以套用在網站的設計上。

          更重要的是,你并不需要為此創造出過去從未在框架中出現過的東西,換言之,框架內的素材、組件和我們常見的并無二致。就像導航設計模式一樣,現在的設計都趨于一致,因為這樣的導航好用。

          當網站的整體結構搭建起來之后,可以將相同的思路套用到內容體系的構建上來。主要的正文內容是整個網站內容的基礎,輔以吸引人的標題、圖片,配合上其他的次要元素,整個內容體系可以很快搭建起來。

          3、不要要求太多

          assos

          現如今的世界可以說是由數據所驅動,越來越多的應用開始要求用戶注冊,要用戶提供更多的權限,更多的信息,以期為用戶提供更加個性化的體驗。但是從體驗的角度上來看,要盡量規避這一點。

          站在用戶的角度稍加思考你就明白了。找到一個令你感興趣的炫酷網站,如果要深入了解更多內容,就需要內容,而如果要注冊的話,網站卻需要你提供下面10個類型的信息:姓名、郵件、國家、地區、城市、電話、Twitter權限、個人網站、工作職位、以及如何發現這個網站的。

          那么接下來,你會怎么做?絕大多數的用戶會直接轉身離開,這個注冊信息填寫起來太費勁,體驗太差了。

          那么,如果你當你點擊注冊的時候,只需要一鍵從Facebook或者twitter授權即可,那么你會不會立刻點擊呢?至少從目前已有的數據來看,絕大多數的用戶會這么選擇。

          4、令人愉悅的微交互

          evernote-1

          可能很多時候你都沒注意到,你和各種微交互進行的互動一直都存在。

          ·谷歌日歷彈出框提示你每周例會要開始了
          ·短信提醒
          ·午睡的鬧鐘
          ·微博上的新粉絲和轉發提醒

          這樣的例子我們可以連續不斷地說上一個小時。這些帶有微交互的提醒和動作會推動用戶進行下一步操作,帶來愉悅的體驗,它們不能設計得非常醒目,但是又需要適當地吸引用戶注意。

          這些有趣的微交互的加入讓用戶從中獲得好處。而你需要思考的是,有哪些東西是你的網站或者APP當中,用戶想要立刻知道和獲得、想被提醒的?

          5、甚至幼兒都能輕松使用

          statusshop

          如果要給小孩子設計產品,那么它應該是什么樣子?你可能會更專注于色彩的使用,讓每一個區塊都可以輕松點擊,明顯的標簽,加上拼圖式的連接方式。

          所以,當我們在設計網站或者APP的時候,我們會說這個產品要足夠易用,那么怎么才算得上“足夠”呢?讓小孩子都可以輕松使用,這就叫足夠易用。換句話說,即使是不經常使用網站和APP的成人,也不會存在明顯的使用障礙。

          超大的設計元素和標簽是設計的關鍵因素。這些視覺線索是幫助用戶引導用戶的核心,是整體體驗設計中最重要的部分。大膽的色彩選擇,會鼓勵用戶點擊和探索。

          如果它足夠易用,用戶會繼續嘗試使用和探索。而難于理解操作不便的導航自然會被用戶所嫌棄。如果網站包含太過復雜的媒體和內容,那么不妨從一個設計簡單的首頁開始,幾個簡單的導航點擊將用戶引導到對應的位置。在深入到更復雜的頁面之前,用梳理清晰、簡單明了的分頁讓用戶感到舒適,這是帶來好的瀏覽體驗的不錯解決方案。

          6、輕拍(Tap)還是點擊(Click)?

          espns

          這一點要說的并不是設計問題,而是一個常見的開發代碼的問題。雖然Tap和Click兩者都能在點擊的時候觸發,但是在移動端網頁上使用Click事件 的時候,會有200ms 到300ms 的延遲,所以在移動端上最好替換為Tap事件。在進行響應式網頁設計的時候,一個事件從頭用到尾的錯誤出現得很普遍,但是有太多的移動端網頁在這樣的設計下會有明顯延遲,更惡劣的情況是無法識別,這樣會直接損害到整個頁面的易用性和功能本身。

          此外,移動端上使用 Tap事件的時候,它所對應的按鈕應當相對更大一些,便于小屏上進行交互。

          7、像用戶一樣思考

          justact

          我們一直在說:“像用戶一樣思考”。但是實際的情況往往是,我們很難走出設計者和開發者的思維方式,因為我們的思維方式壓根就和用戶不同,面對每一個交互、每一個元素的下意識反應是不一樣的。

          所以,還是同設計圈、開發圈和產品圈以外的人去聊聊吧,看看他們對于網站和APP的真實反應到底是怎樣的。你可能會在觀察中發現,他們對于產品、對于交互、對于界面的反應和你的預期完全不同。將用戶的真實反饋記錄下來,反饋給項目組,這樣可以幫你打造更好的用戶體驗,創造更優秀的產品。

          原文地址:designshack

          譯文地址:優設

          作者:Carrie Cousins

          優設譯者:@陳子木

          轉載請注明:學UI網》7個基礎的用戶體驗設計細節

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

          seo達人


          shejiyiju_001 shejiyiju_002 shejiyiju_003 shejiyiju_004 shejiyiju_005 shejiyiju_006 shejiyiju_007 shejiyiju_008 shejiyiju_009 shejiyiju_010 shejiyiju_011 shejiyiju_012 shejiyiju_013 shejiyiju_014 shejiyiju_015 shejiyiju_016 shejiyiju_017

          原文地址:站酷

          作者:孔雅軒LineVision

           

          轉載請注明:學UI網》你的設計有依據嗎?詳解用戶體驗設計中的規律與邏輯

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          在不同屏幕和設備上創建用戶體驗設計的8個步驟

          seo達人


          1. 確定核心用戶體驗

          每個產品都有核心的用戶體驗,這基本上是它存在的原因。它解決了人們所面臨的問題,而且為他們提供有意義的價值。關鍵內容和功能的組合代表了核心的用戶體驗。要查找你的產品核心用戶體驗,就要問自己一個問題:“客戶需要完成哪些最常見和最重要的任務?”在你用于產品的每個渠道上支持這些核心任務的本質至關重要。例如,Uber的核心用戶體驗是任何時間隨叫隨到。無論屏幕尺寸如何,此功能都能在每個設備上正常工作實現這一目的。

          Image title

                                       預約出租車是Uber用戶最重要的任務。用戶可以使用Apple Watch完成此任務。圖片來源: Techcrunch

           

          2. 定義產品的設備組

          盡管存在大量不同屏幕尺寸的設備,但絕對不能定位各個設備,可以根據用戶可能關注的任務定義產品的設備組。最常見的設備組是:

          移動手機

          平板電腦

          臺式電腦

          智能電視

          智能手表

          Image title

          不同的設備組在不同的上下文中提供不同的服務:用戶根據他們正在查看的屏幕的類型參與不同的交互模式。例如,手機主要用于微任務,并且具有較短的用戶會話。平板電腦主要用于內容消費,目前不被視為大多數人的工作工具。在了解各種設備類型的基本上下文的假設對于構建一個好的用戶體驗是至關重要。

           

          3. 適應每個上下文使用的體驗

          確定產品的核心用戶體驗后,選擇一組你希望支持的設備組,你需要調整每個組的體驗(對于每個上下文的使用)。上下文的設計在不同設備組設計時尤為重要。

          第一,并非所有功能都在所有設備上都有意義。你需要確定你的產品在多個設備組中使用的不同場景,并設計適合每個場景的體驗。例如,通常移動用戶比電腦用戶想要的不同于產品。以 Evernote為例,可以在多臺設備上使用流行的筆記本產品。其電腦版本針對內容消費進行了優化:

          Image title

                                     用于電腦版本的Evernote應用程序被優化用于閱讀文本和查看媒體。

           

          而移動版本是針對拍攝筆記、照片和捕獲音頻進行了優化的:

          Image title

          Evernote了解移動環境:它利用設備功能,并提供快速保存想法的方式(添加文本筆記,捕獲照片或設置提醒)。

           

          第二,不同的屏幕允許不同的輸入法。以觸摸輸入為例。在設計具有觸摸輸入(移動手機和智能手機)的設備時,設計師會犯的幾個常見錯誤包括:

          小的點擊目標。點擊目標(如CTA按鈕)必須具有足夠大的尺寸。通常至少7毫米是足夠的,但最好使用10mm觸摸目標尺寸。

          Image title

                                                圖片來源:UXMag

           

          將項目過于緊密地放在一起。你應該考慮點擊目標的大小以及它們之間的間距,因為間距有助于分離控件,并給你的用戶界面提供呼吸的空間。建議的間距至少為23pt以防止輸入錯誤。

          Image title

                                                                                                按鈕之間的間距

          使用懸停狀態。但在觸摸屏上,沒有“懸?!?。

           

          4. 最小屏幕設計

          歷史上,設計師一直從事大屏幕到小屏幕的設計工作,這意味著第一個也是主要設計是為了完整的電腦桌面視圖(它具有最多的功能)。只有電腦桌面設計完成后才移植到移動設備和其他設備組。但當設計電腦桌面時,我們通常面臨“廚房水槽”問題:許多功能被添加到產品中,特別是當涉及多個利益相關者時。這并不奇怪,,當你有很多不動產時,添加功能是比較容易。實踐經驗清楚地表明,最好使用移動方法進行設計,并通過與用戶相關的最小屏幕創建應用程序。

          當你首先設計相關屏幕的最小尺寸時,它會強制你決定最重要的。一段時間后,你將采用同樣的方法仔細選擇產品的其他版本,無論是電腦桌面設備,平板電腦還是電視。

          Image title

          在大多數情況下,手機將是相關屏幕的最小尺寸。如果可穿戴設備對你很重要,那么你將需要考慮具有更小分辨率的微型屏幕。

           

          5. 不要忘記大屏幕

          想想大屏幕以及小屏幕,給大屏幕和小屏幕提供同樣的注意力:

          不只是縮小設計,使其適合那些大屏幕。充分利用你可以使用的額外空間。

          Image title

                                                                                                     圖片來源:Wikipedia

           

          確保圖像不會因為屏幕尺寸的放大而失去質量。

          Image title

                                                          左:低質量圖像。右:正確的分辨率。

           

          考慮大屏幕細節。每個設備組都有自己的不同。例如,電視屏幕的設計被稱為“設計10英尺體驗”,因為從沙發的距離來看,與電腦桌面屏幕相比,屏幕上元素的明顯尺寸明顯更小。

          Image title

                                                                           電視的用戶界面元素應大于電腦桌面。圖片來源:Samsung

           

          6. 提供一致的體驗

          一致的體驗意味著應用程序及其在所有屏幕尺寸上的體驗都是相似的。無論設備如何,一致的用戶體驗是成功的全通道用戶體驗的關鍵組成部分之一:

          對未來與產品的交互設定期望,并建立用戶信心。

          一致的體驗使得你的產品在其他設備上與用戶的交互更容易。

          你可以將它們視為相同體驗的方面,而不是將設計定制到越來越多的屏幕和設備中。例如,Google搜索應用在所有設備上提供相同的搜索體驗。

          Image title

                                                           當設計和功能一致時,用戶可以在他們選擇的設備上更快更有效地完成任務。

           

          7. 創造無縫體驗

          跨不同設備組創建無縫體驗對你的用戶非常重要。人們可以自由地在設備之間來回移動,完成任務,或當他們從設備轉移到另一設備時,他們期望他們的產品和服務與他們一起轉移。這意味著用戶不必考慮他們正在使用的設備,環境的變化或上下文的變化,并且可以依賴于設備良好的功能性和獨立于設備的易用性。

          Image title

                            大多數人如何走過他們的一天,他們訪問的主要屏幕。圖片來源:Intercom

           

          根據使用情況,你可能希望確保每個設備上的內容消耗量同步。以Apple Music為例:你可以在Mac上設置播放列表,并在iPhone上即時播放,也可以開始聽iPhone上的歌曲,當你轉到電腦桌面時,你將被拍攝回到你在iPhone上。

          Image title

                                                                            Apple Music可以很好地處理多個設備的同步。

           

          8. 測試你的設計

          在測試環境中有效的并不總是在現實世界中。在實際設備上為實際用戶運行可用性測試,你可以在發布之前發現用戶體驗的問題并解決它。

           

          結論

          在設計多個屏幕和設備時,最好的策略是保持最終的用戶體驗。作為用戶體驗設計師,你必須評估產品的使用時間,位置和方式,以評估用戶的最佳體驗。無論你的內容是什么尺寸的屏幕,用戶都希望在各種設備之間獲得流暢的體驗。

           

          原文地址:ADOBE BLOG

          譯文地址:UI中國

          作者:Nick Babich

          譯者:SKYUI

           

          轉載請注明:學UI網》在不同屏幕和設備上創建用戶體驗設計的8個步驟

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          動效賦能 助力用戶體驗設計

          seo達人


          起源發展

          動畫發展大致經過了三大階段,分別是從傳統動畫(紙筆)>>CG動畫(離線渲染)>>互動動畫(實時渲染)。隨著時代變遷、設備以及技術升級,新的動畫形式以及呈現載體不斷的被創造出來。
          動畫發展的三大階段

           

          傳統動畫注重理論基礎以及扎扎實實的基本功,并且是藝術學院必修課,宮崎駿的早期的動畫就是傳統的手繪動畫。每一張都是純手繪的作品,所以我們看到宮崎駿的動畫會有完全不同于純工業的動畫的感覺。

          CG動畫是隨著電影行業與游戲行業一并發展起來的,由于電影的工業化程度太高,技術積累也越來越深厚,所有游戲使用的工具與技術偏向電影那一套,但不同的是電影是離線渲染的,一部短片渲染幾千個小時都算很正常。而游戲與電影不同,實時渲染必須保證幀速率,所以游戲行業最重要的技術核心就是改進游戲引擎。
          互動動畫想必大家更加熟悉,也就是游戲、web/app、VR/AR/AI、新媒體這些領域的動畫,這篇文章我們主要講的就是Web/App動畫。
          初期蘋果Mac桌面文件夾的打開與關閉

           

          從初期的MAC電腦到現在的iPhone X 不過短短的幾十年,產品設計中動效的運用已經獲得了巨大的進步。動效其實對于用戶體驗這個大專業來講是一種新的學科,隨著我們的設備的硬件條件越來越好,動效才被支持的越來越好,可實現的難度也才越來越低。
          交互動畫里有一部分依然是歸為傳統動畫的,比如說Loading/插畫動畫/載入動畫等等。這些可以動畫需要多關注迪士尼12大動畫原則(節奏&時間、運動曲線、預備動作、夸張、擠壓&拉伸、次要動作、慣性、關鍵幀動畫&連貫動畫、動作表現力、感染力、角色個性),但是另外一部分則是扎根于產品設計的“交互”中。
          CG動畫與交互動畫的區別

           

          CG動畫更加注重片子所表達的故事的完整性以及趣味性,大部分運用的都是超現實的手法,時長一般都5s以上,只需要開動腦洞只要軟件技術能實現都可以發揮出來。
          而交互動畫更注重的是動效的合理性和可用性,動力學需符合真實的物理世界,還要注重整個產品內的動效的統一與協調。一般持續時間都很短在1s內,大部分動畫在200-500ms內完成。整體來說動效都相對簡單,不會太復雜因為要考慮技術可實現性。

           

           應用場景

          這里我們只針對我們互聯網產品設計講一下交互動效的應用場景,我總結了以下七大應用場景,分別是圖標動畫、界面交互、插畫動效、HUD大屏、汽車系統、項目包裝、品牌宣傳等等。

           

          圖標動效

          一般來說圖標動效適用于App或者web產品中,單個持續時間在100ms左右,根據圖標的復雜程度以及實際使用的場景最長時間也不超過400-500ms。圖標動效更注重微弱的變化帶來的趣味性以及流暢性,常用于狀態反饋以及導航引導,通過小小的變化可以為產品體驗增色不少,優秀的還可以給用戶留下深刻的印象。

           

          界面交互 

          一方面界面交互動效可以讓人對產品產生深刻的印象,甚至是帶來驚喜,另一方面表達了界面之間的交互過程,吸引用戶的注意力。通過減少預判誤差、增加連貫性、強調敘述、清晰關系四個方面來增加產品的可用性。

           

          汽車系統 

          汽車系統的用戶界面以及動效一般都來說比較有科技感,動畫會更加的酷炫。本質上來說汽車系統其實跟我們日常用的產品是一樣的,由于行業定位的不同以及用戶使用場景的不同造成了這些差異。

           

          插畫動效 

          適用于App的引導頁、運營活動、空狀態頁面、錯誤頁面,展示型網站等等。在產品設計中插畫動效一般有2種實現形式,一種是視頻或者動態圖片直接加載即可,另外一種就是開發同學通過技術手段來實現,SVGA、lottile、apng等等。

           

          品牌宣傳

          http://mpvideo.qpic.cn/tjg_3563468614_50000_27353420971e4cc9bfc680ecff137bc3.f10002.mp4?dis_k=77967b65644a687675ed4f1eb1920a8c&dis_t=1568711387
          這是韓國一家咨詢公司Plus X做的一個App的宣傳動畫,這里說的品牌宣傳更像是一個產品的解析以及意義的傳達,更輕量化、片長更短、制作技法也相對簡單一些。

           

          HUD 

          HUD可能很多同學都不知道是什么,給大家科普一下。HUD(Head Up Display)又叫平視顯示器,最開始呢是運用在航空器上的飛行輔助儀器。平視的意思是指飛行員不需要低頭就能夠看到他需要的重要資訊。平視顯示器最早出現在軍用飛機上,降低飛行員需要低頭查看儀表的頻率,避免注意力中斷以及喪失對狀態意識(Situation Awareness)的掌握。因為HUD的方便性以及能夠提高飛行安全,民航機也紛紛跟進安裝,汽車也開始安裝。后面延伸到像大家在科幻電影里面看到的那種智慧大屏,以及政府機關等等我看看到的那種藍色動態LED大屏都屬于HUD。

           

          項目包裝 

          https://v.qq.com/x/page/r0824uenul0.html
          上面的視頻是騰訊的ISUX部門2018項目包裝的視頻,當時這個視頻上線后,各大公司的UED部門競相模仿,這個項目包裝里面有很多項目都用到動效設計,包括禮物動效,表情動效、插畫動效、logo演繹等等,這說明動效設計在互聯網產品設計中的應用已經相當的廣泛了,作品本身的效果加上簡單的動畫包裝就可以做成一個動態的作品集,對于宣傳團隊是一個很不錯的點,個人作品集也可以按照這個思路來做,肯定也會有很不錯的效果。

           

          設計語言

          設計語言是指導統一產品設計的大腦,所以了解設計語言對于我們無論是做界面還是做交互設計以及動效設計等等都有很大的指導性作用。
          上圖中的6個是國內外比較知名的設計語言系統,大家應該或多或少了解一點,推薦大家有興趣可以去看看他們的設計系統,相信會對你們有很大的幫助,對幫助構建你的個人設計體系也有很大的參考作用。
          這里我們以Material Design為例進行講解,給大家介紹一下這套設計語言以及設計語言內的動畫模塊在我們的工作中是如何運用的。
          Material Design,是由Google在I/O 2014大會上推出的全新的設計語言,其靈感來自與真實物理世界及其紋理,包括真實物理世界如何反射光線和投射陰影,通過材料來重新構想紙張和墨水的一種介質。

           

          其主要目標是:
          創建:創建一種視覺語言,將經典的優秀設計原則與技術和科學的創新和可能性相結合。
          統一:開發單一的底層系統,統一跨平臺,設備和輸入方法的用戶體驗。
          定制:擴展Material的視覺語言,為創新和品牌表達提供靈活的基礎。

           

          基本設計原則:
          大膽,圖形,有意:Material Design以印刷設計方法為基本指導:排版、網格、空間、比例、顏色和圖像。即創造層次、意義和焦點,讓觀眾沉浸在體驗中。
          動效有意義:通過微妙的反饋和連貫的過渡,集中注意力并保持連續性。當元素出現在屏幕上時,它們會轉換和重新組織環境,交互產生新的轉換。
          基礎靈活:Material Design系統旨在實現品牌表達。它與自定義代碼庫集成,允許無縫實現組件,插件和設計元素。
          跨平臺:Material Design使用跨Android,iOS,Flutter和Web的共享組件跨平臺維護相同的UI。
          Material Design的要解決的問題以及設計原則大家應該都了解了,我們針對設計語言內的動效有意義做一下延伸,讓大家對動畫有一個再深入一些的了解。

           

          那么Material Design動效的用途主要有以下四點:
          層級關系:通過動效反映父級元素(收件箱)與子級元素(收件箱郵件)之間的層次結構關系。
          狀態與反饋:動效提供及時的反饋和用戶操作狀態。
          用戶引導:動效為用戶如何執行操作提供有用的建議。
          個性化:動效為產品設計提供可更多的趣味性、個性以及吸引力,對品牌的提升和認知有很大的促進作用。

           

          了解了設計語言的動效模塊,相信大家應該有一個系統的認識,在方寸之間進行動畫設計,考慮的就是毫秒之內,而在毫秒之內最應該考慮的就是速度,研究發現,在界面設計中最合適的動畫時間為200-500ms之間,時間太短,用戶難以感知,時間太長,用戶又會覺得整個過程太緩慢不夠流暢。
          當然了根據設備的不同動畫內容的不同,動畫持續的時間自然也是不相同的。動畫時間的長短與動畫路徑的遠近是成正比的一般。另外平臺的不同,動畫持續的時間也是不相同的,在pc端內的動畫要比移動端的動畫持續時間普遍少50%左右,這是因為平臺的屬性所造成的。但是要是單純的做裝飾動畫是可以單純發揮的,不用遵守上面的幾個原則,所以進行動畫設計的時候都需要考慮到具體的場景以及具體的需求,靈活運用。
          說完了時間,我們來說說跟時間息息相關的動畫曲線,我們都知道在幾百ms內表現出動畫的特點是有點難度的,所以精細的運動曲線對我們就顯得格外重要,這里我總結一下Material Design內提到的幾個常用的動畫運動曲線,大家有興趣可以去Material Design的官方文檔內詳細查看:
          上述的幾個運動類型以及動畫曲線我們在產品設計內經常會用到,希望大家打好基礎,靈活運用。
          我們知道任何一件事情都有存在的價值和必要,動畫也不例外,如果動畫沒有體現出他應該有的價值,那么做的再好看也只是僅僅局限在了好看這一個層面,下面我們就看看動畫到底能在產品設計中帶來什么樣的價值。

           

          動畫價值

          有時候現代科技產物使用起來非常復雜,但是其實“復雜”本身沒有好壞之分:不好是因為沒有處理好這個復雜所以產生了“混亂”,所以應該被批評的不是復雜而是因復雜所產生的混亂?!萍{德·諾曼

          優秀的動效可以幫我們解決產品設計中的很多問題,可以從用戶體驗的五大要素來進行價值的拆解:

           

          戰略層

          戰略層本質上來說大部分設計師其實是接觸不到的,當然接觸不到戰略并不能代表我們不需要了解,作為設計師我們必須了解公司對產品的戰略定位以及期望,也必須要了解用戶的目標和心理預期。戰略層是整個產品的核心也是底層,所以單純來講,動畫在這一層面上可以發揮的余地是是不多的,因為更多的這一層更加關注意識形態的戰略思考。

           

          范圍層

          范圍層是通過戰略思考來思考明確產品的大概功能和內容,有很多產品的功能復雜,交互繁重,內容很多,在這種情況下動效就派上了用場,我們可以嘗試通過動效來解決內容過載,優化交互模塊,擴展產品內容功能范圍。

           

          結構層

          這一層主要確定產品的功能結構以及層級,主要設計用戶如何快速,準確的觸達某個界面完成某個任務,要考慮用戶體驗地圖,用戶整個的任務路徑,簡單來說就是用戶要做什么事情,如何做,做完之后應該干什么,如果能對動效巧妙的運用,就可以做到引導用戶,練習上下流程的作用,降低用戶理解成本,提搞產品的操作效率,提高產品的可用性和易用性。

           

          框架層

          從這一層開始,UI設計師接觸的內容逐漸多了起來,大家也會更加熟悉工作的內容以及范圍,這一層主要體現在優化頁面布局,確定元素擺放位置,涉及到具體的信息、界面、導航設計等等。通過利用格式塔,柵格,設計語言等方法確定產品功能具體頁面內容布局,我們可以通過動效來進行輔助設計,例如強化元素的位置、顏色、大小,優化頁面的切換、跳轉的流暢度以及自然度等等。

           

          表現層

          表現層具體涉及到視覺、聽覺、觸覺的體驗設計,也是做為視覺設計師、UI設計師發揮最多的一層,在表現層動效的展現形式會多種多樣,這里不展開講解,大家應該都明白。在表現層加入適當的動畫能夠提升產品趣味性,加強用戶與產品的情感鏈接,增加用戶對產品的友好度。

           

          未來發展

          5G

          5G時代已經到來,5G的普世將會為科技發展帶來更多的可能性,眾所周知5G的速度是4G的百倍,那么意味著我們的設計的動畫會加載的更快,動畫文件的大小限制將會被打破,另外也可以在某些領域的產品內設計更復雜更酷炫的動畫。

           

          人工智能(AI)

          它是研究、開發用于模擬、延伸和擴展人的智能的理論、方法、技術及應用系統的一門新的技術科學。該領域的研究包括機器人、語言識別、圖像識別、自然語言處理和專家系統等。在我們日常生活中運用的包括不限于人機對弈、模式識別、自動工程、知識工程等等。所以未來在這些領域內,我們能參與到的動畫設計必然會更多樣,形式也會更豐富,挑戰也會更大??赡軙粩嘤行碌膭赢嬓问揭约霸O計方法被創造出來,讓我們拭目以待。

           

          虛擬現實(VR)

          是20世紀發展起來的一項全新的實用技術。虛擬現實技術囊括計算機、電子信息、仿真技術于一體,其基本實現方式是計算機模擬虛擬環境從而給人以環境沉浸感。隨著社會生產力和科學技術的不斷發展,各行各業對VR技術的需求日益旺盛,VR技術也取得了巨大進步,并逐步成為一個新的科學技術領域。相信在未來的工作中必然會慢慢的接觸到VR界面設計以及動畫設計,并且我相信未來會逐漸的變成主流。

           

          參考資料

          material.io/design/motion
          https://www.zcool.com.cn/article/ZODIzMzky.html
          https://zhuanlan.zhihu.com/p/27114894

           

          原文地址: 小凱的設計筆記(公眾號)
          作者:小凱君
          轉載請注明:學UI網》動效賦能 助力用戶體驗設計


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司



          你想要的,用戶體驗設計中的心理學

          seo達人


          變色龍效應/鏡像效應

          圖片

          俗話說,“有樣學樣(Monkey see, monkey do)”,包括人類在內的靈長類動物都擅長模仿。這個詞表示無意識鏡像或模仿我們周邊人行為的狀態。根據我們在產品方面的經驗,我們進行的互動具有親密性和即時性。

          你有沒有試過聽了朋友說的話之后又說給對方聽?這是變色龍效應的完美例子。

           

          啟動效應(Priming)

          圖片

          指由于之前受某一刺激的影響而使得之后對同一刺激的知覺和加工變得容易的心理現象。我們半夜三更看了電視的恐怖電影之后,跟看喜劇相比,屋子里面聽到的任何吱吱聲或者噪音更有可能讓你毛骨悚然、心驚肉跳。

          啟動效應會塑造我們對環境的行為和反應,而且往往是有效的捷徑,讓我們可以迅速做出決定。這也是一種有效的說服工具,已經廣泛應用到產業的營銷和廣告領域。

           

          馮·雷斯托夫(Von Restorff)效應

          圖片

          德國精神病學家和兒科醫生海德維?!ゑT·雷斯托夫(Hedwig von Restorff)在1933年提出的理論。馮·雷斯托夫有一次實驗,涉及到讓受試者觀看一系列相似的物品。結果他發現,如果其中某個很特別的話,那么相比其他物品,受試者就更容易回憶起這件物品。

          馮·雷斯托夫效應又叫做隔離效應(isolation effect),或者新奇效應(novelty effect),其預測是當存在多個相似的對象時,跟其他有所不同的那個最有可能被記住。

           

          序列位置效應

          圖片

          該理論由赫爾曼·艾賓浩斯(Herman Ebbinghaus,著名的艾賓浩斯遺忘曲線也是他的發現)提出。它描述了序列中項目的位置是如何影響回憶的準確性的。

          這種效應是指記憶材料在系列位置中所處的位置對記憶效果發生的影響,包括首因效應和近因效應。系列開頭的材料比系列中間的材料記得好叫首因效應或者首位效應;系列末尾的材料比系列中間的材料記得好叫近因效應或新近效應。

          用戶往往最容易記住系列中的第一項和最后一項。

          把最重要的信息放到開始和結尾。把最不重要的信息放在中間,這是吸引用戶注意力的高效方法。

           

          格式塔原理

          圖片

          在格式塔原理之下,派生出了很多的其他原理。我們會在下面進行簡要討論:

           

          負空間:

          圖片

          在設計周圍留白,從而創造出一塊大于其各個部分之和的區域。用最簡單的措辭來說,格式塔理論是基于這樣一種思想,即人腦會下意識地把各個部分組織成一個系統,從而創造出一個整體而不是一系列的離散元素,通過這樣來簡化和組織包含有很多元素的復雜圖像或者設計。我們的大腦天生就是為了看清結構和模式,從而更好的理解我們生活的環境而構造出來的。

           

          相似:

          圖片

          在格式塔里面,相似的元素不管彼此是否靠近也會在視覺上進行分組。分組可以按顏色、形狀或大小進行。相似性可用來將可能彼此不相鄰的東西聯系在一起。

           

          連續性:

          圖片

          不管實際畫出來的線條如何,人眼在觀看線條的時候都會按照最平滑的路徑想象。當目標是引導訪客的眼睛朝特定方向看時,這種連續性會是很有價值的工具。

           

          閉合:

          圖片

          這條原理反映的是人會把設計或圖像缺失的部分自行腦補,創建出一個整體來?;蛘哒f得簡單點,在Adobe、Sun Microsystem、NBC、USA Network等的logo中就可以看到復雜的形狀。

           

          相鄰性:

          圖片

          這條原理是指元素之間的距離如何。在UX設計當中,運用相鄰性是為了讓用戶將某些事物組合到一起。通過把它們放在一起,用戶就會感覺它們是相關的。

           

          圖形與背景關系:

          圖片

          跟閉合原理類似,這條也利用了負空間。我們的大腦會區分出圖像前景的對象。設計師如果想要突出某個焦點時,用這條這真的很方便。

           

          共同命運律:

          圖片

          這條原理是指,沿同一個方向移動的元素本身會被視為一組。如果我們看到一群鳥朝特定的方向飛行,我們就會把它們組合在一起,并將它們看作是單個刺激物。

           

          認知負荷

          指在一個人的工作記憶使用的腦力綜合。是指你為了完成任務需要消耗的腦力。

          認知負荷是表示處理具體任務時加在學習者認知系統上的負荷的多維結構。

           

          ??硕?/strong>

          以英國心理學家威廉·埃德蒙·??耍╓illiam Edmund Hick)命名,其理論指出當選項增加時,下決定的時間也增加。一個人做出決定所需的時間取決于他或她可以選擇的選項數。因此,如果選擇的數量增加,則做出決定的時間將對數增加。

          決策所需的時間隨著選項的數量和復雜性增加而增加。

          圖片

           

          菲茨定律(Fitt’s Law)

          圖片

          這條定律規定,任意一點移動到目標中心位置所需時間與該點到目標的距離和大小有關,距離越大時間越長,目標越大時間越短。

          獲得目標所需的時間取決于到目標的距離以及目標的大小。

          可以利用這條定律來影響互動按鈕的轉化率,尤其是用手指操作的移動設備上的設計,可以把希望互動的按鈕設計得更大一點,把不希望用戶點擊的按鈕設計得小一點,更難點中一點。用戶任務/注意區域與任務相關的按鈕之間的距離應盡可能的短。

           

          美即適用效應

          圖片

          這條指的是用戶往往會認為有吸引力的產品更實用。大家往往會相信看起來更好的東西用起來也會更好——就算實際上效率和效能并沒有提高。

          用戶往往會把美觀的設計看作是更實用的設計。

          對視覺設計的積極情緒反應會讓他們對可用性方面的小問題更加寬容。

           

          雙重編碼理論

          這一理論是由心理學家佩維奧(Paivio)提出來的,他強調在信息的貯存、加工與提取中,語言與非語言的信息加工過程是同樣重要的。佩維奧(1986)指出:“人的認知是獨特的,它專用于同時對語言與非語言的事物和事件的處理?!崩秒p重編碼系統可以讓用戶更容易記住我們網站上的重要內容。

          我們會根據你對現實世界的體驗和感知為腦中想到的文字建立視覺形象。一想到“體育”,我們的大腦就會自動想到球的形象,運動員的形象。通過將文字跟圖像配對,可以更容易記住東西。

           

          直覺檢查

          我們一般不會用價值數千美元的眼動追蹤軟件或者腦電圖來判斷設計是不是有效。但是5秒測試是個強大工具,用它就可以確定你的設計是不是一看就明白。

          所謂5秒測試,就是讓受試者觀看網站或應用5秒鐘,然后回答有關主題和設計的問題。如果用戶的答案或者留下的印象跟你的設想不一樣,那就說明設計沒有達到原先的目的,需要繼續改進。

           

          說服心理學

          圖片

          這條原理來自羅伯特·西奧迪尼(Robert Cialdini)的著名著作《影響力:說服心理學》(Influence: The Psychology of Persuasion),里面列舉了類似互惠、一致性、社會認同,權威以及稀缺性等原理。

          這些原理往往決定了我們在社會當中的行為方式,我們可以用它們來識別人類行為。

          互惠:這條原理是說人都不喜歡虧欠別人。如果別人給了他們什么東西的話,他們應該會覺得有責任給予一定程度的回報。提供免費的電子書,博客文章,播客或其他免費內容,然后換取用戶提供的電子郵件地址,這就是現實生活當中互惠的好例子。

          權威:權威這條原理說的是我們大多數人都意識到自己沒辦法在每一件事情上都是專家。我們最好的選擇是依靠專家的證詞。所以,我們允許專家和任何特定議題的“權威”人士影響我們。大家往往會對高水平的專家和權威人物的話言聽計從,因為覺得他們值得信賴。如果跟成功公司能扯上關系的話就會經常被提及,好建立一定程度的尊重和可信性。

          一致性:這條原理說的是大家一般都希望自己行為跟自己的決策過程保持一致。西奧迪尼曾經進行過一項研究,他讓兩組志愿者挨家挨戶去詢問房主愿不愿意在自家前面的草坪上立一塊寫著“小心駕駛”的大廣告牌。

          第一組的做法就是簡單粗暴直接上門問。而第二組是先做一個初訪,請求房主在他們前面的草坪放一塊很小的標志牌,“做一位安全的駕駛員?!?

          結果第二組的成功率高出450%。這就是(承諾與)一致的一個例子,因為房主會覺得自己有義務在這種情況下保持一致性。

          社會認同:大家未必總能知道自己為什么會這么做。大家是不是都在跳舞?如果是的話會有更多的人跟著跳。大家是不是都在看那個視頻嗎?是的話會更多人會點擊它。是不是每個人都在買你的產品嗎?是的話,你想攔都攔不住。在電子商務的實踐當中,我們使用的網站會社會認同(比方說點評、評論和推薦)來吸引其他用戶,并引導他們做出購買決定。亞馬遜有“購買這個的客戶也購買了那個”的提示,希望強化你跟商品的關聯性,讓用戶認為“如果別人需要它的話,那我也需要它”。

          稀缺性:在塑造行為的原理方面,這是我的最愛之一。稀缺性原理是說,如果東西有限的話,大家就會更想得到它。能得到的人越少,吸引的人就越多。

          為什么有的商店會推出限量版服裝?這就是原因,這樣可以吸引更多的顧客。

          變化盲視(Change Blindness):指觀察者不能探測物體或情景所發生變化的現象。

           

          記憶限制

          圖片

          記憶未必永遠可靠。我們對信息的存儲方式會被我們的想法、感知信念以及周圍環境所重構。

          我們的工作記憶能力大概就只有10到15秒,一次只能記住3到4個東西。

          研究表明,大家往往會制造出錯誤的記憶,要么會記住了沒有發生過的事情,要么就是記得的東西跟實際不一樣。由于記憶具有提示性和可塑性,所以根據大腦的習慣或心智模式來進行設計就非常重要,因為這樣會更容易記住。

          盡可能為用戶提供幫助和反饋,并提供撤銷選項,以減少用戶犯錯時的沮喪情緒。讓體驗個性化,好迎合我們用戶的喜好。

           

          單純呈現效應(Mere Exposure Effect)

          圖片

          單純呈現效應是指圖片、符號、數字、聲音等外部刺激信息只要經常暴露在人面前,就能增加人們對其喜歡程度的現象。這種社會心理會發生在我們所有人身上,我們在不連續的時間段內見到某人的次數越多,我們覺得這個人討人喜歡或迷人的可能性就越高。這種效應有時候又被叫做熟悉定律。

          了解單純呈現效應及其機制,會讓你在轉化率優化的工作中具備重大優勢。更多的呈現會帶來熟悉感,進而帶來舒適感,從而讓轉化率優化整體上得到顯著改進。

           

          色彩心理學

          圖片

          色彩也是影響人的選擇和行為的主要因素之一。我們經常會發現兒童玩具顏色鮮艷,女孩玩具往往是粉紅色的。這方面研究的主要思想是色彩對用戶的感知有很大的影響。

          所以,作為設計師我們應選擇能夠傳遞含義與正確信息的色彩。

          紅色。跟熱情、強烈或攻擊性的感覺關聯。同時是好和不好的感受,比如愛、自信、熱情、憤怒等的象征。

          橙色。充滿活力的暖色,給人以興奮的感覺。

          黃色。幸福的色彩。象征著陽光、喜悅和溫暖。

          綠色。大自然的色彩。給人以來平靜和新生的感覺。另外,也可能用來表示經驗不足。

          藍色。一般用來表示企業形象。往往表現出冷靜的感覺,但是作為一種冷色,也跟距離與悲傷有關。

          紫色。由于很多國王都穿紫色的衣服,所以長期以來就與皇室和財富聯系在一起。紫色也是代表神秘與魔力的顏色。

          黑色。這種顏色有很多含義。往往跟悲劇和死亡相關聯??梢源碇唇庵i??梢允莻鹘y的,也可以是現代的。一切都取決于怎么用,以及跟哪些顏色一起用。

          白色。意味著純潔和純真,以及完整性和清晰度。

           

          本能反應

          我們一般是從大腦負責本能的部分得到這種反應,本能反應的速度比我們的意識要快得多。本能反應會導致我們用了一下產品后就愛上了它。這些反應植根于我們的DNA之中,所以很容易預測。

          作為設計師我們就是要通過設計制造出視覺上極其出色的美感印象。為什么一個東西在用戶眼里好看,以及為什么他們是我們的目標受眾,他們的需求是什么,這些都不難猜測。

          用戶體驗設計的概念根植于認知和行為心理學,那是人類與機器交互的藍圖。當然,本文仍還沒有涵蓋到所有的設計心理學原理。但是,作為設計師,我們還需要觀察和理解最終用戶,并且加深對用戶的理解與共鳴。在產品開發過程中,了解用戶的互動、行為和情感可以增加更多的價值。

           

          原文地址:追波范兒(公眾號)

          作者:terechen

          轉載請注明:學UI網》你想要的,用戶體驗設計中的心理學

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

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

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司




          日歷

          鏈接

          個人資料

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

          存檔

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