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

          首頁

          在VR當中,尼爾森10大設計原則是否依然適用?

          資深UI設計者

          這篇文章出自著名的尼爾森諾曼集團(nngroup),也是著名的尼爾森十大設計原則的提出者。文章作者 Alita Joyce 在這篇文章當中深入探討了尼爾森十大設計原則虛擬現實設備中的具體應用,對于正在探索VR中 UI 設計的同學而言,有著非比尋常的價值:

          對于界面,現在已經不再僅僅局限于傳統意義上的網頁界面和移動端 UI 了,從廣泛意義上來說,虛擬現實,增強現實,這些界面同樣開始在一定程度上開始普及和應用了。Jakob Nielsen 的界面設計 10 大可用性啟發式是否依然適用?今天的文章,希望能夠給你答案。

          這篇文章將會重新探討在 虛擬現實 的應用場景之下的 10 種設計啟發式,而主要的測試設備用的是 Oculus Quest 頭戴式虛擬現實設備。

          注意,文中所用到的截圖來自 3D 的虛擬環境,在 2D 環境之下查看的時候,它的陰影效果和視覺畸變會顯得比較不太正常,但是實際效果并非如此。

          1、狀態可見性原則

          系統應該在合理的時間周期內,給予及時的反饋,讓用戶能夠了解正在發生的事情。

          清楚地呈現當前的系統狀態,能夠促進產品的可信度和可預測性。

          在 Oculus Quest 的主要導航當中,采用的是通用的菜單設計,左下角會始終顯示相關設備的電池電量的狀態,而這三個狀態分別代表的是左右控制器和頭戴設備本身。每個點代表的是 25%的電量,當你將光標移動到上方的時候,可以看到更為具體的電量百分比。這種信息呈現的方式,將會直接影響到用戶在日常使用時候的決策。

          在VR當中,尼爾森10大設計原則是否依然適用?

          同樣的,在虛擬寵物交互游戲 Bogo 當中,心型的圖標將會一直以明顯且易于理解的方式,告訴你你需要積累多少能量才能進入下一個階段的冒險。一旦圖標被填滿,就可以繼續。

          在VR當中,尼爾森10大設計原則是否依然適用?

          2、環境貼切原則

          設計應該以用戶熟悉語言和方式來傳遞信息,而不是使用專業術語。

          絕大多數人幾乎沒有在虛擬現實中進行操作的經驗,僅有在現實當中交互的經驗,而這些經驗大都是基于真實的數據和物理規則來的。所以,用戶需要根據現實世界中的心智模型來預測 VR 世界中的用戶交互,而這是非常合理的。而事實上,由于虛擬現實和真實世界在維度上的相似和可遷移性,相比于2D設計師而言,3D設計師更容易實現經驗上的關聯。

          Immersed 是一種虛擬現實的工作環境,它讓用戶在咖啡館和會議室這樣大家比較熟悉的環境之下進行協同合作。在這種熟悉的環境之下,用戶可以在白板上集思廣益,就像在現實世界當中一樣。不過在這個數字化的環境之下,絕大多數的交互邏輯和現實世界類似,還有一些交互則是更為數字化的,比如可以進行鎖定和解鎖。

          在VR當中,尼爾森10大設計原則是否依然適用?

          3、用戶可控原則

          用戶經常會出現錯誤的操作,用戶需要有明確的「出口」來幫助他們終止不需要的操作。

          身陷虛擬現實的環境之下,可能會是非常沮喪的。通過「返回」或者「退出」這樣的按鈕,快速地結束讓自己不適的狀態和體驗。

          比如在電子游戲 Beat Saber 當中,可以自定義和隨機生成角色形象,即使不小心點擊了死亡按鈕,同樣可以通過點擊「取消」或者「返回」按鈕來消除錯誤的操作,恢復之前的狀態。

          在VR當中,尼爾森10大設計原則是否依然適用?

          而在ESPN的應用當中,當提示用戶使用 Comcast 或者 Hulu 等供應商帳號來登錄的時候,用戶路徑是單向的,如果用戶改變主意想要折返回去換一個方式登錄,會發現再也無法進行選擇。在虛擬現實的環境之下,類似的狀況會更加令人沮喪,后退按鈕將會是用戶進行折返的主要方式,否則他們可能會選擇直接關閉硬件。

          4、一致性原則

          用戶不會因為術語感到迷惑,不需要懷疑不同的情況是否意味著同樣的事情,設計和體驗遵循著平臺的規范和行業的范例。

          對于你的 APP 或者網頁而言,你的用戶將會把絕大多數的時間和精力投入在你的產品之外的地方,因此,你需要盡可能遵循通用的設計標準和邏輯,來貼合用戶的通常習慣。違反這些通用的邏輯,會增加用戶的認知負擔。

          切換式開關是一種非常常見的、幾乎在所有的數字界面中都看到的一種開關。在虛擬現實環境下,其實也非常常見。用戶可以在兩種互斥的選項之間,做出選擇,比如打開或者關閉開關。在Gravity Sketch 這個3D繪圖工具當中,本來應該設計成成切換式撥動開關的按鈕,被設計成為一個滑塊,帶來的體驗是非?;靵y的,增加了不必要的交互成本。在設置界面當中,如果用戶想要打開網格的選項,需要先單擊按住這個選項,然后拖動,這樣的交互涉及到2個不同的維度,比起日常的交互要更加費力,并且無法滿足絕大多數用戶對于這一功能的期望。盡管在這些設計功能的選取上,并不夠優秀,但是起碼 Gravity Sketch 的內部,整套設計系統是一致的,并且在視覺設計上保持著高度的一致。

          在VR當中,尼爾森10大設計原則是否依然適用?

          在VR當中,尼爾森10大設計原則是否依然適用?

          和 Gravity Sketch 不同,Oculus 當中的撥動開關遵循著設計標準。

          5、防錯原則

          正確的錯誤提示信息是非常重要的,但是好的設計會盡量提前防止問題發生。要么消除容易出錯的情況,要么盡量在用戶提交某些操作之前,提供確認操作的選項。

          考慮到虛擬現實交互本身的特殊性,用戶無法在移動的時候看到現實世界的狀況,因此通常會設置一個安全范疇,避免撞到或者被絆倒。

          通常用戶需要預先設置一個監護人和運動的邊界。在 Oculus 當中,當用戶在操作過程中接近預定義的監護人或者邊界的時候,會提示用戶安全距離和范疇,確保體驗的可靠和安全。比如人在 Vader Immortal 這個游戲當中,當用戶即將超出范疇的時候,會出現如下提示:

          在VR當中,尼爾森10大設計原則是否依然適用?

          這些信息通常會:

          • 巧妙的鼓勵用戶盡量移動到相對更開闊的區域
          • 在游戲的時候強調安全,避免物理傷害,防止出錯

          同樣的,在國家地理的 VR 程序中,如果用戶即將離開安全區域,他們會推送安全提示,以此提示用戶不要離開區域范疇,否則會丟失活動進度:

          在VR當中,尼爾森10大設計原則是否依然適用?

          6、易取原則

          通過讓元素、操作、選項盡可能可見,最大限度降低用戶的記憶負荷。用戶不必記住全部的信息,借助設計,讓用戶可以在需要的時候獲得必須的信息,或者可以快速檢索獲得。

          人類的短期記憶是非常有限的,在虛擬現實環境之下,交互的情況可能會更加復雜。不要讓 VR 用戶去記大量的額外信息,避免過重的信息負擔。

          所以,通常大家會使用工具提示來幫助用戶了解特定按鈕和圖標的功能。有意思的地方在于,Oculus 中,有過多的圖標對于用戶而言都是全新的,導致系統經常因為過多的工具提示占內存而導致內存不足。通常,用戶可以通過懸停在特定圖標上,查看對應的工具提示,不過這樣依然會需要用戶不斷去記憶各個工具和按鈕的功能。

          在VR當中,尼爾森10大設計原則是否依然適用?

          相比之下,在國家地理的 VR 程序當中,會盡可能促進用戶去識別功能,而非是提供說明,讓用戶去記憶,盡可能直觀地將標簽和圖標一起展示,讓用戶直接理解,而無需看解釋。

          在VR當中,尼爾森10大設計原則是否依然適用?

          7、靈活高效原則

          好的產品需要同時兼顧到新手和資深用戶。新用戶對功能需求明確清晰,老用戶則更需要高效。產品不應僅僅迎合某一種用戶,應該允許用戶針對頻繁的操作進行定制化處理。

          虛擬現實和傳統的 UI 界面有所不同,但是同樣必須同時兼顧到新老用戶。良好的初始設定對于每個用戶都很重要,但是應該提供快捷方式和定制化功能,來確保有經驗的用戶可以按照自己的需求來進行優化。

          在VR當中,尼爾森10大設計原則是否依然適用?

          Firefox Reality 為用戶定制了一個專門的虛擬現實瀏覽器,用戶可以根據自己的偏好來定制瀏覽器的窗口大小。

          在VR當中,尼爾森10大設計原則是否依然適用?

          8、簡約原則

          不要包含不相關的或者低頻次的信息和交互,頁面中每多一個冗余的信息,都會降低關鍵信息的可見性。

          虛擬現實界面可能會做得比較復雜,那么如何優選出最重要的元素就顯得非常重要了。比如 Youtube 的 VR 應用提供了 360 度的環繞視角和優先級極高的搜索引擎和常用標簽頁。

          在VR當中,尼爾森10大設計原則是否依然適用?

          而 Pokerstars VR 的菜單設計則顯得混亂而分散注意力,在游戲過程中,打開這個開關,會顯得特別的雜亂,甚至影響操作:

          在VR當中,尼爾森10大設計原則是否依然適用?

          9、容錯性原則

          錯誤提示信息應該以通俗的語言來表達,指明問題,給出解決方案,而非提供錯誤代碼。

          清晰有效的錯誤提示信息是相當重要的。不幸的是,在 Firefox Reality 當中,如果用戶無法使用語音命令,那么無法收到 Firefox 提供的建設性意見。在使用過程中,程序一直無法理解提供的語音信息導致一直提示「請再試一次」。目前尚不清楚這種問題的根源在哪里,但是它們提供的錯誤信息幾乎是沒有幫助的。

          在VR當中,尼爾森10大設計原則是否依然適用?

          Pokerstars VR 則通過新手訓練的方式,提供主要的游戲交互,其中復雜的手勢可能是絕大多數用戶所不熟悉的。如果用戶一直無法正確使用手勢,那么系統會引導用戶使用另外的易于實現的非官方的手勢,來達成相同的效果。這種工作流程能夠幫助用戶識別錯誤,并且能優化、適應病解決問題。

          在VR當中,尼爾森10大設計原則是否依然適用?

          10、幫助和文檔

          系統最好通過合理的設計讓用戶無需閱讀文檔就能進行正常使用,但是另外還得提供文檔以防萬一,并且內容應該是易于被搜索的,針對問題告知用戶具體的步驟。

          虛擬現實場景下通常包含大量的交互,對于很多用戶而言,這些交互可能是復雜的,不熟悉的,在這個時候,有文檔能夠幫助用戶解決問題,重回正軌。

          Immersed 為用戶提供了快速可訪問的幫助文檔,并且提供了包括視頻教程、問答、文檔說明等多種形態的支持。當你在VR 的瀏覽器中訪問的時候i,能夠看到組織結構良好的文檔信息和關鍵詞系統。

          在VR當中,尼爾森10大設計原則是否依然適用?

          結語

          在虛擬現實應用當中,不合理的用戶體驗設計會阻礙本身的發展潛力。無論你認為 VR 是被高估了的技術,還是真正意義上的未來,它都一直堅定不移地往前發展。從用戶體驗的角度上來說,VR 還有很大的增長空間。盡管作為用戶界面而言,2D和3D有著顯著的差別,但是根本上,用戶體驗的原則和啟發式則是相通的。

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

          文章來源:優設  作者:Alita Joyce

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

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

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




          2022年LOGO設計新趨勢

          seo達人


          01.重復擴展

          這種風格的logo會從核心元素中重復擴展出一系列遞減片段,擴散得同時又給人不斷消散的感覺。就像在池塘里扔了一塊鵝卵石湖面泛起漣漪,經常會讓人聯想出繁殖、擴散、增值等等意思。這種風格通常會用單色表達,重點突出圖形的變化。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          s

          02.星號

          另一種流行是關于星號和星號衍生圖形的元素,星號在拉丁語中的意思是小星星。無論是五角、六角或是八角、這個符號元素都會給人留下深刻的印象。太陽、星星、花朵、火花,星號的衍生圖形可以表達的意思比你想象得更多。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          a

          03.四邊形組

          對四邊形進行四等分,作為一個容器或者說框架來進行設計很容易表達多樣性而同時又具有統一的秩序。但是要注意內部元素的簡化和整合,否則設計會散亂而牽強。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          04.轉換路徑

          這個風格很有趣,很難去定義,但是你一看就能懂了,它的特點很明顯。往往就是伴隨著一個路徑的轉變,可能像一條扭轉的絲帶。通常可以表達連續性的同時又具有轉換性的意味,就像某個重大時刻或者是一個關鍵的轉變,總之代表一個意義非凡的時刻。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          05.

          對于設計師來說,沒有比圓形更基本的圖形了,兩個圓形相減得出的圈是十分簡單的操作,但是更是一種經典的組合。它可以代表永恒、完美、統一、循環、洞、通道等等,結合漸變或是其它形式的設計,又可以呈現出一種新的意義??傊@個形狀所蘊涵的能量還有很多很多!

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

           

          原文地址:設計師深海(公眾號)

          作者:設計師深海

          轉載請注明:學UI網》2022年LOGO設計新趨勢

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

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

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

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


          老板說作品沒有設計感,這10個優化技巧簡單有效,你一定要知道

          seo達人



          1、善用黑白

          沒有想法?沒有好的配圖?那么就只需要用到萬能的黑色和白色,就可以迅速獲得一個具有正確構圖的“抽象主義設計”。在作品中善用黑白將幫助你理解平衡、留白以及如何使用文字和幾何圖形。

          讓我們快速看一個例子,黑白的運用對作品的展示簡單而有效,看起來就很高級。

          圖片

           

          2、保持畫面平衡

          我喜歡用我自己發明的“東西”來測試我的設計,我稱之為“平衡方案”。這是一個黑白的內容塊方法,我會用簡單的幾何圖形來代替內容。

          我的這個方法是讓黑色塊蓋住元素,然后計算左右的黑色面積,大致相等的話,就視為平衡。如果把這個原理應用到界面中,會得到這樣的結果:

          圖片

          用黑色矩形替代主要內容,灰色是次要內容。顯然你必須靠眼睛觀察,但其實我們也可以直接計算。左側區域的黑色矩形面積之和為(236×138)+(934×132)+(674×44)+(313×69) = 207109px,右邊的大矩形面積為(446×446) = 198916px。他們之間的差別很小,誤差只有3.9558%

          我現在在設計之前不用去計算,經過多年的練習,這種意識就變成了自然而然的事情,因為你的眼睛會感覺到不平衡。

          (彩云注:關于視覺平衡,這里其實講的是視覺面積要大致相同,人眼才會感知到平衡。正好彩云在上一篇文章《為什么你的設計總感覺不舒服?很可能是視覺平衡沒有做好》中有分享更全面的畫面平衡知識,一定要讀一讀了。)

           

          3、給作品增加背景

          我在前面那個例子中是用了一個灰色的背景來展示設計作品,但其實可以嘗試不同的元素,這有助于增加畫面空間感和背景效果。

          但要注意,在一個真實的網站中,頁面周圍可能沒有這么多多余空間,所以這只是一個作品展示技巧。

          圖片

          在上面這個作品展示中,咖啡豆給人的感覺是有深度和有品質的。

           

          4、使用規范字體大小

          不用浪費時間整天去測試尺寸。我建議段落文字尺寸大約是14-18pt,副標題是24-36pt,標題可以用更大一些的字號(我個人是習慣用96-144pt)。Figma的默認大小非常適合排版。

          上面的尺寸看起來太小,這也正常,因為你在手機上看到的圖,在電腦上全屏看就是正常的。

          注意:有些字體比其他字體大或小得多。你應該使用像Roboto這樣的標準字體,如果字體大小跟14-18pt的Roboto差不多,那么它是完美的正文字體。

          圖片

          段落18,導航24,標題96

           

          (彩云注:我建議剛入行不久的小伙伴,比如不知道網頁規范,移動端規范,一個比較快且行之有效學習規范的方法就是去截圖大廠的應用,網頁和APP都可以。然后,對著截圖直接量就好了,記住人家在做界面的時候,字體用多大,什么顏色,間距,字號等等。記住這些參數,至少不容易出錯了。之后,在自己項目中自定義規范,關于設計規范如何制定我之前也專門寫過文章,想了解這塊知識的一定要去看看《原來設計規范要這樣理解,早知道就好了!》)

           

          5、增加z軸

          如果你有一些透明的圖片,可以利用它們來設計一些3D圖層。如果你沒有,你可以使用remove.bg ,網頁版AI自動摳圖,神器!

          作為CSS中的Z-index,你可以將透明圖片放在其他項目的后面或前面,給人一種三維的錯覺。這對增強設計感來說,是非常有效的。

          讓我們看看我使用這種技術的一個簡單設計。

          圖片

          鳥嘴巴從綠色背景中出界到黃色背景中,強化了整體的視覺沖擊力。

           

          6、 使用高級淺色

          明亮的顏色很棒,但沒用好的話,往往會導致激進的設計和糟糕的畫面。此外,淺色設計(性冷淡設計)如今非常流行,所以讓我們開始嘗試顏色選擇器的一個新區域。

          圖片

          在這個紅框范圍內可以快速選到一些比較好的顏色

          圖片

          圖片

          兩種配色都沒有啥問題,這是一個審美的問題,但如果你想要表達一些更高級的設計感覺,可以嘗試淺色。

           

          7、打造呼吸感

          在我看來,大的留白比太少的留白要好。雜亂滿檔的設計很糟糕, 呼吸感可以通過多種方式獲得:

          1. 讓背景大面積保持可見
          2. 善用間距,避免出現文字墻效果
          3. 使用不會引起太多關注的圖片
          4. 精簡文字,保留朗朗上口的短語
          圖片

          圖片

          更大的留白(在上圖中指的是黑色區域)會顯得更加高級。

           

          8、加入噪點

          通常當我們思考設計時,我們想到的是干凈、流暢、清晰的概念。但太干凈的畫面會讓人感到不真實,缺乏質感。

          在設計中,噪點是一個很好的朋友,尤其是當你想給你的網站有一個優雅或藝術的外觀時。此外,應用一個微妙的噪點讓畫面能有一個電影級的外觀,這種處理手法非常適合用在視頻和動態網站中。

          你可以使用Photoshop在白色背景上創建2-4K大小的雜色-高斯分布的紋理,然后將它放到頁面的最上層。

          圖片

          整個網頁中都增加了一些噪點,這讓畫面整體擁有更強的質感。(這里噪點的效果比較微妙,小圖可能看不清,放大可以看到噪點效果)

           

          9、使用漂亮的字體

          其實有很多設計的比較糟糕的字體,尤其是那些預裝在我們電腦上的字體??梢詮木W上找到很多優秀的第三方字體,但是要小心:很多字體都不是免費的,沒有授權就使用它們可能會給你帶來麻煩。不過,別擔心,可以從這個網站中找到很多免費的字體 https://alternatype.net

          有很多不同的字族和風格,但總的來說,我把它們分為三大類:

          1. 襯線字體
          2. 無襯線字體
          3. 正文字體

          常用的襯線字體,如Abril Fatface, Playfair Display, Volux, Chalga等。

          無襯線字體包括Metropolis、ITC Avant Garde、Redwing、Takota、Gotham….

          圖片

           

          10、使用幾何圖形

          這可能是最難使用的技巧,但如果使用正確,它定會大放光彩。

          使用幾何圖形有助于加強概念和布局中的順序,甚至不需要配圖。找到合適的幾何形狀是困難的,我至今仍然不能很好地掌握它。

          一個好用的技巧是將文案中的字母、數字和標題作為幾何形狀:讓它們變得巨大而巧妙,或者使用一些特殊的字母作為形狀(A很管用)。(這個技巧非常實用,彩云經常在一些視覺內容較少的頁面,用一個大的幾何圖形比如大寫的字母作為底部背景,用很淺的顏色,看起來視覺上就能更豐富了。)

          圖片

           

          本文翻譯已獲得作者的正式授權(授權截圖如下)

          圖片

           

          原文地址:medium

          作者:Lorenzo Doremi

          譯文地址:彩云譯設計(公眾號)

          譯者:彩云Sky

          轉載請注明:學UI網》老板說作品沒有設計感,這10個優化技巧簡單有效,你一定要知道

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

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

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

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




          游戲UI設計項目分析–狼人殺

          seo達人



          圖片

          狼人殺作為聚會必備推理類桌游非常火爆,“一入狼坑深似海,從此節操是路人”。

          一局APP自研時下最火的線上桌游【一夜狼人殺】,這款桌游不同于以往邏輯推理版狼人殺,沒有夜里死亡,適合休閑娛樂,滿足每個人的參與感,更像是真相探索游戲。

          本文以制造積極情緒、打造體驗峰值為設計目標,設定游戲世界觀,構建游戲故事背景,繪制精美插畫,賦能魔力特效,打造標桿小游戲。解密小游戲設計秘籍,接下來讓我們揭開小游戲設計的神秘面紗吧。

          圖片

          1

          故事背景-設定世界觀 代入故事情境

          歡迎來到一夜狼的世界,夜幕降臨,一群身懷絕技的冒險者們準備在幽暗的森林里度過一夜,明天即可到達森林中心,那里的古堡中有古老家族遺留下的寶藏和數不盡的財富。但隊伍中一直隱藏著狼人和他的同伴,他們準備在今晚發動襲擊,伺機奪取寶藏。幸存的幾位冒險者在夜里暗中施展絕技,要在到達古堡的前一天,揪出隱藏許久的狼人,以保證能夠順利取得寶藏……

           

          游戲設計-情景化設計 體驗游戲樂趣

          結合故事背景設定,以易用性原則為基礎,加入情景化設計,在【觸發期】制造驚喜感,合理布局,明晰操作,快速上手游戲;【興奮期】代入沉浸感,黑白場景切換,沉浸游戲;【結束期】凸顯成就感,高光時刻,強視效感知,勝負判定。

          圖片

           

          美式輕寫實風格,以游戲背景與角色設定為依托,提取古堡、巖石、沙漏等關鍵元素貫穿整個游戲界面設計。

          圖片

           

          卡牌設計-精進主美視覺 刺激感官神經

          卡牌作為整個游戲的靈魂,代表玩家的身份,同時也會做成實物卡牌周邊,作為獎品發放給玩家。身份角色設定:共計9個角色,分為三大陣營。好人陣營:預言家、守夜人、搗蛋鬼、強盜、失眠者、酒鬼;狼人陣營:狼人、爪牙;第三陣營:皮匠。

          人物形象根據角色職業技能進行設定;設計風格為強氛圍感的美式魔幻風格,突出卡牌氛圍感并保證人物清晰度,角色比例選擇展示腰部以上,角色以正面和四分之三面為主,角色的姿態和樣貌根據角色設定具體設計;三大陣營以邊框和氛圍顏色做區分,同陣營邊框(除道具外)不變;卡牌設計包含底框、邊框、角色,道具設計在邊框頂端兩側,根據角色替換。

          圖片

          圖片

          卡片設計拆解

           

          圖片

          三大陣營設計

           

          圖片

          圖片

          圖片

          圖片

          卡背設計

           

          動效設計-制造積極情緒 打造峰值體驗

          運用動效手段在游戲的關鍵節點打造峰值體驗,刺激用戶游戲情緒,快速帶入游戲人物和情節。

          [觸發期]-[情緒帶入階段]

          引發好奇心,極具儀式感的動畫(發牌和確認身份)推動用戶快速進入游戲氛圍,感知游戲。

          [沉浸期]-[情緒沉浸階段]

          流暢的操作體驗和反饋、場景轉場動畫提升游戲沉浸感與趣味性。

          [結束期]-[情緒滿足階段]

          通過整場的懸念鋪設,在最終的結果公布緩解來到情緒的高峰時刻。

          圖片

           

          游戲體驗情緒變化曲線

          a.情緒代入階段

          儀式感渲染-模擬牌桌發牌,卡牌掉落的過程,表現卡牌質感和厚度在現實世界中的感受,身份確認動效添加強烈的反轉效果刺激用戶,不同陣營不同的色彩傾向強化對抗感知。

          圖片

          [優化輸出圖像]

          圖2-2.gif

          圖3-3.gif

          圖 4-4.gif

           

          b.情緒沉浸階段

          游戲體驗沉浸感-流暢簡單的操作體驗和環節轉場動畫明確游戲進度,降低游戲難度給玩家帶來的焦慮情緒,強烈的操控感與燒腦懸疑玩法結合,使游戲體驗心流曲線趨于專注、樂趣、享受。動效平緩削弱視覺刺激保證玩家的專注。

          圖片

          游戲體驗心流區間

          圖5-5.gif

           

          場景切換

          白天黑夜場景用日月升起和場景氛圍的變化提示玩家環節的轉換,在平緩的游戲感受中自然的進入下一環節,沉浸在游戲線索思考和角色代入中,仿佛一切變化都是理所當然而不會因為意料之外的事件發生導致分心。

          圖 6-6.gif

          圖 7-7.gif

           

          c.情緒滿足階段

          游戲體驗情緒高峰時刻-經過正常的懸念鋪設,最終在結果展示環節用強烈的光感和卡片破壞動效,引導用戶產生強烈的成就感和刺激感。并在此環節中游戲情緒達到了高峰時刻。

          圖8-8.gif

          圖 9-9.gif

           

          動效如何落地?

          動效設計過程中運用了粒子插件、輝光插件,以及一些偽3D的技法。為了保證落地效果,技術使用游戲引擎開發,設計師采用拆解組合標注的方式交付研發-動效標注(代碼實現,如位移、簡單粒子效果)+序列幀&MP4視頻。最終達到了80%還原度。

          [優化輸出圖像]

           

          寫在最后

          作為第一款自研游戲,我們分為三條線:UI、主美、動效,緊密協作,聯合研發同學還原設計效果。游戲上線后,取得了一定的熱度,大大提升了一局的日活躍量。后續我們會繼續將業務目標與設計目標相結合 ,逐步迭代,提高游戲體驗。

           

          原文地址:百度MEUX(公眾號)

          作者:文娛平臺用戶體驗

          轉載請注明:學UI網》游戲UI設計項目分析–狼人殺

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

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

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

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



          聊聊上周很火的設計系統“兩兄弟”

          seo達人


          圖片

          圖片

          Semi Design 是針對抖音的中后臺產品線進行研發的設計系統,其目的也是為了解決 抖音 一系列的中后臺產品的效率問題。

          而 Arco Design 是基于 字節跳動 所有的中后臺產品,其前身是 Byte Design 升級而來,能夠看到二者的定位是截然不同,一個是基于抖音產品,一個是基于 字節 這家公司,因此在后續很多內容的不同,根本也是因為定位所造成的。先說說這兩個系統的具體功能。

          圖片

           

          主題風格配置平臺:

          當看到這個工具時,其實是非常激動,作為設計師,對于一個設計系統樣式上的細微調整早就已經深惡痛絕,如果可以,自己絕不想通過前端之手進行“實現”,但以往的 Element 方式似乎又有些許麻煩,且能力不足。當我使用兩款系統過后,都給到了我不少的驚喜。

          首先是Semi,顏色自動提供 WCAG 檢查,讓你能夠快速看到自己設定的顏色究竟是否合理;設計系統的引用關系,可以了解到設計系統顏色之間有哪些不同;圓角的可視化編輯,可以快速知道修改過后的最后實現樣子。每一個功能都是設身處地的為設計師考慮,在日常的工作當中經常會遇到的問題,但是也會有些許的遺憾。

          圖片

          比如:可定制的組件內容實在太少,目前能夠提供給用戶定制的只會有:顏色 、 字體、圓角、陰影,想要從 Semi Design,到 Any Design 還是會有一定的距離;Figma 插件還未上線,確實不能夠與設計軟件進行快速打通。不過官方已經回復說插件正在審核,期待它的后續體驗。

          當我用了 Arco 的主題風格配置過后,我覺得可以好好來說說。簡直太牛了!可以編輯的維度從基礎的顏色、字體、陰影、 到 組件的按鈕、導航、分類、表格  一共有接近40款組件,并且都是可以進行可視化編輯與調整的。如果你用了 Arco 過后,或許不用苦苦的站在前端后面,讓他幫忙調整頁面,作為設計師自己就能夠搞定,并且每一個組件可以調整的粒度是非常之細,包含 各種寬度、圖標大小、顏色、投影,等等…

          圖片

          真的有些顛覆!假如你需要去定義一個官方的設計系統,完全可以通過 Arco 進行搞定。

           

          文檔內容:

          仔細閱讀文檔,你會發現文檔這次文檔對于設計者而言,更加的友好。首先你可以通過 組件設計,去了解到每一個組件的具體構造,這是很多基礎薄弱的設計師能力欠缺的一個點

          其次對于 組件狀態、何時使用、交互行為 都解釋得非常清楚。之后有人問我關于組件相關的問題,我只需要給他扔一個鏈接過去就可以。

          圖片

          并且兩個系統都支持查看組件的更新記錄,作為一個剛面市的設計系統,調整修改是在所難免,因此提供這樣的入口確實能夠使用體驗上更為高效。

          圖片

          關于文檔的細節以及具體的書寫質量,這個只能在后面深度使用過后給到大家反饋,在說說 Semi 與Arco 在文檔上的不同,你會發現 Semi 在整個文檔內只會有對 組件的使用細則,而 Arco 則提供了:設計價值觀、設計原則、樣式指南、組件用法,Semi 缺少了設計系統靈魂的這一部分,也就意味著在項目資源的投入上兩者還是會有較大不同。

           

          隨便聊聊:

          什么暗黑模式、國際化 就不做不過介紹,感興趣的同學可以自己去官網體驗體驗。最后說說兩者的差異和自己的感受。

          其實早在20年的時候,我就已經看到 Semi Design 的原形,但當時看到整個官方文件有點簡陋,不過今天看這個設計系統,成熟度還是蠻高的,無論的整個組件的質量,又或者是 Figma 當中對于Variants 的支持,暗黑模式的探索(老實說,我覺得暗黑模式的場景不會特別多),也能夠看到抖音設計團隊在這個系統的付出。

          當然,在整個設計系統查看下來,發現 Semi 仿佛是一個半成品,因為缺少了設計系統最為重要的設計價值觀與原則、整個頁面模版,因此對于這個內容本身還是抱有一些小小的遺憾。不過從定位上來說,我覺得也是非常合理。

          因為作為服務于抖音產品線的設計系統,其實無意去和一些國內外的著名設計系統進行對標:比如 支付寶的 Ant Design、Google 的 Material Design、SAP的 Fiori 更多是從自身實際問題出發,去解決在產品研發過程當中的一系列問題。而比肩國際設計系統的任務,交給了老大哥 Arco Design 上,同樣能夠在 Arco 上看到字節的野心,嘗試去搭建各種生態:圖標、物料、風格配置。很顯然對于我們用戶而言是一件好事,因為有競爭才會更快發展,我們之后在設計系統的選擇上又可以多一個選項。也希望之后能夠發展的越來越好。

          兩個系統名字的由來:Semi 取自英文的詞組,寓意 “一半”,表示在一個企業應用是有業務邏輯與前端界面構成,希望Semi能夠成為前端頁面不可獲取的一半。

          你知道 Arco 設計系統名字的由來嗎?

           

          原文鏈接:CE青年(公眾號)

          作者:CE青年

          轉載請注明:學UI網》聊聊上周很火的設計系統“兩兄弟”

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

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

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

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




          找了半個月終于找到了可以免費商用的好看的英文字體!

          seo達人

          1.一套設計的整體感覺

          為什么很多人的設計作品很有自己的風格?比如像這個設計師主頁的作品:

          圖片

          很輕,很干凈。

          這樣的作品風格都很統一,設計師能夠很好的把控整體感覺,不會讓某個局部過于出戲或不搭。

          我們在平時做一些概念練習的時候,一定要注意這方面的提升和培養,這樣在后期設定主視覺的時候,才能更好的把控。

          這里給大家舉一個簡答的案例,我們看一位星友做的臨摹的練習:

          圖片

          大家會覺得有什么問題嗎?會不會覺得耳機有些突兀?因為整體顏色、界面樣式都是比較輕量化的,但是耳機突然很重,導致和整體有些不搭。

          我們看下原版的界面:

          圖片

          確實整體都很輕量,包括耳機本身。

          千萬不要小瞧“抓整體感覺”的能力,也不要感覺這個能力很簡單,想和做是兩碼事,一定要多做,然后不斷試錯、優化、試錯、優化,最后達到理想的能力狀態。

           

          2.做界面要有容器思維

          我們做界面,一定要有容器思維,容器思維有兩個作用,

          第一,它可以很好的幫助我們更好的整理信息,比如之前有分享過,我把原本散亂的信息,重新整理到卡片容器中:

          圖片

          這樣會讓信息更加規整。

          第二,因為開發寫頁面也都是一個容器一個容器的,所以這樣可以更好的有效溝通,避免浪費時間,比如我們在列表的時候:

          圖片

          如果沒有給列表裝上容器,開發就不知道每個列表的有效點擊區域是多大,如果我們裝上了容器:

          圖片

          開發實現起來就會很快,也不會有那么多視覺還原問題。

           

          3.可以免費商用的數字英文字體

          我們在做app產品的時候,經常會看到有一些特殊數字字體,比較長條的,有些設計感,像這種:

          圖片

          系統里面的字體肯定是無法滿足需求的,這時候就需要安裝一些其他字體,那問題又來了,很多字體都有版權問題,所以這里推薦一個免費可商用的,oppo出的一套字體,里面的數字,我覺得效果還不錯,大家可以看下:

          圖片

          還是挺好看的,一共有5個字重,任你選擇。

          除了上面這個字體,如果大家想用圓潤一點的數字,可以用這個字體Quicksand:

          圖片

          也是免費可商用的,有需要的朋友可以點個在看,后臺回復:數字,即可獲得。

          好了,今天就這么多,下期見,么么扔!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》找了半個月終于找到了可以免費商用的好看的英文字體!

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

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

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

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


          如何基于業務思考設計B端的IP活動

          seo達人



          關于IP活動

          IP存在形態可以多種多樣,可以是一個故事、一個概念,一個事件、一個形象等。本文所指的IP是有著高辨識度、強用戶心智的“符號型”事件,通過打造IP事件讓特定用戶對此形成超級IP心智,從而形成品牌認知,拉近與用戶的距離。

          圖片

          本項目在商家端通過聯合多個產品、業務的場景,打造針對于商家用戶拉新、促活的運營活動,通過規律性的舉辦活動、持續性的品牌符號透出,讓商家用戶對此活動形成超級IP心智。

          因此,本文將會從項目的業務背景出發,以設計的視角來闡述酷家樂針對商家用戶的拉新、促活,打造的一個有趣、有效、可持續的IP活動。

           

          為什么要打造IP活動

          酷家樂在以往的商家運營活動中,積累了一些問題,之所以需要做IP活動,主要原因有三個方面:商家用戶側、產品運營側、產研側。

          圖片

           

          一、用戶背景

          酷家樂的商家用戶行業覆蓋廣、年齡與職責跨度較大,加上在b端做內容宣導依賴于企業組織里層層分發信息,信息傳播與宣發成本較高,包括活動舉辦的形式與規則。

          從過往比較零散的線上運營活動經驗來看,如果在前期宣導不到位的情況下,難以很快的在線上讓用戶快速的響應參與進來,所以活動的效果也難達預期。如何建立比較穩定的活動心智,進而降低宣發成本,是針對商家用戶提升活動參與度的前提。

          圖片

           

          二、產品/運營背景

          酷家樂B類產品以商家后臺為底座,以應用為拓展模塊,因此業務產品越來越多,每個產品階段性的促活躍必不可少,之前零散的、單獨的舉辦活動勢必帶來資源浪費、宣發成本疊加、難以吸引用戶參與的問題,如何兼顧老模塊+新產品/功能的促活問題?這也是產品和運營的業務目標。

          圖片

           

          三、產研協作背景

          一個活動從想法到最終上線,中間經歷的流程比較漫長,作為設計方最怕業務給你卡死一個非常緊張的時間,指定日期上線。而過往這種情況時常發生,最終運營、產品、設計、研發都妥協,在最終效果也打折,如何解決這個問題,設計可以在這里做什么?

          圖片

           

          設計策略與設計方案

          基于以上三個背景,針對用戶、業務、協同三個方面提出系統的解決方案,制定設計策略:

          • 通過打造超級IP心智,讓用戶認知、熟悉并持續參與它;
          • 通過趣味地串聯業務場景,將業務的目標分解成各個任務,從而能讓用戶更好的參與互動;
          • 設計前置的考慮與推動,沉淀通用能力,實現組件化與配置化。

          圖片

           

          一、打造超級IP,建立用戶心智

          超級IP心智,本質是設計一場讓用戶印象深刻的體驗,本次活動通過IP主題、IP形象、IP場景衍生三個方面來發力。多次曝光持續的搶占用戶視線、建立熟悉感和認同感,打造系列活動感,運營手段讓用戶持續產生深刻的印象,從而建立起超級IP的心智。IP最重要的作用是可持續的,積累大眾認知的同時,最終可成為品牌資產。

          圖片

           

          1、IP主題設計

          考慮到酷家樂的在家居行業的品牌形象,從市場定位和品牌調性提取關鍵詞,最終確定以“裝新家”為主題。

          圖片

          品牌的持續植入(新家、主題及字體、顏色、圖標體系)

          圖片

          圖片圖片圖片

           

          2、IP形象設計

          以品牌IP形象人格化為設計策略,建立酷寶有趣、活潑可愛的人設,及時的與用戶進行交流互動。

          圖片

          圖片

           

          3、IP場景衍生設計

          為了加深用戶對酷家樂認知,結合“酷寶裝新家”的品牌主題,將裝修家物件與當前酷家樂的產品生態去串聯,通過有趣的場景讓商家用戶感知到酷家樂賦能家居行業的能力與影響力。

          圖片

          圖片

           

          二、趣味地串聯場景,吸引用戶參與

          趣味地串聯業務場景,將業務的目標分解成各個任務,從而能讓用戶更好的參與互動。在提升基礎模塊數據的同時,提升新產品/功能的活躍度。

           

          1、趣味的互動設計

          趣味的串聯業務場景的目的在于,讓更多的用戶能通過有趣的活動參與進來,按照一定的游戲規則順便完成既定的任務,促進現有產品模塊的活躍,帶動新產品認知和使用,傳播新產品的價值,達到促活的業務目標。在此項目中主要通過人格化的酷寶對話、有趣的房間拼裝來實現趣味的互動。

           

          1.1 人格化的酷寶,跟用戶互動起來

          酷寶是酷家樂人格化的IP,引入酷寶角色有利于更好的和用戶建立情感的連接,進入場景,塑造角色,成為品牌的一部分,創造真實具象的消費者觸點。相比于往常圖文呆板的互動,酷寶角色的引入可以讓活動與用戶的互動更有趣。

          圖片

          酷寶的對話設計遵循著“人格化”的原則,就像人一樣,能夠根據特定場景、特定人設、特定對話對外輸出便于用戶理解的內容,所以在酷寶的對話設計中,根據活動時間點、場景以及酷寶可愛形象的特質,結構化的設計對話內容,讓酷寶作為活動重要角色,與用戶互動起來。

          圖片

           

          1.2有趣的房間拼裝

          根據游戲化設計的八角模型,缺失感設計會激發用戶去填補當前缺失的模塊,利用用戶的心理,充分的將用戶吸引到游戲中來。

          圖片

           

          2、根據用戶行為周期的激勵

          根據用戶與活動的行為周期,將用戶的行為分為參與前、參與中、完成后三個階段,針對于三個階段的行為分別進行了用戶激勵設計,激勵用戶參與進來。

          圖片

          因涉及內容較多,針對于一些重要場景,示例如下:

           

          2.1 用戶參與活動前

          在用戶必經之路,觸達用戶,提供邀請,將內容推到用戶的視線。

          圖片

          圖片

          獎品的展示,吸引用戶來參與

          圖片

          各種渠道的投放物料設計,確保信息觸達

          圖片

           

          2.2 用戶在活動參與中

          即時激勵,當用戶有機會,強提醒用戶抽獎

          • 引導有信心能持續進行下去,卡片類型設計,確保用戶有信心能持續進行下去
          • 引導用戶收集卡片

          圖片

          • 明確狀態,讓用戶明確完成自己的狀態

          圖片

           

          2.3 用戶任務完成后

          中途獲取獎品設計,讓用戶的互動更加有趣、真實。

          圖片

           

          2.4 最終成就設計

          以匯總成就數據的海報形式為載體,讓用戶產生數據成就。

          圖片

           

          三、基于業務思考,實現組件化、可配置化的能力

          針對協作問題,結合業務的規劃和訴求,設計前置的考慮與推動,根據業務多產品需求的特性、設計故事腳本,給出整體的設計提案。沉淀通用能力,實現組件化與配置化,從而讓設計、產品、研發整體協同能實現提效。

          圖片

          一場聯合活動,最終可以被拆解成5個層面:活動應用層、場景單元層、即時激勵層、業務任務層、目標激勵層。

          圖片

          為了提效,通過結構化數據和模塊化設計呈現,在前臺做到模塊組合的適配性,在后臺保證配置的靈活性,從而實現之后的配置化能力,讓運營、產品可以自由的搭配,快速的上線,大大提升產研效率。

          圖片

           

          效果驗證

          圖片

          內部數據已脫敏處理

           

          業務數據

          活動巧妙的串聯了各個業務場景,在用戶完成任務同時,整體商家側的用戶活躍度在活動期間得到了巨大的提升,尤其是在創新模塊/產品中,實現了流量的帶動,最終將新模塊的流量帶動起來了。

           

          資產沉淀

          從設計到研發側的組件化沉淀:將能力沉淀下來,通過組件化、可配置化的能力讓此活動可以得以延續,讓商家側運營在以后聯合活動中,可以“開箱即用”的上架活動,可以實現不同模塊組合的任意搭配,大大提升產研效率。

           

          協作方反饋

          在整個活動中,由于設計積極前置參與,一起同業務方共創達成了業務目標,獲得了業務方的廣泛好評。

           

          寫在最后

          打造一個IP活動需要有秩序的內容+友好的互動設計+有吸引力的品牌包裝,共同發力才能吸引更多的用戶來參與互動。確保用戶參與的體驗的同時,抽象通用能力,在用戶側建立起穩定、有趣的用戶心智,在供給側沉淀快速復用能力,最終實現業務目標與設計價值的最大化。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:看看

          設計:看看、柚子、阿九、白夜

          轉載請注明:學UI網》如何基于業務思考設計B端的IP活動

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

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

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

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



          項目總結|紅包設計測試,驅動裂變數翻三倍

          seo達人


          01.前言

          58本地版處于一個用戶迅速增長階段,需要通過拉新、個推、信息流投放、渠道投放、馬甲包、紅包等方式多種方式實現獲客和嘗試用戶增長路徑。這次我們采用紅包裂變拉新的方式。

          a

          02.為什么采用紅包的形式

          2014年,微信紅包一經推出就引發了全民搶紅包熱潮,微信支付也通過微信紅包場景成功逆襲,實現了“馬云花十年做的事情,微信一夜完成”的成效。

          2021年春節,火爆的微信紅包封面實現了用戶與品牌的“連接”,微信搜一搜、視頻號、朋友圈廣告、公眾號均獲益頗多。

          用戶對紅包這種場景比較熟悉,紅包拉新對于用戶有吸引力,很關鍵的一點就是用戶覺得不需要巨大投入,就可以獲得利益,覺得自己賺到。

          r

          03.驗證本地版APP是否適合紅包裂變的一種嘗試

          58本地版用戶人群

          通過58本地版用戶人群可以看出,58本地符合下沉市場的特性

          1. 對價格和收益比較敏感,愿意花時間獲得金錢上的獎勵

          2. 會下載一些現金獎勵新聞資訊app、視頻app

          3. 熟人社交影響大。

          所以本地版符合裂變標簽的用戶存在拉新空間。

          r

          04.項目設計目標/探索解決方案

          紅包裂變的目的非常明確:拉新。為了達成拉新的目標,一開始我們根據基本的拉新思路進行了流程設計。

          圖片

           
          但在進行執行評審的時候,我們意識到,這樣的方案雖然可行,但落地成用戶流失也是特別大的,對于未綁定用戶來說,在前期沒有看到具體的活動頁面,用戶不知道具體的利益點,所以這個時期用戶流失是特別大的。
           
          我們不得不推倒開始的方案,開始思考:是否有更好的解決方案?
           
          在綜合設計思維,開發思維,運營思維去思考問題后,我們提出了一個嶄新的實現方案:利益點前置

          圖片

          在這套新的流程實現方案支持下,我們按照對拉新影響最大的引流入口進行探索。我們對引流入口進行了三輪用戶調研。

          (1)異形紅包:在利益相同的情況,調研用戶對不同紅包樣式的銘感度。 

          圖片

          (2)玩法紅包:增強“領紅包”的互動性、趣味性,在“領”的過程中體驗幸福和快累。

          圖片

          圖片

          (3)簡潔紅包:簡介的紅包樣式,最大突出利益點,讓用戶最大的感知到價值,對不同的金額的感知進行測試。 

          從測試數據看,利益突出更能吸引用戶。在這套新的流程實現方案支持下,我們按照對拉新影響最大的引流入口進行探索。我們對引流入口進行了三輪用戶調研。

          a

          05.做有趣的設計

          作為設計師,產品本身的需求需要滿足,用戶的喜好和屬性也需要考慮在內。

          無形中這就存在著一個“結構”,我們要做的是發揮我們的創意,通過不同的“搭建方式”提供更多可能性的方向;通過不同的表現手法和視覺語言帶來更打動人心的設計。

          在紅包的設計過程中,也打破了傳統紅包采用紅色設計方案,而是運用撞色突出頁面中紅包的視覺。

          圖片

          讓紅包與頁面內容形成聯系、豐富內容與紅包的關聯度,增強紅包對于產品的價值

          圖片

          歷史數據:上線一個月,裂變效率提升了三倍,較之前活動而言,活動有效裂變率大幅度提升,增粉成本有效降低。

          w

          05.總結

          綜合整體數據來看,58本地版還是適合去做裂變活動的,可以將紅包作為核心或主要拉新渠道,在有預算情況下,適宜源遠流長地去長期投放。

          紅包拉新也存在一些問題:紅包拉來的新用戶未必為產品需求用戶,對留存有一定影響。當然,留存與產品本身也有一定關系,留存數據還是需要長期觀察,并對新用戶進行一定習慣培養。


           

          原文地址:58UXD (公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》項目總結|紅包設計測試,驅動裂變數翻三倍

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

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

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

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



          設計師如何高效溝通需求

          seo達人


          前言

          溝通是為了完成設定的目標,把信息、思想和感情,在個人和群體之間傳遞,并達成協議的過程。溝通目的一般分為:說明事物、表達感情、建立關系、達成目標。

          需求溝通是設計師和團隊圍繞需求目標,信息傳遞的過程,是設計師展開設計工作的起點,貫穿整個設計過程,溝通質量直接影響設計和項目質量。但因溝通復雜性、開放性,對很多新手設計師來說,在需求溝通過程中,可能會碰到一些共同的溝通問題,比如前期需求不明確導致設計頻繁修改、產品和體驗發生沖突時無法說服產品、溝通過程中陷入情緒爭吵、溝通中雞同鴨講等等。

          針對這些問題,本文嘗試梳理需求溝通過程中幾種典型場景和方法,以期幫助新手設計師快速識別需求溝通中的常見問題;提升溝通效率,快速達成共識;掌握溝通竅門,更精準高效的產出需求。

          本文主要分成2個部分,第1部分主要聚焦在需求溝通過程中的不同階段,面對的典型溝通問題和解決方案;第2部分主要介紹溝通中一些常見的技巧和方法。

           

          Part 1  需求溝通的目標和方法

          1.1 設計師在不同需求階段的溝通目標

          通常設計師在處理需求的流程大致可以分成4個部分:了解需求->分析需求->探索方案->實現方案。在不同的階段,設計師要解決的核心問題不同:

          • 了解需求階段,設計師和產品針對需求目標進行討論,并和團隊就產品目標達成共識;
          • 分析需求階段,設計師和產品針對產品策略合理性進行討論,并提出體驗訴求;
          • 探索方案階段,設計師探索設計方案,并和產品就商業目標和體驗目標達成平衡;
          • 實現方案階段,設計師和產品協調優先級,調整方案,確保方案最大程度實現還原;

          圖片

           

          1.2 如何更好的了解需求,明確目標,達成共識

          在了解需求階段,設計師需要了解需求來源、背景、要解決的問題和目標??偨Y來看需求可大致分為2類:一類是需求目標較明確,產品有明確要解決的問題,如提升產品體驗、滿足某個用戶明確需求、完成某個產品目標;一類是需求目標較模糊,比如挖掘用戶潛在需求,探索新的業務方向。

          圖片

          對于目標較明確的需求,在了解需求背景、解決標準、需求邊界、限制條件和責任人等問題后,即可進入需求分析,策略討論階段。

          但對于方向探索類需求,如何協助產品探索目標,和團隊達成關于目標的共識,是這階段的溝通重點。以一個創業的項目為例,產品想做一個圖片社區,原因是目前國內沒有頭部圖片社區。還原項目初期的溝通過程如下:

          圖片

          在產品的催促和時間壓力下,設計并沒有圍繞產品定位、用戶群、產品目標進行充分討論,也沒有和團隊成員達成共識。在這種情況下,選擇跟隨產品的節奏,陷入了被動執行。由于前期并沒有針對需求進行細致的推敲討論,方案的輸出過程變成了試錯的過程。產品方向修改頻繁,這種被動的溝通方式,導致整個團隊目標感不清晰、理解混亂。

          圖片

          經過反思和問題總結,設計師發起了主動溝通,運用設計方法協助產品明確需求,提升方向說服力,探索如何就目標和團隊達成共識。

          首先,需要和產品明確用戶群,并尋找用研協助,或發起快速訪談了解用戶;

          其次,組織團隊相關成員發起關于產品目標的討論,圍繞產品決策人給出的產品初步方向,團隊成員每人寫下對產品的期待,提煉總結團隊成員的想法,提煉總結產品目標;

          再次,根據用戶訪談材料,利用親和圖法,提取關鍵詞,從用戶訴求中洞察提煉用戶目標。最終,產品目標得以明確,團隊也取得了關于目標的共識,同時通過快速demo,來驗證優化,項目得以順利進行。

          圖片

           

          1.3 如何更好的分析需求,確保產品策略合理性

          在了解需求背景、用戶群體,明確了需求目標后,進入需求分析階段,通常產品會給一個商業假設:假如做了xxxx,用戶就會xxxxx,產品可以達成xxxx目標。以一個需求為例子:產品想做一個任務體系,通過福利吸引用戶做任務,從而拉動產品活躍。

          圖片

          如果設計師完全按產品給的商業假設輸出,方案產出過程貌似很順利,但可能隱藏了很多問題。以本需求為例,產品的商業假設邏輯是:用戶被福利吸引->用戶為拿到福利做任務->用戶獲得福利->產品完成目標訴求;

          但這個假設是正確的嗎?設計師的價值就在于,這個時候要能找出產品假設中的問題。通過對用戶的了解和洞察,還原用戶的實際使用過程可能會發生的問題。找到這些關鍵問題并通過和產品溝通協調解決掉這些問題,才能順利實現產品目標。

          通過對用戶實際參與過程的分析,用戶在看到任務獎勵后,實際需要權衡的內容很多,如福利吸引力夠不夠大、有沒有關系親密的好友可邀請、好友要完成的任務難度大不大?分析需求過程關鍵就是找到這些問題的對應策略,強化用戶參與的動力,降低參與難度。

          圖片

           

          1.4 方案探索階段,如何平衡商業和體驗訴求

          在方案輸出階段,設計師和產品最常發生的爭執是商業目標和體驗之間的沖突。產品為了達成商業目標,很多時候希望把達成商業目標的手段做的很強;

          圖片

          當發生圍繞商業目標和體驗問題,誰都無法說服對方的情境時,設計師該如何溝通呢?

          首先,作為設計師要擺正溝通立場,理解商業化是任何產品的根本目標,體驗也是實現商業化手段之一,我們反對的不是商業化,而是簡單粗暴的商業化方式,商業化的前提是對目標用戶有足夠的了解和盈利模式的清晰判斷。

          其次,應能夠識別對于曝光越多越好,越直接越有效的這種思維方式,通常是一種鳥槍法的投機心理。在沒有更巧妙的解決方式時,最節省力氣的做法就是提升曝光等方式達成目標。

          當發生爭執時,如果僅僅站在設計立場上,用設計理論說服對方,通常效果有限。嘗試找到產品實現商業化目標背后的邏輯,不要用手段代替目的,探索更好的實現商業化方式的可能性,比如嘗試在合適的路徑上推薦,或探索用戶更容易接受的內容形式。

          圖片

           

          1.5 方案實現階段,如何協調優先級,推動方案最大程度還原

          在方案實現階段,很多時候由于時間緊張,產品僅完成最核心功能,部分體驗相關功能一直無法得到優化。

          圖片

          通常如果方案產品認可,但推進意愿不高時,可能的原因是:

          1. 當前方案不是核心KPI,產品要優先保證對kpi影響最大部分完成;
          2. 投入產出比不劃算,方案在產品看來投入的人力/時間/資源過大,并不值得;
          3. 方案改動可能引發數據風險,產品并無法確保改動一定能帶來數據的成長;
          4. 資源緊張,產品也很想實現方案,但項目時間/人力/資源真的很緊張。

          圖片

          這種情況下,首先,要和產品夠分溝通他們的疑慮和擔心,到底是哪類問題;其次,從心態上也不用急于一時,做好長期推動的準備;還有,充分優化方案,消除產品疑慮,尋找合適時機進行推動。在項目逐漸迭代的過程中,對需要推動體驗優化點持續關注,盡可能放大方案價值,結合新的需求點,思考能否從價值拓展角度,如提升品牌價值、擴展性等角度提升方案說服力;同時,從縮小成本和打消產品疑慮角度,做足準備,推動方案。

          圖片

           

          Part 2  溝通技巧的問題

          溝通的過程是一個信息螺旋傳遞的過程,表達者的信息傳遞到接收者時,因為背景、環境、理解能力、傳遞完整度等差異,接收者僅能接收部分信息,而接收者在理解消化后,再將自己的信息傳遞出去,這個過程循環往復,會導致兩個最常見的溝通問題:目標偏離以及信息衰減。學習適當的溝通技巧,可以有效減緩目標偏離和信息衰減。

           

          2.1 如何防止溝通目標偏離

          要防止溝通目標偏離,首先要理解什么會導致目標偏離?

          1. 目標不清晰,比如本來想找產品聊下某功能體驗不合理,但因為產品一直說項目時間緊,被傾訴了一通苦水后,忘記了本來要溝通的問題,轉移到了其他話題上,最后不了了之;
          2. 缺乏同理心,比如當發生爭執時雙方不能互換角度,產品一直在說實現目標手段和現階段問題難點,設計在說體驗問題和設計規范,雙方互不妥協,陷入爭吵;
          3. 陷入情緒,表達觀點時陷入情緒化的爭執。

          圖片

          針對這三個會導致溝通目標偏離的問題,可使用以下技巧:

          • ① 設定溝通目標并保持關注:在每次溝通前想清楚自己的目標和底線,嘗試用全局視角分析自己設定目標的合理性;在溝通過程中要經常反思當前溝通的問題是否已偏離了目標,對達成目標是否有幫助;發現目標偏離可嘗試改變節奏,思考接下來說什么有助于達成目標;
          • ② 換位思考:能夠傾聽對方的問題和困難,嘗試尋找解決問題的辦法,而不是一直表達訴求,無助于問題的解決和推進;
          • ③ 控制/傾聽情緒:美國心理學家埃利斯創建的ABC情緒理論,拆解了事件發生和情緒之間的關系,指出事件的發生并不是導致情緒的直接原因,我們持有的信念才是。因此在溝通中不要加入太多內心戲,過度解讀事件。比如產品讓設計反復改稿時,可能會解讀為產品在故意刁難,嘗試了解反復修改背后的原因,可能對解決問題更有幫助。

           

          2.2 如何減少溝通過程的信息損耗

          溝通過程中表達者的模糊表達和接收者的理解偏差,會導致溝通過程中的信息損耗。比如經常會聽見產品有以下類似的表達:“設計稿盡快輸出”、“頁面太結構化了,想要更社交化一點”、“能不能做得更有創意一點,更有趣點”當出現這些類似的溝通語句時,可以嘗試通過具體化方式,進行確認。

          圖片

          對于可能會出現理解偏差的問題,重要的信息用自己的語言組織后再次確認“你的意思是xxxx嗎?”;重要的溝通后,可梳理溝通記錄,企業微信同步周知確認;方案的溝通過程可以快速畫草稿確認;盡可能的減少因為理解不一致導致的溝通問題。

           

          總結

          在需求溝通過程中,我們要對不同階段的溝通目標有清晰的認識,圍繞目標進行充分準備,運用設計方法了解用戶、了解產品核心訴求,做到知己知彼,才能進行有效的溝通。

          在溝通過程中保持對目標的關注,始終牢記溝通是為了解決問題服務的。適當學習溝通技巧較少溝通過程中的信息損耗。

          溝通是解決問題,共同協作的重要方式。如果你覺得自己不善于溝通,可能要反思下溝通前是否想清楚自己的溝通目標,對于解決問題的過程、方法是否熟悉,準備是否充分?當我們能做到知己知彼、胸有丘壑時,溝通可能就變得簡單起來。

           

          圖片

          感謝閱讀,以上文章由騰訊ISUX團隊創作,版權歸騰訊ISUX所有,轉載請注明出處,違者必究,謝謝您的合作。 

           

          原文地址:騰訊ISUX設計

          作者:ISUX設計

          轉載請注明:學UI網》設計師如何高效溝通需求

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

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

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

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



          如何把照片做出有設計感的海報

          seo達人


          今天我們分享如何把拍的照片做出有設計感的海報

          當然我知道你們可能更關心如何拍出好的照片,所以今天也一并送上。

          圖片

          我們以常用手機拍照為例,手機的拍照抓法無非就豎式或者橫式兩種,但是當對同一個物體背景中,豎式與橫式所拍攝得到的畫面范圍以及體現出的視覺感受是完全不一樣。

          圖片

           

          留白構圖

          所以在做出設計感的海報前,我們應該先做好拍攝的前期準備,用今天講的留白構圖的方法來拍出好的照片。

          圖片

           

          豎圖拍法

          我們先講豎圖的拍法,如果你拍攝的習慣是希望將整個場景全部放置到手機豎圖畫幅中,那么一個場景內容過于復雜的畫面就會造成視覺缺少重心。

          圖片

          大腦為了讓我們能夠看清復雜的大量細節,會將所有機能在一定時間內高度集中在眼睛對于畫面的注意度,長期觀看則會讓眼睛受到神經上的錯覺衰弱,所以有時候我們看很復雜的畫面和密密麻麻的文字時,我們很容易看錯行,也容易看漏某個圖畫,當然也缺少更多的畫面美感。

          圖片

          圖片

          從而折射出很多其他事物的論證,比如為什么吃酒席的人看到這么多菜放在一起時就飽了,而當一道菜只有一點點東西時,反而會增加我們的食欲。

          圖片

          這里我們將同一個拍攝畫面重新做了留白性的構圖,可以看到右邊的圖片上面內容少,下面的內容多,這樣就有了層次對比和視覺重點,從感官上來說也看起來舒服了很多,最重要的是不會讓眼睛看的累。

          圖片

          當然既然是想拍出好的照片,除了留白還有包括在畫面分割上也會有不同的比例大小之分。以及對角構圖、S型構圖和透視性構圖等。

          圖片

          這里我用之前拍的三張照片為例,從左至右可以看出留白的比例是從多至少,而拍攝得到的視覺風格也發現了改變。

          圖片

          如果做成海報或雜志類的圖文,留白越多時,照片會給人更多的遐想空間,文字的放置也可以更加的肆無忌憚一些,留白越少時,照片就會能得到更直觀的內容,并且需要將圖片進行縮小或者改變其畫面比例來解決文字排版的問題。

          圖片圖片

           

          再來講講豎式與橫式拍照的區別

          豎式的結構會讓我們造成畫面被拉長的效果,如果你拍高樓大廈,你可以試試用豎圖,會有一種高聳威嚴的感覺,而橫式讓我們造成畫幅中的照片有被拉寬或者向兩側延展的錯覺。

          圖片

          如果你要拍人像,豎式會看起來人顯瘦顯高,而橫式看起來會顯胖顯矮一些,所以如果你用橫式拍照,建議拍風景、建筑,能讓畫面顯得更寬廣遼闊。

          圖片

          圖片

          圖片

           

          豎版-海報實操案例

          接下來我們就用照片設計成海報實操案例

          圖片

           

          步驟1:放置照片

          當文字放置到畫布中,我們將所拍照片作為設計背景。

          圖片

           

          步驟2:留白布局

          然后我們發現本身拍攝的照片留白比例較大,為了不影響留白感,我們將中間留空,讓文字內容布局編排到左右兩側,而左側由于留白空間是最大的,所以文字的內容可以放置的多一些。

          圖片

           

          步驟3:內容分割

          在這里要講下幾個分割線條的使用,除了文字段之間的分割以外,還有閱讀文字時有引導至右側聯想的視覺引導作用。

          圖片

           

          步驟4:版式平衡

          為了解決重心的平衡,我們在左側復制了同樣的照片作為對稱。

          圖片

           

          步驟5:增加關聯

          這時左右兩邊缺少了與中間留白之間的關聯性,所以我們利用云朵做出了往中心的衍生元素。

          圖片

          最終這樣一個比較完整的將照片做出海報作品就完成了

          圖片

           

          橫版-海報實操案例

          同樣我們用橫式的照片也做一個海報實操案例

          圖片

          由于是橫式無法放滿整個畫面,所以我們使用圖文結合的方式,讓文字與圖片緊密連接在畫面的中心。所拍的照片屬于偏文藝一些,所以我們可以用一些手寫或者纖細的文字結合,再利用照片增加背景的肌理,使海報看起來豐富一些。

          圖片

          我們看下最終海報效果

          圖片

           

          總結

          我們總結下兩張照片做出的海報,左側海報將留白放到中心位,讓內容由外側編排不影響到留白區域,這么做讓海報有了一定故事感,右側海報則以中心為主要內容,外部減少文字編排,讓海報有了向內自由舒緩的感受。

          圖片

          圖片

          所以不同的構圖、以及不同的結構最后做出的海報形式和風格都會有所不同。 當你看完今天的內容,記得出去拿著手機用所講的一些拍攝技巧試試效果,這就是今天帶來的如何把拍的照片做出有設計感海報的全部內容。

           

          原文地址:修先森撩設計

          作者:修先森

          轉載請注明:學UI網》如何把照片做出有設計感的海報

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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