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

          首頁

          設計法則|打造極致的用戶體驗的秘訣-尼爾森十大可用性原則!

          博博

          推薦一個比較實用的設計法則,可以說現在的任何互聯網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰分析。


          在日常使用移動端或PC端產品時,不知你有沒有這樣的體會?



          出現這些問題的,如何解決呢?

          推薦一個比較實用的設計法則,這個法則已經有很多的文章說明了,可以說現在的任何互聯網產品都能看到這些理論的實踐,本次主要想以比較多的案列進行實戰分析。



          尼爾森的十大可用性原則是尼爾森博士在分析了兩百多個可用性問題的基礎上,提煉出的十項交互設計原則。被廣泛運用于網頁、APP以及各種人機交互領域。

          要注意的是,這10項原則是啟發式(heuristics)的、廣泛的經驗法則,可以指導我們更具價值的思考界面設計。

          設計原則都可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解各種設計原則,讓設計師在做設計的時候可以找到更好的解決方案,提高用戶的使用體驗。

          理論介紹

          雅各布·尼爾森(Jakob Nielsen)是畢業于哥本哈根的丹麥技術大學的人機交互博士,被譽為可用性測試的鼻祖,2006年4月,并被納入美國計算機學會人機交互學院,被賦予人機交互實踐的終身成就獎。 

          尼爾森于1995年1月1日發表了「十大可用性原則」,該原則被廣大設計師奉為教科書般的存在。雖然20多年過去了,但是對于現今的產品體驗設計仍然具有很大的參考意義。







          人機交互的基本原則是,讓系統和用戶之間保持良好的溝通和信息傳遞。系統要告知用戶發生了什么,預期是什么,如果系統不能及時向用戶反饋合適的信息,用戶必然會感到失控和焦慮,不知道下一步要做什么。

          界面狀態分為兩種:靜態和動態。

          靜態即用戶通過界面查閱,明確知道自己的位置、處于何種狀態,或者知道界面數據的狀態。動態即用戶在進行界面操作時,系統應當立刻提供反饋,告訴用戶該項操作被系統接受,讓用戶對操作感知及判斷。

          該原則在設計中的體現:

          1、狀態可見性-位置可見

          告訴用戶處在系統的什么位置,特別是對于新用戶,需要提供必要的信息,否則容易迷惑。比如:導航菜單、面包屑、標簽頁、步驟條、分頁器等等。

          相比于C端產品,B端產品在頁面層級往往更為復雜。因此,讓用戶明確當前所處的位置尤為重要,這也就突顯出了導航的重要性。設計師在設計的過程中,要注意提供上下文線索,避免用戶迷路。



          2、狀態可見性-進度條

          告知用戶系統運行的狀態信息,比如進度、內容加載時,增加用戶掌控感。

          最經典的案例莫過于Loading頁的進度條了,無論是加載頁面還是下載內容,一個清晰的進度條可以讓用戶隨時掌控進度,同時也可以用具體的數字更加明確的表示,比如:安裝程序時顯示進度條,并預估還需要多久結束,播放音樂時顯示進度條,并提示預估剩余時間。



          3、狀態可見性-操作反饋

          系統適當反饋是用戶界面設計的最基本準則。當用戶在與系統進行交互時,應當在各個階段為用戶提供必要、積極且即時的反饋,同時也要避免過度反饋打擾用戶。可以使用的形式包括但不局限于:

          操作反饋:點擊頁面跳轉、按鈕點擊狀態、警告提示、輸入反饋等等;

          結果反饋:非模態彈窗,輕量化感知系統內容反饋。(反饋內容應盡量不要打斷用戶操作,所以一般采用toast形式,反饋結果后及時消失。)

          情感反饋:搜索沒有結果時,沒有數據等等空狀態。

          還可以通過元素的顏色位置、界面元素變化、文字、聲音和震動,甚至動效等多種形式給予用戶提示反饋。

          注意,越是消極的反饋,比如網絡連接失敗、系統錯誤等,越是要及時告知用戶,同時提醒用戶采取適當措施。比如:1、提交表單時,如果校驗失敗,則在填寫有誤的內容旁邊提示錯誤原因;2、程序未響應時,系統會讓用戶選擇是關閉程序還是等待程序響應;



          4、狀態可見性-合理的時間

          系統應該在合理的時間內,給予用戶適當的反饋,讓用戶了解正在發生的事情。

          當系統反饋時間小于1秒,通常正常反饋即可;相反長于1秒時,我們通常會通過加載動畫、占位符、分步加載等方式,減緩用戶等待的焦慮感。如果超過10秒還沒有得到相應,那么通常會認為這次請求是失敗的,需要給用戶失敗提示。

          例如:下載提示、刷新提示、支付提示、新頁面加載提示等。







          系統盡可能貼切用戶所在的真實環境。把復雜的系統語言換成用戶看得懂的語言;環境貼切原則的根本目標是讓用戶可以快速上手產品,降低學習成本。

          《iPhone人機交互指南》里提到的隱喻與擬物化是很好的實踐。此外,還應該使用易懂和約定俗成的表達。

          該原則在設計中的體現:

          1、環境貼切-易理解的語言

          這里說的語言不僅僅包括文案層面的語言,還包括產品的設計語言(圖形、配色、風格、動效、手勢等)設計語言都應該是易于用戶理解和認知的。產品使用的語言應該是目標用戶能夠清晰理解的。如果用戶不能理解,他們會感到被忽視和受挫敗,許多人將選擇其他產品完成目標。

          從設計心理學角度來講,用戶在使用產品的過程中,其大腦會“優待”較常用的記憶內容和操作形式,有意抑制那些相似但不常用的內容,以便減輕認知負擔,防止混淆,這種習慣從某種程度上來說屬于“熟知記憶”。

          比如細分市場的產品,針對中老年、青年、兒童的產品或商務、娛樂的產品,都要分別使用符合自己的定位的語言。



          反面案例就是windows系統出錯了頁面,一堆亂碼,看不懂又很慌張,就很不友好。另外還有一點,很多大公司的app都會針對他們不同國家的用戶群體進行各種語言的翻譯處理。

          為了照顧不同國家的用戶的使用習慣對頁面結構布局,風格,語言,字體,包括交互方式都會做特殊處理。這就是場景貼合原則。

          2、環境貼切-模擬現實世界對象

          模仿現實世界的產品或者使用映射,能夠利用人們現有的知識,可以顯著的降低用戶的認知和學習困難,并增加他們的使用興趣。

          比較好的案例就是iOS原生的計算器、指南針,微信紅包都是模仿了現實世界的產品。



          3、環境貼切-符合現實世界隱喻

          從現實世界中借鑒的設計元素可明顯降低用戶的認知和學習難度,并且增加興趣。最有代表性的就是網易云的音樂播放界面圖形隱喻表達。美團APP的母嬰類目icon的設計非常有趣,且非常容易理解和使用,讓人印象深刻。



          4、環境貼切-操作手勢符合聯想

          使用的操作手勢,應該是用戶自然就能聯想到的,不要創造、更改操作手勢的意義。


          5、環境貼切-自然的動效

          動效的加載樣式應符合自然規律,需要平緩過渡,而不是生硬的加載效果。比如:網易云音樂播放時唱片轉動、停止播放時唱片自動移開,有趣且有效。




          用戶在使用產品的過程中,誤操作是經常發生的事情,系統應提供撤銷和重做功能,讓用戶具有對產品的控制性與自由度。

          用戶可控原則的根本目標是讓用戶可以在界面自由操作,而且無需為操作不當承擔責任。

          該原則在設計中的體現:

          1、可控原則-可自由導航

          清晰便捷的導航方式,使用戶可自由控制返回和跳轉的頁面。

          由于B端系統的復雜性,有些功能的層級會比較深。彈窗A中的某個操作可能會觸發彈窗B的彈出,如果彈窗A和B承載的功能具有父級和子級的關系,同樣需要考慮「返回」的功能以及清晰的層級關系。

          2、可控原則-可自由返回撤銷

          用戶在使用系統的過程也是一個試錯的過程,系統要讓用戶覺得自己的行為是可控的,可以犯錯,并且在犯錯之后可以反悔。用戶在使用產品時可以自由進退,遵循從哪里來就返回到哪里去的原則。當用戶誤操作時要給用戶提供撤銷、取消、重做等相關功能。不可逆的操作要給用戶明顯的提示。

          比如微信聊天是可以撤回的,并且撤回之后還支持重新編輯;對于我這種打字總是出錯的人簡直就是福利。iphone相冊刪除照片后,支持在短期內找回;在word中編輯文檔時,支持撤銷和恢復,保存的同時,還能查看歷史保存記錄。



          回收站功能:讓用戶更有自由度,增加用戶安全感,可控的找回誤刪除資源。



          3、可控原則-不可逆轉的操作需要警告

          系統在重要的不可逆轉的操作需要給用戶提供二次確認或者撤銷的功能,這樣可提高用戶的操作可控性。在產品設計上,防止用戶常見的誤操作。比如很多產品在涉及到內容的刪除操作時,經常會有彈窗提醒,讓用戶再次確認。這樣是防止用戶誤操作帶來的刪除損失。用戶不用因為操作帶來心理負擔,從而提升操作可控性。

          比如iPhone ios系統:

          1、常見的二次確認主要可以通過以下方式實現:通過文字提示,用戶閱讀后點擊是與否來進行下一步;

          2、通過動作,用戶通過輸入特定字符或者完成驗證碼拖拽等操作才可進行下一步操作;

          3、通過身份校驗,用戶需要提交個人身份信息以完成校驗;







          整個系統要保持產品結構架構、導航、用語、色彩、操作行為交互的一致性與標準性,遵循平臺慣例與行業標準。我們在設計中常見的制作平臺規范,其實就是為了保證平臺設計的一致性。

          一致性原則的根本目的是保證產品的專業性,給用戶帶去統一的體驗感受。

          該原則在設計中的體現:

          1、一致性-產品內部一致

          遵循產品內部的慣例,可幫助用戶快速學習使用產品功能。產品內部的一致性包含:產品功能框架、文字、設計風格、布局、反饋等等。

          比如:小熊藝術app,一款針對孩子學習美術的app,不管是首頁、個人中心以及加載等頁面,風格保持一致性都是主打清新黃色+可愛icon。黃色小熊更是在不同的合適的時機出現,banner、加載,課程動畫中等。不僅風格一致性、布局、反饋等產品內部保持一致性,也形成了統一的品牌傳達。




          但是,有時候為了達到產品目標,偶爾也會故意采用不一致的設計。

          比如:常見的對話框都將“確定”按鈕放在右邊位置,所以用戶在操作時,很容易產生條件反射,順手點擊右邊按鈕,然后才突然發現自己點錯了。雖然看起來有些別扭甚至很多人不喜歡,但是很有效,這種設計在軟件卸載、App取消會員訂閱等操作中非常常見,主要是為了做一些心理暗示和引導,避免用戶卸載或退訂。



          2、一致性-交互行為一致

          交互和用戶的習慣一致,意味著用戶不再需要重新學習,各種應用之間的切換沒有學習成本。我們在前期已經培養好用戶的使用習慣,那么就不要輕易改變,減少用戶的認知成本與學習成本。

          例如:常見的頁面的后退或返回都在屏幕左上角、搜索欄都在屏幕最上方、菜單欄都懸浮在屏幕底部。



          3、一致性-迭代產品一致

          當產品線進行更新迭代的時候,應該保留用戶既有的交互和操作習慣,用戶在上一個版本形成的交互認知在下一個版本是否能被沿用,這對于用戶來說在產品體驗上會造成很大的干擾。

          比如微信的多年的迭代,底部tab功能一直都是這樣,主要功能入口一致沒有變化,就體現了迭代產品的一致性。


          4、一致性-同一團隊/公司產品線一致

          Office軟件中包含的各個產品,其界面布局和設計風格都保持了高度一致,如下圖所示是PowerPoint和Word的界面,可以看出,二者的“插入”一級菜單下所包含功能的排列順序、布局方式乃至圖標圖形,都是高度類似的。



          5、一致性-設計語言一致

          遵循統一的產品設計規范/邏輯。這里的一致性包含產品和跨平臺產品之間的一致性。確保整個系統的結構一致性、色彩一致性、操作一致性、反饋一致性、同種組件樣式保持一致等設計語言都遵循同一套設計規則。

          比如,產品內相同顏色的反復出現,為產品打造視覺錘符號,強化產品在用戶心中的記憶點。符合平臺設計規范,

          蘋果系統參照人機交互設計指南設計規范,安卓系統參照Material Design設計規范,或者直接參照自己團隊的的設計規范,應該遵循慣例,并且保持系統的一致感,不要盲目地標新立異。



          6、一致性-業內產品保持一致 

          不知道你發現了沒,現在的電商、音樂、社交等等app越來越一樣了,一樣的交互,一樣的排版設計,基本上都遵循著類似的交互邏輯和視覺元素。


          為什么會這樣?同類軟件設計的趨同化,未必不是一件好事?

          與業內產品保持一致,意味著用戶不再需要重新學習,就可以在各種應用中自由切換,用戶學習成本的降低,也意味著我們獲客成本從某種程度上被降低。而這些約定俗成的規則和流程都被用戶不自覺地印刻在大腦中,成為一種自然的習慣,而獨特的設計,截然不同的規則,則常常會成為習慣以外的東西,引起混亂,讓初次上手的用戶感到受挫和沮喪。

          如,在App底部的導航圖標中,“首頁”永遠排在第一個,個人中心(“我的”)永遠排在最后。并且對于類似“首頁”“購物車”“訂單”等常見按鈕,不同App的設計樣式都非常相似。如下圖三個不同音樂app的對比圖:



          如果你特立獨行地把個人中心放在第一個位置,或者采用奇怪的圖標作為個人中心的icon,用戶使用時肯定會覺得別扭。





          防錯原則的根本目標是阻止錯誤行為,避免進一步犯錯,指引用戶正確的完成操作行為。

          「防止錯誤」主要分為三個階段:錯誤行動發生前,引導用戶向正確的方向前進;用戶觸碰到危險操作時給予提示;危險操作發生之后,提供撤回的入口。

          該原則在設計中的體現:

          1、在執行危險操作前做設計:

          比一個優秀的錯誤提醒彈窗更好的設計方式,是在這個錯誤發生之前就避免它。它可以幫助用戶排除一些容易出錯的情況,或在用戶提交之前給他一個確認的選項。

          通常情況下,按鈕置灰表示對應功能或操作無法使用,這也是防止錯誤的一條有效途徑,因為用戶通過按鈕樣式就可獲知其狀態,提前規避無效的提交操作。當然,不是只要功能或操作無法使用時,就應該將對應的按鈕置灰。其實更好的做法是填寫完標題后按鈕不置灰,點擊完成按鈕后定位或高亮必填項,讓用戶更容易識別錯誤點。

          比如在登錄時,只有輸出信息后才可以點擊登錄按鈕,未輸入信息時,按鈕是不可以點擊的狀態。通過系統主動對用戶進行操作限制,幫助用戶避免發生錯誤。



          限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。再比如輸入驗證碼頁面,為了防止用戶多輸入或者少輸入驗證碼,只給到四個輸入框,讓用戶只能輸入四位數字,減少輸入錯誤的幾率。


          2、在執行危險操作中做設計

          提供清晰的提示,防止用戶犯錯,提示包括標簽、文字、顏色、以及反饋狀態等。利用顏色,動效提供警示信息,比如常見的微信退出的按鈕是紅色的,狀態未完成的標簽是紅色的等等。

          如:表單填寫過程中讓用戶及時知道輸入格式,出錯原因,避免填寫完成后再提醒,浪費用戶時間。

          范圍限制:限制用戶的選擇并不是一個好主意,但是如果有明確的規則來定義可接受的選項,那么限制用戶可以輸入的類型是一個很好的策略。比如:電影購票時,已購買的位子不會再提供選擇,很好的避免了買重的問題 



          3、危險操作發生之后做設計

          特別要注意在用戶操作具有毀滅性結果的功能時要有提示,防止用戶犯不可挽回的錯誤,需打斷用戶,提示用戶是否要進行此操作,讓用戶有更多的思考時間。所以在一些不可逆的操作中二次確認是非常有必要的。

          這條原則很重要也很常見。在刪除信息時,系統會讓用戶確認刪除,也就是我們常說的二次確認,電商平臺允許在一定的規則下取消訂單等等。






          易取原則的根本目標是提升用戶在界面上的操作效率,系統應直觀地協助用戶完成任務。

          系統應協助用戶進行記憶,通過使元素、操作和選項可見,減少用戶的記憶負荷,在適合的時機給用戶需要獲取的信息。

          識別比回憶要好,對于路徑較長的操作,我們更應該協助用戶記憶。比如在淘寶下單的操作路徑,每一個頁面頂部導航欄會盡可能的提醒用戶操作到哪里,用戶所有的操作信息都是可見、易獲取的,減少用戶對操作目標的記憶負擔。

          該原則在設計中的體現:

          1、易取原則-易掃描

          用戶心理學研究發現,互聯網用戶瀏覽網頁的動作不是讀,不是看,而是“掃”。這是互聯網用戶瀏覽的主要方式。所以我們在設計的時候,需要清晰的視覺層次結構,突出重點,弱化和剔除無關信息,降低頁面干擾,來減輕用戶閱讀成本。



          2、易取原則-讓用戶選擇而不是填寫

          比起讓用戶輸入,讓用戶選擇更能降低用戶的記憶成本,更好地輔助用戶做決策。如果,有很多的信息或者選項是用戶高頻率會選擇的,設計師不妨給用戶提前做好選擇,提供默認選項,如下圖:



          3、易取原則-智能獲取

          通過智能讀取用戶之前填寫過的信息,或者智能識別等形式,減少用戶記憶負擔與操作負擔。

          常見的是寄快遞-新增地址,將用戶復制的文本字符類型進行識別并匹配,將有用的信息內容提取出來,對體驗而言顯得高效又智能。

          或者淘寶購物確認訂單時,系統會自動為你帶入之前的商品信息,包括選擇的商品規則、數量、價格、默認記錄顯示常用的地址等。這些信息雖然之前都選擇過,但是需要用戶在購買前二次確認,由于信息比較多,用戶很難記憶,所以確認訂單再展示出來更加合理。



          比如:用手機登錄時,收到的驗證碼直接展示在軟鍵盤上,用戶無需記憶也無需輸入,直接點選即可登錄;

          美團APP中,當用戶選擇商品時,系統會自動計算商品價格和滿減后的價格,還會幫用戶記錄選擇了哪些商品以及份數,不需要用戶自己花時間去計算還差多少才能滿減等,減少用戶記憶負擔,同時節省用戶點外賣的時間,這也用到了易取原則。

          訂單頁面若某信息需要用戶從一個頁面復制到另一個頁面完成查詢或編輯輸入,那就有必要為該信息提供快捷復制功能,如訂單號緊跟著一個復制按鈕。

          我們在搜索一個歌名的時候,記不住完整的歌曲名,我們只要輸入關鍵的幾個詞,系統就是幫助我們記憶,出現相關的搜索。



          4、易取原則-草稿箱或歷史記錄

          作為用戶,你不記得的操作,系統可以幫你記錄。為用戶提供歷史記錄,文本創作的過程中自動保存草稿,讓用戶方便查詢自己的進程,這就是信息易取原則的設計。

          保留歷史,最為常見的就是為用戶保留歷史搜索和歷史瀏覽、儲存賬號和密碼。視頻APP會詳細記錄用戶的觀看記錄,當用戶沒有看完某部電影時,下次進入直接從斷點續播上次播放的位置,無需用戶記憶上次看到哪里了;

          不只是觀看記錄,視頻軟件還會幫你記錄同一賬號在不同設備上的登錄記錄,觀看記錄也會在不同設備之間進行同步。



          5、易取原則-可視化

          將選擇的對象,動作,選項可視化,讓用戶一看就懂。注意圖標符號化能讓人理解,避免引起誤解。

          抽象圖形+文字,提供了更多的信息,更加豐富了記憶效果,避免了用戶需要記憶才能想起圖形代表的含義。我們常用的app導航欄都是以這種icon和文字相結合的形式,這就是很符合易取原則的例子。



          6、易取原則-內容可預期

          在用戶使用產品的過程中,會有一些需要用戶記憶的內容、或者操作路徑,在設計的時候我們要避免用戶記憶,把信息直接提取出來,送到用戶手里。同時每個頁面傳遞的信息量盡量少,減少用戶的閱讀壓力。

          常見的例子是各類優惠券,設計的時候會有明確的位置說明限制時間,類別等等,同時還會有清晰的入口引導去使用或者規則的入口。



          7、易取原則-行為輸入代替字符輸入

          這一點其實也非常好理解,一個簡單的動作,比打字要輕松得多,常見的就是在設備解鎖的時候,用手勢解鎖替代密碼解鎖。

          隨著技術發展,有了更多的行為代替輸入的方式,比如指紋識別和面部識別,用簡單的操作,就可以達到進入系統的目的,這就避免了用戶需要較多的操作和密碼的記憶。







          靈活易用原則不僅是一個交互設計原則,也代表了一種軟件產品設計理念:系統既要做得簡單、易用,讓所有用戶用起來得心應手;

          靈活易用原則的根本目標是保持系統的靈活性,以滿足不同用戶的不同需求。既要提供必要的幫助,讓剛入門的初級用戶順利上手,還需要支持靈活的個性化定制,讓高級用戶能夠快捷高效使用高頻功能,充分發揮其價值。

          該原則在設計中的體現:

          1、靈活高效-提供定制化服務

          讓用戶靈活定制的最典型的例子是各類軟件和App的配置功能,基本上所有軟件都會提供定制化功能,從快捷鍵設置,到頁面布局,再到自定義參數,軟件系統會盡量提供全面的個性化設置功能,來滿足不同用戶的使用訴求和習慣,提升用戶的使用效率和體驗。

          例如支付寶首頁,用戶可以自定義首頁的應用。對于使用頻率比較高的老用戶來說,這是一個非常方便的功能。



          還有一種是系統更具用戶常用自動整理歸納,以提升使用效率,減少用戶多余操作。

          比如:微信的聊天表情,由于可以選擇的表情很多,正常情況下用戶很難快速找到自己想用的表情。而用戶的使用習慣往往是循環使用其中的某幾個,所以把最近使用的表情展現出來,會極大的提升用戶的尋找效率。

          除了從新老用戶的角度對用戶做區分,還可以從其他維度區分用戶,針對不同用戶做不同的功能。比如:微信為了讓中老年用戶使用方便,推出了關懷模式。在關懷模式下(下圖)文字更大、色彩更強、按鈕更大,還可以使用“聽文字消息”的功能。這些功能充分考慮了“中老年用戶”的需求和痛點,讓產品更加靈活易用。



          2、靈活高效-提高用戶使用效率

          靈活高效原則在交互設計中使用會提高用戶使用效率,例如微信聊天頁面中,當用戶輸入某個字詞之后,系統會自動幫你匹配相應的表情包;

          當你輸入某個詞之后,輸入法會幫你自動聯想接下來你可能會輸入的詞;截圖后進入微信聊天頁面后,系統會將你剛截的圖前置,它會自動判斷你可能想發送該截圖。如下圖:



          3、靈活高效-“跳過”按鈕

          通過用戶快捷跳過的入口,比如常見的:引導頁、操作手冊、還是開屏廣告,有“跳過”或者”立即進入“按鈕真的很貼心。



          4、靈活高效-允許用戶重復操作

          對于用戶頻繁使用的部分,提供快捷的重復使用操作,比如:外賣app,用戶可以快捷地再來一單,同時保存上一次操作記錄。



          5、靈活高效-各取所需

          在設計功能時,最好能考慮到不同層次用戶的需求,以此來讓用戶「各取所需」(需要平臺有多類型用戶);比如常見的Word、Photoshop等,有一個“二八定律”,就是說80%的功能是給20%的用戶使用的。

          設計這類產品時,最常用的20%的功能一定擺在最顯著的位置上,方便所有用戶使用,而80%的高端功能,要適度隱藏,使得整個產品看起來盡量簡潔、美觀。比如Sketch的工具欄和快捷鍵就是給新手或資深用戶準備的。



          大數據智能判斷:

          淘寶的首頁每個人推薦的商品都不相同,淘寶后臺根據用戶的瀏覽習慣,購買/收藏記錄等大數據智能判斷用戶的喜好,對商品進行千人千面的分發。

          但是切記不要太過依賴大數據算法的判斷,因為一旦形成這種模式,會給用戶造成回音壁效應,你越喜歡的東西系統就越給你推薦,其他的商品就像回音壁一樣被吸收過濾,用戶永遠沒有辦法發現新的東西,讓用戶的選擇永遠都在一個死循環,所以做千人千面設計時一定要適度。





          優美而簡約原則的根本目標是讓用戶快速找到界面的重要信息,引導用戶的視線及操作行為。

          UI設計應該是符合大眾審美的,不需要多么酷炫,而是需要我們注重信息獲取效率,更加聚焦內容,刪除多余的視覺表達元素,讓界面保持美觀簡約。

          “快掃”是互聯網用戶瀏覽的主要方式。我們熟知的產品設計的四大基本原則:親密性、對齊、重復、對比,就是使頁面優美而簡約的方法。

          該原則在設計中的體現:

          1、優美簡約-視覺層級關系明顯

          建立清晰的視覺層級,越重要的內容越突出,能夠方便用戶無障礙地瀏覽信息,提高用戶操作與信息獲取效率,各模塊間采用卡片或者間距區分開,加強頁面層級區分。

          我們通過顏色、大小、字體的字重、對比度、元素的間距、特殊造型、動效等來表現。



          2、優美簡約-避免界面元素過于雜亂

          避免界面呈現過多元素,包括動效、配圖、icon、按鈕等等,降低用戶的視覺干擾。保留產品最主要的信息,如果不是優先級最高,要盡一切可能避免去影響產品的簡潔和美觀,可采用大留白增加頁面呼吸感,聚焦內容。



          3、優美簡約-對重要信息突出顯示

          用戶注意力資源有限,應該保持信息精煉,突出重要信息,弱化次要信息。



          上面兩個案例通過加粗放大、標記顏色,從而讓頁面簡潔,且突出重要信息。





          容錯原則的根本目標是讓那個用戶在操作出錯后還能挽回錯誤的余地,從而給用戶一致產品很安全貼心的感覺。

          系統需幫助用戶識別、診斷、并為用戶從錯誤中恢復提出建設性的解決方案。通過提示性文字或者插圖讓用戶意識到出錯了,比如404頁面的情感化插圖、彈窗提示用戶出錯等。

          該原則在設計中的體現

          1、容錯原則-引起用戶注意

          當發生錯誤時,提示信息一定要直觀,視覺上能夠引起用戶注意,可視化處理,文案要簡單概要,并給出解決方案。例如刪除訂單時,會提示二次確認,避免用戶誤操作。



          2、容錯原則-提供解決方案

          在出錯界面給出解決方案,可以是文字提醒或者按鈕跳轉等形式,幫助用戶解決問題。比如缺省頁的設計除了配置插圖還會有提示文案與操作按鈕,引導用戶去操作,去進一步解決問題。



          3、容錯原則-幫助挽回損失

          系統能幫助用戶自動甄別錯誤,并及時進行糾正時,將會給用戶帶來極大的便利,撤銷或者找回功能,都是幫用戶把損失降到最低的有效方法。

          比如微信信息的消息撤回重新編輯,相冊的最近刪除、回收站等等功能。







          人性化幫助原則的根本目標是用戶在使用產品的過程中有所依循,因為產品已經貼心地為他們準備好了幫助方式,或者即時提示和反饋,或者客服。

          人性化幫助用戶最好的方式分別為:1、無需提示;2、一次性提示;3、常駐提示;4、幫助文檔。

          最好的就是沒有提示,用戶就能看懂與應用產品;其次是一次性提示,提示一次用戶就懂如何使用,比如第一次進入app或新功能上線的引導設計、通常為氣泡形式。常駐提示需要一直固定在某個位置實時幫助用戶。

          最后就是幫助文檔了,一般用于解釋規則或者熱點問題,通常以超鏈接的形式存在于頁面中,或者以集合形式位于設置頁中,此時需要注意要易于檢索。

          該原則在設計中的體現:

          1、人性化幫助-方便用戶查找

          幫助文檔的入口容易找到,幫助信息方便用戶查找。常見的方式有:鼠標劃過懸浮文字說明,幫助用戶更好地理解。



          2、人性化幫助-便于用戶理解

          用戶通過查看幫助文檔來學習新功能,相對比較麻煩。如果能將教程和功能放在一起,用戶可以“邊學邊練”,就更容易讓用戶理解。

          提示語避免使用專業術語,盡量使用圖片或者圖形,同時處理文字外還可以使用示意圖,操作步驟等,方便用戶應用。



          3、人性化幫助-便于用戶應用

          在操作時的幫助信息,比如幫助懸浮按鈕:一直出現在頁面固定位置,方便用戶遇到問題尋求幫助。


          4、人性化幫助-信息引導

          搜索時,預搜索詞直觀地顯示出來,可以讓用戶更快地做出搜索判斷。微信轉賬頁面,當用戶輸入金額較大時,會在第一位數字下方提示轉賬金額的人民幣單位,目的是為了避免用戶輸入錯誤金額導致資金損失;



          5、人性化幫助-步驟引導

          復雜的流程可以通過分步驟來引導用戶逐步完成,而不是一次完成所有任務。個性化的提示一次就夠了,用戶用過一次就知道其用法。




          現在很多C端產品普遍做了良好的交互設計,可以幫助用戶快速學習使用,而不用閱讀、理解復雜的說明文檔。

          然而,B端產品的復雜性比C端產品高很多,因為B端產品蘊含很多業務流程的規則,系統中的一個按鈕可能代表了一個復雜的業務處理規則,如果不了解整個業務場景和處理規則,是很難理解按鈕的操作含義的。

          因此,對于B端產品,用戶進行自助服務、自助操作的難度高很多,B端產品的幫助文檔依然有存在的必要。產品設計人員要盡量在前端交互上做好引導提示,對于復雜的規則和邏輯,可以考慮通過幫助文檔來指導用戶。

          總結

          尼爾森十大可用性原則可靈活運用于各個地方,可以是交互設計,也可以是界面設計,深入了解該設計原則,可以找到更好的解決方案,提高用戶的使用體驗。要注意的是,這10項原則是啟發式(heuristics)的、廣泛的經驗法則,而不是具體的規定。

          1、狀態可見原則:位置可見、數量可見、狀態可見;

          2、環境貼近原則:語言應該是用戶所能理解和習慣的;

          3、用戶可控原則:可見導航、關閉與返回、撤銷與重做;

          4、一致性原則:產品內部一致、交互一致、迭代產品一致、同一產品線一致、設計語言一致、業內產品一致;

          5、防錯原則:操作前預警、操作中確認、操作后可撤回;

          6、易取原則:易掃描、智能獲取、草稿箱和歷史記錄、對象可視化、選擇代替輸入;

          7、靈活高效原則:靈活配置、允許頻繁操作、各取所需;

          8、優美而簡約原則:視覺層次明顯、簡約且突出重點信息;

          9、容錯原則:幫助用戶識別、診斷,并從錯誤中恢復提供方法;

          10、人性化幫助原則:無需提示、一次性提示、常駐提示、幫助文檔。

          最后

          我準備了一些常用的設計素材送給大家,需要的話免費拿走。獲取方式:老規矩公眾號后臺,發送文字“素材”,就可以獲取了~



          文中如有不嚴謹的地方希望大家給予指正,希望大家可以多多點贊評論鼓勵一下,最后感謝你的耐心閱讀。






          作者:789研習社      來源:站酷

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

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

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

          一文看懂B端篩選設計

          博博

          篩選作為一個常用的功能,在B端產品設計中可以快速按照需要對數據進行查詢和篩選。希望本文對你有幫助。

          今天與大家分享的是關于B端頁面中篩選區的功能設計,本文會從篩選的展現形式、布局、反饋、設計中遇到的問題以及設計思考這幾個方面進行講述。


          簡單介紹下篩選


          篩選,也可以稱作過濾器,它屬于搜索框架的一部分主要用于內容提取,將一類數據展示,同時一類數據隱藏,可以整合很多的組件。


          在B端產品設計中,篩選區的設置便于用戶進行數據查詢和數據定位,可以快速的按照需要對數據進行查詢和篩選;篩選的存在對于整個表單來說是非常重要的,它可以幫助用戶在表單茫茫多的數據當中進行快速的數據定位;可以對表單進行快速數據按照自己想要的方式進行劃分,縮短用戶對于數據的尋找時間。

          1、篩選區的展現形式有哪些?


          篩選區常見到的有搜索、條件篩選這兩類控件。搜索和篩選雖然同在篩選區,但是二者還是有所差異的。


          通過百度百科我們可以了解到:
          搜索,意思指仔細查找,搜尋。
          篩選,篩選是利用篩子使物料中小于篩孔的細粒物料透過篩面,而大于篩孔的粗粒物料滯留在篩面上,從而完成粗、細料分離的過程。該分離過程可看作是物料分層和細粒透篩兩個階段組成的。物料分層是完成分離的條件,細粒適篩是分離的目的。

          在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容,功能偏主動性;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容,功能偏被動性


          無論被動性還是主動性,搜索和篩選這倆個功能都是讓用戶使用某個條件對內容進行區分,從而找到用戶想要的內容。二者在功能上相輔相成,在B端系統的頁面中僅靠搜索或者篩選作為內容篩選都是不夠的,這就需要組合篩選區了。



          1.1搜索篩選


          精確搜索
          優點:搜索準確率高,所要即所得。
          缺點:需要用戶自己輸入,然后進行查詢。需要記憶搜索詳細信息。輸入框需要有提示輸入的內容,方便用戶填寫,以及確認輸入的類別或格式。
          適用場景:適用于用戶有清晰的目標,同時需要有查詢/搜索按鈕,來執行篩選。搜索需要配合篩選固有類一起使用。


          模糊搜索
          優點:模糊搜索可以用于搜索關鍵字的同義詞,提高搜索的精確性。字段匹配推薦搜索結果,減少記憶負擔,適用于不明確的信息篩選。
          缺點:篩選出很多類似相關的內容,需要查找鑒別所要內容,不便捷。
          適用場景:用戶對目標模糊,模糊是指不用關心輸入了什么格式,哪怕錯了,系統也會推薦給用戶相對正確的;用戶需要瀏覽操作過濾器提供的信息來輔助篩選達到目標。搜索需要配合篩選固有類一起使用。

          搜索的設計原則


          關于搜索,幾乎沒有人不知道,哪怕是不從事設計、產品的人,他們也知道。同時每一個產品,隨著規模變大,搜索一定必不可少。那么如何設計好搜索呢?有哪些原則可以借鑒,總結了以下4個方面。


          漸進呈現
          在我們設計搜索時,可以考慮漸進呈現的方式。這是指搜索結果不要一股腦兒都塞給用戶,而是使用逐步擴大的方式,讓用戶慢慢進入目標。但這里要注意,漸進的層級不要太深,漸進的內容要做到足夠為用戶著想。

          結構化
          結構化是指搜索結果呈現的形式要有歸納和整理的意圖,不能反饋給用戶的是沒有層次的內容。簡單來說,分類就是結構化呈現的體現,內容結構化后用戶查找和定位才會更快速。

          可操作
          對于搜索結果,我們可以給予操作選擇,例如收藏、分享等,這將會大大提升用戶與搜索結果之間的后續聯系。
          可操作性是最佳優先的好伙伴。同時給搜索結果添加使用類操作,這會讓用戶專注于目標。

          可保存
          無論搜索任何內容,用戶都有權保存自己常用的搜索結果,保證用戶后續無需重復搜索。這點上已經有很多C端產品做的很好了,我們在B端產品上也可以考慮起來。


          1.2條件篩選


          下拉篩選


          優點:頁面的空間利用率高,同時下拉起到了很好的收納作用,不占據頁面空間。
          缺點:由于下拉的局限性無法觀看到所有的篩選字段,需要操作點擊查看。


          適用場景:下拉的篩選字段選項有限,可以明確的總結分類時,一般采用固定選項類。這種操作起來便捷,降低用戶的操作難度。一般情況下需要“搜索/查詢”按鈕,但是也有的產品是勾選即執行的。主要需要結合具體的使用場景去判定。


          矩陣(平鋪)篩選
          優點:用戶可以直接看到篩選內容,支持輸入更多篩選條件,減少操作步驟提高了用戶篩選的效率。
          缺點:平鋪的篩選類目占據頁面空間較大,空間利用率低,信息量過多都是重點等于沒有重點,增加用戶的決策時間,不適合選項太多的情況。


          適用場景:平鋪篩選控件的普適性為最強,當沒有其他更好想法時,用平鋪總是一個好的選擇。需要注意的是,篩選條件不要過多(遵循7±2 法則)。


          注意事項:
          當確實需要支持大量的篩選條件時,有兩種解決方案可供參考
          1、用戶自行配置篩選條件:對用戶來說,單次篩選會用到的條件是有限的;通過可配置的篩選條件,實現檢索效率和信息噪音的平衡,對于用戶自定義項的體驗與應用都有更好的支持。
          2、 隱藏低頻的篩選條件:這種方法需要對用戶需求有明確的把握,哪些篩選條件是高頻、哪些是低頻需要有明確的分界,優點是第一次使用時用戶能更快上手。

          表頭篩選
          優點:通過表頭的點擊,簡潔、直觀的篩選當前表格列。
          缺點:只能篩選當前列的內容,篩選字段比較少,篩選形式比較單一。每個表頭都會有篩選的icon,影響用戶對于表頭的識別。表頭篩選學習成本最高,且和表頭排序容易沖突,篩選值展示也不夠直觀。


          適用場景:表頭篩選類似Excel表格的操作,是一種相對高級的交互,適合表格列比較單一內容的篩選。
          注意事項:
          一般來說不推薦使用,僅建議在以下幾種情況考慮使用
          1、空間是在有限或者表格非常靈活;
          2、用戶可能對每一列都有篩選需求(如數據報表、Excel);
          3、產品規劃時對于用戶篩選需求不夠明確,也可通過這種模式先采集數據,分析其使用頻次,對后期的界面優化進行指導。

          TAB標簽
          優點:篩選條件一目了然,交互步驟少,一個Tab標簽代表一個緯度,平鋪展示篩選內容方便識別,學習成本低。
          缺點:Tab標簽篩選字段數量有限制,不宜過多,分類需覆蓋選項,并且保證每一項沒有交集,空間占用多、不夠靈活,對用戶自定義項支持較差。


          適用場景:Tab標簽切換一般用于和時間、狀態的流轉有關,且沒有交集的數據內容(可以是同性質,也可以是不同性質)。權重高,選項值不超過5個。

          1.3組合篩選


          在B端系統表格類頁面中,字段屬性很多,簡單的檢索方式很難準確定位到目標數據,所以在實際使用當中,常會將大量非交叉關系的屬性進行羅列,搜索、篩選、TAB標簽切換組合出現,形成多屬性的組合檢索。而篩選項互相組合,其展示方式有如下幾種: 


          平鋪式
          平鋪式是將所有篩選項羅列出來平鋪在頁面上,可以兼容多種數據格式比如數字、文本、標簽、枚舉值、布爾值等,包含但不限于日期選擇期、標簽切換、單選框、復選框等多種控件。


          優點:用戶能直接看到選項內容,方便用戶識別選項,且提高了用戶篩選的效率(節省了篩選操作),大而全的篩選字段最大限度避免篩選條件遺漏的問題。


          缺點:篩選項多會占據大量頁面空間,信息量過多都是重點等于沒有重點,增加用戶的決策時間,不利于表格數據的直觀展示,此類型一般配合“勾選即執行”使用。


          適用場景:普適性為最強,當沒有其他更好想法時,用平鋪總是一個好的選擇。適用于從各個緯度篩選的場景,多維度篩選對信息篩選的顆粒度需求不一致,同時希望備選項被選中。

          折疊式
          折疊式篩選是平鋪式篩選的改進,一種簡單直接的篩選形式,對平鋪的篩選項進行收納,如果多屬性組合檢索中的一部分檢索條件不是高頻率使用的,但又是必須存在的,可以通過折疊的方式將這部分篩選字段隱藏起來,高頻篩選字段外露。


          優點:高頻篩條件可優先快速篩選、一定程度上減少用戶的認知負荷,同時占用空間較小。


          缺點:不好劃分不同用戶的高頻篩選項,當高頻篩選項過多時,頁面同樣會出現信息冗雜、空間占比大等問題。


          適用場景:折疊低頻篩選,顯示高頻篩選,能滿足大多場景下不占用太多空間。針對有更多篩選需求的用戶也有更好的引導性。



          2.篩選區布局


          從位置上來說,組合篩選一般有如下幾種常見類型:上下布局水平篩選區、左右布局的垂直側邊篩選區、 內嵌的的表頭篩選區。


          上下布局水平篩選區


          最常用的上下布局,篩選區放置在表格頁面的上方,方便用戶識別選項,提高了用戶篩選的效率,明確哪些數據是用戶所需的。上下布局的篩選區也方便用戶進行閱讀,對于那些由不同數據結構組成的頁面,是一個很好的選擇。


          上下布局的篩選區的可擴展性差,當篩選項目少于五個的情況下,最常使用的就是上下布局,而當篩選項目多的時候,會占據大量頁面空間,內容在較多時,推薦增加收起功能,這樣保證篩選整體面積不會很大,提升屏效比。


          左右布局的垂直側邊篩選區
          左右布局的篩選區一般是以字段選擇進行篩選,篩選區的位置較固定,不會因為篩選項過多而影響頁面中主要內容的位置,可擴展性強,可在收起部分嵌套更多的字段值。


          左右布局的好處就是能夠將篩選的所有條件都直接的展示出來,可以適應很多場景,但是這種類型篩選器可以影響整個頁面。我們需要確保頁面上的每個元素都有效地受到篩選的影響,避免造成混亂。


          內嵌的表頭篩選區


          表頭篩選是一種復雜的篩選形式,常見于列表中,是一種列表內置篩選形式,適合表格列比較單一內容的篩選,其最開始是源于Excel的篩選形式,點擊表單的篩選按鈕,可以將表頭的篩選字段直接帶入,方便用戶。


          3.篩選區的反饋


          篩選區有兩種不同的反饋模式:數據實時更新反饋和數據手動更新反饋。


          數據實時更新反饋


          界面將與所有設置的篩選相匹配并對結果進行實時更新。
          這種模式的優點是在執行篩選時為用戶提供了一種方便簡單的體驗,可以在每次點擊后立即看到結果。適用于較低風險的交互,一旦處理多選過濾器或更復雜的輸入時可能會造成混亂。當然還需要考慮處理數據的多少,如果應用中數據量巨大,每次更新時間較長,反而會降低用戶的使用效率。


          手動更新反饋


          在手動更新反饋模式下,過濾結果只有在用戶點擊查詢時才會更新。如果用戶想在每次更改后查看結果,必須單擊查詢按鈕。
          這種模式適合多緯度復雜的篩選,所有篩選字段設置完畢之后,統一執行操作,和實時反饋結果相比降低篩選等待時間,尤其是在大量數據進行篩選中,優化了用戶體驗。

          4.篩選需要注意哪些問題


          什么情況不適合用篩選?
          選用篩選組件的前提是信息能被清晰分類。如用戶ID/電話號碼,注冊用戶郵箱這種無明顯規則的就不適合用篩選組件去查找,用搜索會更好。


          篩選分類條件有什么要求?
          一是分類需符合大眾認知的條件。如:按照年月日的認知來選擇,地理位置按照省市區街道…
          二是要求篩選類目的分類要合理、避免晦澀難懂的文案。這決定了用戶使用篩選功能的時候是否清晰無困惑。

          高頻篩選操作怎么樣方便用戶操作?
          首先高頻篩選操作不是產研團隊自己主觀臆斷出來的,需要有數據支撐。很多產品為了滿足用戶快捷操作,會在篩選區幫用戶集成常用的快捷操作入口。比如很多電商產品的新品、包郵等快捷篩選。根據不同產品用戶習慣下操作整理出快捷操作入口能提高用戶體驗方便度。

          篩選和搜索的區別?
          主要區別在于用戶對目標的清晰度不同,需要選用不同組件功能來達到其目的。
          在B端系統界面設計中,搜索是通過指定任意條件,系統對此條件進行的檢索后,展示相對應內容;篩選是系統提供指定各種條件縮小范圍,可以選擇查找不同條件的內容。
          搜索和篩選都是讓用戶使用某個條件對內容進行區分,從而找到用戶想要的內容。


          5.工作中的設計思考


          在設計組合篩選的時候,篩選區的設計需要根據業務實際情況進行設計,考慮每個篩選字段和業務場景,來安排合理的篩選展示方式。
          那么到底什么情況下使用何種篩選模式?我們在設計篩選的時候可以如何思考?顯然,使用頻率和界面空間是兩個非常重要的評判維度。除此之外,我們還可以以可見性、系統性能和用戶認知等維度去深入思考,下面將逐一分析。


          頻率
          使用頻率是界面設計的一個重要考量因素,我們通常都會把高頻使用的功能放在顯眼且容易操作的位置。同理,對于篩選模式,我們也會依據篩選條件的高低頻進行設計。頻率除了影響使用什么模式外,還會影響篩選條件及篩選項的排列順序,這里就不多敘述了。

          界面空間
          一些界面模式的出現就為了應對界面空間不足的情況。而我們基于有限的界面空間選擇合適的篩選模式是件再正常不過的事。
          可見性太弱,當篩選條件都被收納在一個個小小的入口按鈕時,它的可見性也會隨之降低,尤其在PC端,一個大屏幕下更難發現。

          可見性
          既然說到可見性,不妨展開講講。可見性是一項重要的設計原則之一。一個明顯的道理是,可見總比不可見好,但由于界面空間限制,我們不得不取舍。那么如何取舍才能保證可用性仍然友好?
          針對篩選模式的可見性,我們可以分三個要點去考慮:


          1、篩選條件本身的可見性:
          用戶越難發現,即可見性越低。通常,我們都可以以使用頻率來決定篩選條件的可見程度。但有時候也會失效,因為正如上文所提及,到了篩選這一步通常是顆粒度比較細的分類,否則我們可以用導航解決。但顆粒度越細,用戶對信息的需求就越不一致。比如,挑一件衣服,有人希望按品牌篩選,有人希望按價格,有人希望按顏色,我們很難判斷哪個頻率更高。面對這種情況,只能將所有的篩選條件平鋪出來供用戶選擇。例如,淘寶天貓等電商產品往往會使用矩陣式的篩選,而一些數據格式更多樣的B端產品則直接使用輸入式的篩選。

          2、篩選項的可見性:
          篩選項的可見性同樣影響模式的選擇。頁簽式和矩陣式篩選的可見性比下拉式更高,因為用戶可以直接看到篩選項。但篩選項一定要讓用戶看見嗎?對于這個問題,可直接以篩選項的多少去決策(少則可見,多則不可見),比如一些B端產品,如果將備選項都全平鋪出來可能一個屏幕都放不下,所以只能將所有篩選項收起。但這是一種極端的情況,缺乏說服力。
          用戶對備選項是否足夠熟悉?比如對于一個尺碼的下拉框,我很清楚自己能選擇什么,但對于一個衣服風格的下拉框,由于我對風格不熟悉,不能預判這個篩選條件能起什么作用,很可能會將其忽略。

          3、選中項的可見性:
          選中項的可見性,即當我選中某幾項后再次查看選中項的難易程度。

          性能


          數據量大才需要篩選,而數據量大必然會有性能問題。在不同場景下,用戶會發生不同的行為,對性能的要求也會不一樣。我們能經常發現一些篩選模式會帶有“確認”按鈕,當用戶設置完篩選條件后不會即時刷新,而需點擊按鈕才能觸發。而有的篩選模式則沒有“確認”按鈕。這分別對應著兩種不同的場景。
          第一種場景,如B端產品中的查詢報表場景。我需要找出符合條件A、B、C的所有信息,并進行對比分析,那么我就會設置篩選條件A、B、C后一并篩選出來,這種情況是一步到位的,我不需要再額外添加條件D或E,所以有“確認”按鈕的篩選模式更符合此場景。反而即時刷新會在我設置篩選條件時造成干擾。
          另外一種場景,常見于B端產品中的查詢列表場景。如果我想找到信息α,通過篩選A后得出10個信息,那么憑肉眼即可找出信息α,任務結束,但如果篩選A后得出1000個信息,我可能會再添加篩選條件B、C或D,直到篩出的信息能讓我一眼分辨出信息α。換句話說,這時候我的心理模式是即時滿足的,只要信息縮窄到一定范圍我就會停止添加篩選條件,否則我會繼續添加篩選條件。所以即時刷新能更符合此場景,但與此同時就需要考慮到性能問題。

          另外,我們也可從變更頻次和變更概率這兩個維度進行思考。
          變更頻次是指用戶反復使用篩選的次數,變更概率是指用戶使用篩選的可能性,一般來說,高頻次必然大概率,但大概率不一定高頻次。而這兩種情況對性能的要求是不同的。還是以報表和列表為例,在列表中,雖然很大概率會使用篩選來尋找信息,但由于用戶是即時滿足的,而且滿足即可,所以不會重復變更篩選條件。而在報表中,雖然用戶會一次性設置篩選條件,但需要分析的數據不只一種,所以會高頻更換篩選項,回想一下我們去分析自己產品或競品的日活月活等數據時,是不是會高頻地切換數據來分析比對?所以,高頻次的篩選就會對性能有更強的要求,而為了避免性能問題,往往也會加上“確認”按鈕。
          用戶認知
          最難解決的其實是用戶的認知問題,尤其在模式相對固定的當下,讓用戶適應并習慣新的模式并非易事。我們想出一些創新性的篩選模式時,不要忽略用戶的認知。



          作者:Colar可樂      來源:站酷

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

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

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

          淺談B端和C端的不同

          博博

          想要了解B端C端不同,那么我們先了解B端是什么

          一、B端是什么?

          B釋義為:Business(業務),顧名思義B端產品更偏重于業務,偏重于功能的使用,B端設計在更加注重對于使用者的效率,這個功能是否方便直接達到目的。B端產品最直接的使用者是企業或者說每個“小企業”(班級、部門團隊等)要做的就是直接幫助他們用更低的成本使他們的效率大大提高。我們目前對于B端產品最簡單的理解就是疫情期間火爆的“釘釘”以及各位都熟知的“飛書”,在我們使用這兩款軟件時,我們就會發現這些功能好多面面俱到,“請假、匯報、簽到”等,不論多小的功能這兩款軟件都有,但是如果是C端的話,一些次要、點擊率低的功能指不定那天就消失了。單從產品角度來看就能看出B端與C端的區別,這些顯而易見的B端產品好像多了一絲冷靜但是很體貼的直男,C端就像一個花言巧語哄著你的playboy(僅舉例子區分,他們對于我們來說都是必不可少的產品)就像下面的自我介紹對比就能明顯的看出哪個是B端,哪個是C端。

          這些通過你應該已經初步了解了什么是B端,那么接下來我們從更深層次的開始了解。

          二、B端和C端的不同

          B端C端的不同在于哪些呢?

          1.用戶:

          B端的使用者更多是企業單位,老板等,需要共同協作,比如你的上級領導千里之外就能給你派發加急任務;我們部門需要一起進行這個需求等,這時B端產品的特性就體現了,就像現在經常有人說“只要聽到“釘”的一聲”和“紅色閃電”心里就突然揪了起來。

          C端的使用者在于用戶本身,通過精準推送直擊用戶痛點,增加用戶粘性購買度等。

          2.場景

          B端大多為辦公場景,項目需求、審批等

          C端則較為廣泛,某寶買買買,某音看看看!

          3.價值觀

          B端的價值更體現在我們整個團隊的效率,這個項目的使用成本,;比如說我需要通過這個軟件幫助我們整個團隊的效率提升,大家一起協作作圖、一起探討。

          C端的價值體現在這個活動這款產品怎樣使用戶更好的體驗,在使用時很快樂的把單下了;比如我們在某物購物時,購買完成后會獲得一張3D虛擬卡片,我們的購物體驗之旅是不是會極其開心,這里就使用了峰終法則(如果用戶在一段體驗的高峰處和結尾處是愉悅的,那么用戶對這段體驗的整體感受就是愉悅的。

          4.業務導向

          B端更注重這個功能的實現,我在使用這個功能時是否可以更高效,更加的去節省我的使用成本,再設計時我們需要去理解整個業務邏輯、業務導向,介于B端產品比較私密,很少有公開的,所以比較設計起來難度較為提高。我們我們平常面對小伙伴B端的問題時,如果不去了解他們整個業務流程就很難客觀地去判斷,很容易對他的指點使他造成一次工作失誤。

          C端的業務導向,更在于對于用戶心理、使用體驗的拿捏,能讓用戶做到“0”成本學習,無腦上手無腦沖沖沖,就比如你搞優惠搞了半天復雜操作做后才200-10這誰不氣?光明正大割韭菜啊。

          三、B端C化

          我在資料中查閱到未來的B端的進步就會在“B端產品在使用體驗和視覺感受這兩個方面和C端產品接近”,B端C化其實很簡單,就是將B段專業性強會忽略視覺這一點進行補充,B端產品也可以使自己的產品視覺更加富有沖擊力、3D、情感化、就像一些大廠最近的展示更多的去運用了一些3D玻璃質感提升B端產品的用戶視覺體驗,飛書也會制作情感也會在缺省頁的時候用emoj表情對你體現“話語安慰”是你在使用功能時不再那么枯燥,釘釘的IP設計同樣也是在拉近與用戶之間的距離,通過IP讓本就繁瑣的產品得到心情的愉悅,這都是在進一步提升B端的情感化,淘寶的功能、抖音的功能更加方便高效其實也是B端的體現,所以我們B C端其實歸根結底我們的目標服務都是為了人設計的,設計也一樣,服務于人,都是以更加舒適的道路上前進。

          總結

          其實B端C端從根本來說不同點很小,因為都是為了“人”去服務,未來的發展也是為了更好的讓我們去高效的使用;就很像國內國外設計有什么不同,其實沒什么不同,我們設計每一個項目、每一個作品時不管我們是否屬于哪個國家,我們的目的也只有一個“為了讓這個世界因為有了設計而看起來更美一點!”





          作者:小蘆同學有大腦袋      來源:站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          B端體驗設計之列表設計

          博博

          B端中后臺產品中,列表頁和表單面占了80%以上的頁面,以下文章針對如何設計一款好用的B端產品列表頁進行了講解

          列表頁多用于一個功能的首屏,是一個功能的數據集中載體,它的主要功能就是集中處理、展示、查詢、以及統計數據等。列表頁一般包含5個組成部分:標題、查詢、操作、統計以及表格。

          一、標題


          系統中只要是功能,就一定有標題,就像只要是個人,就一定有姓名一樣,標題的展示根據系統的結構,可能在面包屑中,可能在標簽欄中,也有可能在頁面容器中。如果標題放在容器中,位置一般是固定的,不隨著頁面滾動而滾動,標題字體也要和內容字體做區分,一般是字號增大或者加粗等方式。



          二、查詢

          查詢條件的設計也是五花八門,根據查統頁使用場景大致可以分成兩種:一種是省空間的設計,一般只需要放一兩個查詢條件,那么它就可以和操作按鈕放一起,多出現于數據字段比少且簡單的情況;一種是經常需要混合高級查詢,一般會獨立有一塊查詢條件模塊,多出現于數據統計類頁面。

          2.1、省空間查詢條件


          為了達到省空間的目的,查詢條件和操作放一行,一般會只放一兩個查詢條件,輸入或選擇后即執行查詢,不需要單獨點擊查詢按鈕,這種方式好處就是省空間,缺點是它默認展示的篩選項比較少,需要再點擊“更多查詢”才能看到更多。設計這種查詢方式需要注意的是,輸入查詢一般是輸入后即執行查詢,容易導致執行過于頻繁(輸入一個字符即執行了),因此會做防抖設置,可以在輸入0.5s后執行。再一個,這種展開收起的情況,用戶容易看不到隱藏的篩選,因此需要一些標記,比如展示已選擇的數量。



          2.2、獨立查詢條件


          獨立查詢條件的方式,就是將查詢條件單獨劃出一個模塊,可以一次性展示多個查詢條件。這種方式的好處就是,查詢更便捷,還可以做更多的拓展性方案,如用戶可以自定義高級查詢方案。缺點就是占空間,對于小分辨率電腦不是很友好。



          三、操作


          列表的操作是由產品的功能權限控制,由權限決定哪些人能夠使用和查看數據,下面從操作的類型、組合、操作反饋以及狀態的角度分析如何設計好操作功能。

          3.1、類型


          操作模塊一般是由一組用于操作表格數據的按鈕組,主要分為3種:一種是全局性操作,一種是選擇數據進行操作,一種是混合型操作。全局性操作(如新增數據、導入、導出模板、刷新等)不需要勾選當前具體某行數據,就可以直接點擊操作;選擇數據進行操作(如刪除、編輯、審批等),即操作前需要至少勾選一條數據,因為它是對當前已存在的數據進行操作;混合型操作(如導出、更新狀態等),在勾選數據的時候會對當前數據進行操作,未勾選數據的時候默認會全部處理或者其他的操作,比如“導出操作”,勾選數據時會導出已選數據,未勾選時則默認導出空模板或者導出全部數據(根據具體產品要求)。



          3.2、組合


          操作組一般會由一個或多個按鈕組成,通常只有一個主操作(primary)。主操作是帶有引導性的功能,如“新增數據”,還有若干個普通按鈕(default),不帶有引導性。按鈕組還可以根據操作類型形成組合,以分割線或收納的形式展示,收納按鈕主要有兩種展示形式:一種是帶主操作的收納按鈕(如歸納同類型的操作),一種是直接收納,不帶主操作的(如按鈕太多需要進行收起)。操作的順序通常也會根據優先級和操作頻次來決定。



          3.3、操作反饋


          操作后需要給個反饋,告知用戶操作結果,告知結果分三種情況:1、直接給結果,如toast提示,操作成功/操作失??;2、給操作建議,如:toast提示,請先勾選至少一條數據;3、警告提示,如刪除數據時候告知風險,二次確認防止誤操作。



          四、數據統計


          數據統計一般是拾取表格數據某些維度的統計結果,用于快速知曉當前所有數據的情況,有些統計還帶交互,比如點擊選中后進行數據過濾。



          五、表格


          市面上封裝好的表格組件可配置api很多,像antd,但是想要做的更強大,還有很多能夠做的細節,我們先來分析下表格的組成。表格是由行和列組成的網格數據,表格可以分2種,明細表和交叉表,查統頁中采用的就是明細表中的橫表,即表頭是橫向的。


          5.1、表格設計原則


          表格的設計原則遵循以下幾點:數據可讀性、展示效率、操作便捷性、以及靈活性等。



          5.1.1、數據可讀性


          表格作為信息密度最大的組件,在設計的時候要考慮數據的可讀性,可以從以下幾點入手。

          • 對齊方式。比較常用的是左對齊,數字金額百分比一般是右對齊,方便百分號小數點和千分位的對齊。如果表格不帶豎向分割線,則表頭也要和表體內容對齊。
          • 斑馬線。尤其是屏幕比較寬的時候,兩個字段隔得比較遠,在眼睛移動過程中容易看錯行,斑馬線就是解決這個問題,當然,如果不嫌麻煩,鼠標懸停上去,該行的背景色一般也會變化。
          • 行高。文字行高一般是字號大小的1.2-1.8倍。單行文字表格行高一般在32px-56px之間,如果支持換行則換行文字自動擠開表格行高。
          • 表頭樣式。表頭要和表體在樣式上做區分,如文字加粗,背景色等。
          • 滾動。當表體產生滾動的時候需要出現滾動條或者在固定列旁邊出現陰影。


          5.1.2、展示效率


          B端產品尤其是ERP這種數據密集程度很高的產品,對空間的利用要求是很高的,因此在設計的時候要充分考慮展示的效率,可以從行高、列寬等角度去設計表的細節。我設計表的時候習慣先跟產品討論清楚每個字段大概的長度,在設計的時候就會預留匹配的默認字段寬度,比如14號字體的表格,在展示“創建時間”字段的時候,字段寬度不會超過170px,我會留180px的默認寬度,既有呼吸感,又不浪費空間。最后預留一個字段寬度作為auto自適應,給到個min最小值,這樣在不同分辨率上能展示相同的效果。


          5.1.3、操作便捷性


          表格在展示數據的時候往往會遇到一些問題,比如字段顯示不完整,這時候就需要手動支持調節列寬,或者懸停tips展示全部內容。再比如想要復制某段內容,而文字展示不全,又不支持調整列寬,這時候要么在比較常用于復制的字段后面跟個“復制”圖標,或者懸停出現tips的時候鼠標移上去不會馬上消失,這樣用戶就能框選文字復制了。



          5.1.4、靈活性


          表格設計的時候不一定能覆蓋所有用戶和場景,因此需要預留一些靈活調整的空間,下面介紹幾個常用點。

          • 調整字段順序。有些產品為了能讓用戶根據習慣更靈活地查看內容,會讓用戶直接拖拽表頭進行重新排序。
          • 調整字段寬度。表格內容有些長度是未知的,在使用的時候發現信息看不全,因此通過拖動可以快速調整字段寬度。


          5.2、表格元素


          表格元素包含了背景、數據(文字、圖片、圖標、標簽、附件等)、序號、邊框、選擇框、操作項、斑馬線等。這些在設計表格的時候都是設計師需要去定義展示形式


          5.3、操作列


          為什么要單獨把操作列拿出來講,因為操作列的設計蘊含了太多內容需要考慮,設計師在設計的時候很容易忽略。


          5.3.1、形式


          目前操作列按鈕主要兩種形式,“圖標按鈕”和“文字按鈕”,圖標按鈕主要用于比較簡單易懂的一些常規操作,優勢是長度可控,容易對齊,劣勢是,有時候需要懸停上去才知道含義,不夠直接;文字按鈕用的范圍比較廣,簡單明白,缺點是長度不可控,不好對齊。



          5.3.2、數量控制


          操作列和復選框一樣,一般作為固定列,不隨著字段橫向滾動。數量也不可控,根據業務情況,有多有少,因此在做的時候要解決數量問題,如果全部展示,則勢必影響內容的展示面積,因此設計師根據真實的操作數量設定固定列寬度規則,操作項超過一定數量或一定長度做“更多”按鈕收納。還有一種展示方式,默認不展示,鼠標懸停展示該條數據需要展示的操作,這樣既可以解決信息展示面積問題,又不需要考慮和其他行數據的操作對齊,還不需要定操作列列寬規則,缺點是,不夠直接,如果不懸停就不知道還有操作項。有的產品干脆直接把操作項去掉,全部采用上面的全局操作,勾選數據后執行,總之各有各的優缺點。



          5.3.3、操作狀態


          設計師經常會困惑,什么時候操作禁用,什么時候隱藏。按鈕隱藏一般根據數據權限控制,“隱藏”通常是角色無該操作權限的時候采用,“禁用”通常是由于數據本身的問題導致暫時性失效。舉例個例子,組織架構的頁面,管理員對所有組織架構和成員有編輯和刪除權限,而普通員工只能查看數據,這時候操作按鈕就需要隱藏。再比如訂單功能,有的訂單已經進入審批環節不可刪除,那么它的刪除按鈕就會變成禁用,而有的訂單還未進入審批環節,這時候是允許刪除的,這時候刪除按鈕就會亮起。


          5.4、分頁器


          數據量比較大的時候會用上分頁器,設計師在設計的時候也要定好默認一頁幾條,不然開發就會根據自己的臆想來做。分頁器位置的設計也分兩種,在表格上方和表格下方,市面上看到的大部分都是在下方。放在下方就有個問題了,是要固定頁面位置還是隨著表格自動計算位置?我對比了幾個比較成熟的產品,大部分都是固定在底部,不隨著頁面滾動,整個頁面滾動的區域只有表身,有小部分是跟在表格尾部,每頁條數超過屏幕高度可展示量,分頁器就會被擠到下面看不見,這種好處就是省了一點展示空間,不好的地方就是,要想再使用分頁器得往下找。還有極小部分產品兼容了這兩個方案,當條數少的時候跟在表格尾部,當條數多的時候,會頂在底部,類似固定釘功能??傊还懿捎媚姆N方案,都要兼顧便捷性和易用性。



          5.5、表頭


          5.5.1、表頭篩選


          表頭篩選平時用的比較少,因為外面已經有獨立的篩選功能,有些也放出來,補充一些不常用的篩選。



          5.5.2、表頭排序


          排序規則主要由產品提供,設計需要知道一下。一般默認是以產品的創建時間為排序,排序不帶具體業務含義的一般采用時間倒序,最新數據在表格最上面,這樣每次新增數據就可以快讀看到,不用劃到最后面甚至翻頁后才能看到。有的采用時間正序,最新的數據在最后面,這種一般是數據本身帶有排序屬性,如果貿然在最上面插入數據會打亂已設定好的順序,這種帶排序屬性的表格,往往還有調整順序的操作。觸發排序一般只需要點擊表頭即執行,通常點一次會進行正序/反序,再點一次會反過來,再點一次取消排序。如果點另一個字段的排序則默認會采用最新的排序字段。



          5.5.3、表頭提示


          有些比較難懂的字段需要在表頭增加一個提示信息,來輔助用戶理解字段含義



          5.6、表格配置解決方案


          前面講了表格的各種屬性,為了使用的靈活性,有些成熟的產品會設計一個設置表格屬性的功能,可以讓用戶自定義表格屬性,如字段展示(篩選)、字段順序、字段對齊方式、字段固定列、是否展示序號、斑馬線等。事情有利必有弊,靈活也意味著學習成本高和投入開發成本大,是否需要做有各自的真實情況決定,不過作為設計師得知道,這些就是你能雕琢的地方。



          六、額外功能


          還有一些額外的設計過程中你不一定會注意到但挺好用功能推薦。


          6.1、只看已選


          在選擇數據的時候,為了便于一眼看到選中的數據,會做這個么個操作。



          6.2、已選數量


          表格的選擇,默認一般是不支持跨頁選擇的,所以產品或者設計需要要求開發支持跨頁選擇,而一旦支持跨頁選擇,就容易忘了到底選了多少條,因此會展示選中條數,以及一鍵清空選中,這個功能還可以和“只看已選”功能混合著用。



          6.3、只看表頭


          對于有些帶明細數據的表單,通常在表單中會分表頭和明細(表身),舉個例子,商品訂單中會包含一些像訂單編號、客戶名稱、發貨時間、發貨地址等等這種,叫做表頭。像具體的明細數據,如訂單中包含100個a商品,200個b商品等等,叫做明細(表身),因此在列表功能展示的時候有時候需要一眼看出明細數據,就會以表身明細數據為主數據展示,但是數據量會蹭蹭往上,因此用戶可能會選擇是按“表頭”數據展示還是按“表頭+明細”數據展示。



          七、總結


          列表頁承載了一個b端系統半壁江山,設計師在設計過程中需要不斷打磨,設計出符合自己產品特性的列表。





          作者:落難的黑人      來源:站酷



          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



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



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

          打造詩詞視聽盛宴,傳承古典文化之美 | 百度教育

          seo達人


          前言概述

          百度教育“好詩連連”是一款輕松有趣又別具中國古典美韻的學習平臺,在2022年先后榮獲設計界三項國際知名大獎:德國紅點品牌與傳達設計獎、美國Muse Creative Awards 金獎、韓國K-design 設計獎。本文分享設計團隊是如何通過精湛的多維設計打造詩詞視聽盛宴,讓用戶感受到傳承千年的詩詞魅力,喚起用戶對古典文化的熱愛。

          圖片

          好詩連連—中國古詩詞學習平臺古詩詞是古人用最精煉的文字傳達所思所想的文學載體。但隨著幾千年時間的演變,注重表達效率的白話文逐漸替代了古人凝練、富有韻味的文字。傳統詩詞離我們的日常生活越來越遠,閱讀和背誦詩詞常常被認為是無聊和困難的。為了激發用戶對古詩詞的興趣,我們構建了趣味化的體驗幫助用戶輕松地學習。

          點擊圖片前往原文觀看視頻

          一、設計主旨:沉浸式國風視聽盛宴,傳承詩詞文化之美一  唯美意境 詩詞悟得到 · 打造沉浸式國風視聽盛宴

          王勃《滕王閣序》中千古名句 “落霞與孤鶩齊飛,秋水共長天一色” ,勾勒出一幅寧靜致遠的畫面讓人動容,中華古詩詞之美,含蓄而生動。我們在設計上營造唯美意境,體現詩詞的韻味之美。通過提取中國傳統文化中的古典色彩及傳統紋樣、琵琶與古箏的音韻,將傳統元素與現代審美融合,重組詩詞新國風設計語言,還原詩詞意境,構建全新【寓教于樂】的游戲化學習體驗,賦予詩詞新的文化魅力。

          1.視覺語言體系

          1.1 從東方古典色中提煉色板

          我們從壁畫丹青、紫禁紅墻中汲取色彩靈感,采用低飽和度、柔和而優雅的配色,使東方色彩美學的悠然、自然與詩意自洽融合;同時還采用山水碧綠中的翠濤、醽醁,紅墻中的海天霞、十樣錦,壁畫中的青鸞、檀唇,構成整個畫面中的古典色彩秩序。

          圖片

          1.2  提煉中國風視覺語言符號,形意結合,傳情達意

          通過借形法、取意法、形意結合法提煉國風元素與圖騰、傳統文化中寓意吉祥的紋樣,傳達美好寓意;東方古老的鳳凰展翅高飛,指代源遠流長的中華文化;烏紗帽與宮殿寓意學業精進、金榜題名;寄情山水與出淤泥而不染的荷花,更為文人雅士所鐘愛。

          圖片

          1.3  確立繪畫手法

          運用類工筆的繪畫手法,白描勾線,結合筆墨丹青的暈染,來營造詩詞如畫卷般的唯美意境。

          圖片

           

          2. 聽覺語言

          古代詩歌最早是用來吟唱,它注重聲律、音韻、平仄、對仗,講究韻律和諧、抑揚頓挫;白居易《琵琶行》中描寫 “轉軸撥弦三兩聲,未成曲調先有情”,沈約《詠箏》“秦箏吐絕調,玉柱揚清曲” 中描寫箏曲抑揚自如,清妙悠揚;在音效的選擇上,采用古箏、琵琶的音色來營造古風意境,音符配合點擊、滑動、任務完成等反饋,讓人沉浸于詩詞的氛圍中。

          圖片

           

           

          二  趣味學習 詩詞背得快 · 搭建趣味玩法及激勵機制

          趣味化游戲機制,基于心流理論設計,解決了詩詞學習體驗中用戶常見的枯燥、挫敗的負面體驗,構成了詩詞知識獲取、學習和背誦的完整學習機制。設計了詩詞連線、詩詞對戰、成語填空三種多元游戲模式,加強詩詞背誦和相關知識的扎實記憶,讓學習更快更有趣。

          圖片

           

          1. 基于碎片化場景,設置合理游戲任務模塊1.1  操作容易  降低學習成本用戶通過指尖滑動操作,劃線選出正確的句子,拼出完整詩句;而輕量提示卡,幫助用戶快速回想詩詞,減少挫敗感。

          圖片

          1.2  難度漸增 有序拓寬知識邊界

          詩詞對戰,在線匹配用戶進行回合制的知識點比拼,在設計上單局顆粒度小,內容難度逐級遞增,讓用戶在循序漸進中掌握詩詞知識點。

          圖片

           

          2. 學位制激勵:將游戲排行榜與中國科考等級巧妙結合

          游戲排行榜使用中國科舉制度中的狀元、榜眼、探花的等級稱號,結合官帽的視覺元素,將用戶代入古代科舉放榜時的情景,激發用戶深入學習詩詞知識的持續挑戰欲,進一步增強古典文化的意境體驗。

          圖片

           

           

          三  智能關卡 海量內容 · 詩詞記得全1. 智能感運用AI技術自動識別并生成游戲關卡,內容難度逐級遞增、循序漸進,根據用戶作答結果,即時反饋并匹配對應內容,構建個性化的學習體驗。

          2. 海量數據庫資源數字化收錄28萬首中國古詩,幫助用戶擺脫繁重的紙質典籍,隨時隨地掌握詩詞知識。

          圖片

          傳承古典詩詞文化之美

          通過百度教育好詩連連,我們讓沉睡在紙質典籍中,以詩詞為代表的文化遺產煥發時代光彩與蓬勃生機,鼓勵用戶學習和感受傳承千年的詩詞魅力,重新喚起當代年輕用戶對傳統詩詞文化的熱愛和理解,也使便捷輕松地獲得詩詞知識樂趣成為可能。

           


          作者:文教互娛用戶體驗

          轉載請注明:學UI網》打造詩詞視聽盛宴,傳承古典文化之美 | 百度教育

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


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


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




          有駕在現場 車展品牌全案設計【百度】

          seo達人


          一、什么是“有駕在現場”

          有駕是百度旗下汽車信息與服務平臺,累計用戶超5.3億,致力于為用戶提供真實、可靠的看選買車服務,以及為車企和經銷商提供從品牌到效果的一站式互聯網營銷解決方案。

          車展對有駕來說是一個流量爆發的大事件,2021年廣州車展期間有駕品牌全網曝光累計6.3億次,創歷史新高。而【有駕在現場】是百度有駕歷年車展系列活動沉淀下來的品牌IP,已經成為活動固定的品牌標識。

          圖片

           

          二、借勢大事件,打造車展品牌全案

          借勢車展的關注度與影響力,我們想要通過分析調研總結,對本次車展進行視覺定調,建立品牌識別體系,沉淀專屬有駕車展活動的品牌符號和印記;進行線上線下聯合推廣來打造有駕車展品牌全案,提升有駕的品牌影響力;優化活動體驗來為平臺進行引流,讓用戶對有駕產品有更明確的認知。

          同時由于車展項目涉及跨部門合作,我們希望可以通過車展品牌全案,統一不同分工輸出的設計物料視覺一致性,以達到提質增效的目的。

          圖片

          以打造品牌全案為出發點,我們梳理了以下項目計劃。

          圖片

          同時,通過有駕用戶畫像分析,建立用戶標簽,分析用戶屬性及偏好,以更好的觸達用戶。數據顯示有駕APP大部分用戶為常駐中高線城市的年輕男性,經歷著數字化信息時代的便利,同時也受到更好的教育和各界多元的文化影響,更大膽更容易被新的東西所吸引。

           

          三、分析項目現狀總結優化點

          根據過往車展項目分析,總結發現存在品牌識別度較弱且沒有統一規范、品牌統一性較弱導致用戶認知成本較高等問題。

          圖片

           

          四、提煉品牌關鍵詞

          根據用戶畫像及現狀分析,明確業務需求,通過腦暴的形式羅列品牌關鍵詞,基于品牌DNA對有駕車展進行視覺升級需挖掘符合核心用戶的語境語言和視覺偏好,提煉出品牌關鍵詞,根據關鍵詞規范可延續的品牌元素,打造清晰的品牌全案以更清晰的指導后續視覺設計工作。

          圖片

           

          五、視覺定調

          根據關鍵詞確定了以賽博朋克風格為視覺基調,通過三維建模搭建北京地標建筑場景,搭配大膽的配色和新穎的元素樣式打造潮流個性且具有未來感的視覺畫面,匹配車展品牌的創新理念。

          同時,在活動玩法方面,通過優化活動玩法,多條件激勵用戶給予用戶沉浸式的體驗。

          圖片

           

          六、建立品牌體系

          確定基礎視覺調性后,我們通過形色質構來規范和輸出有駕車展品牌vi規范,建立有駕車展品牌體系,以提升視覺的產出效率,確保線上線下視覺輸出的一致性。

          圖片

           

          七、品牌LOGO

          【有駕在現場】是有駕多年延續下來的品牌基因,本次車展也將繼續夯實品牌資產,進行優化升級傳遞品牌調性。

          由于舊版的字體圓角等設計樣式相對柔和,不能準確表現本次車展視覺調性。為了傳遞有駕車展的潮酷、未來感,設計上將舊版文字加粗,圓角調整為直角,并進行一定的傾斜處理,使字體展現更加果斷硬朗;同時,我們將部分筆畫進行連接,讓字體充滿動感或速度感;最終的字型效果運用有駕品牌藍綠色光效以更好的與畫面結合。

          圖片

           

          八、色彩嘗試

          由于整體風格參考賽博朋克,配色方面基于有駕品牌色進行延展,輔助色起到平衡主色的沖擊效果、活躍視覺,釋放潮流激情,突出重點模塊;元素上嘗試漸變色豐富元素樣式。

          圖片

           

          九、組件化通用元素

          通過組件化通用元素,不同物料可以快速復用,節約設計成本,解決整個活動的視覺一致性,同時可以沉淀設計資產。

          圖片

           

          十、車展主KV

          根據關鍵詞【未來感】【年輕化】分析適合有駕的設計風格和調性,通過三維建模的畫面表現形式,構建充滿科技感的賽博朋克畫面,打造潮流科技的有駕車展基礎場景。

          主視覺場景設定為高樓聳立的公路上,有駕跑車向“有駕在現場”北京車展活動現場飛馳。充滿速度感的跑車、霓虹燈牌、高樓大廈色調和質感的碰撞,傳遞出一種直觀的科技感,引領新時代年輕用戶和有駕一起駛向未來。

          根據上述的內容進行車展主kv的場景設定,輸出了草圖方案。

          圖片

          整個場景圍繞“有駕在現場”進行設計,融合車展相關元素,滲透品牌標識。

          采用3D和2D相結合的形式,用C4D進行場景搭建,OC渲染器進行燈光材質的渲染,反復修改調整場景布局、元素等,最終輸出三維設計圖后進行PS后期,輸出最終的主視覺。

          圖片

          根據以上內容,輸出了對應的車展VI規范。

          圖片

           

          十一、車展專題頁

          根據主KV及VI規范進行專題頁的延展,部分內容復用過往車展框架模塊。

          新增了導航欄設計,便于用戶快速跳轉到感興趣的內容模塊,導航圖標大膽創新嘗試漸變色融合的配色形式,讓扁平的圖標有更加豐富的呈現。在保證閱讀效果的前提下,標題樣式、頁面元素及配色上更加潮酷。

          圖片

           

          十二、集卡分百萬 引流活動

          過往集卡活動不僅與產品、車展契合度高,并且收益明顯,因此本次北京車展活動將復用、優化集卡類活動,讓用戶沉浸式集卡,從而提升用戶活躍及量級。

          圖片

          在玩法方面,本次集卡活動延續過往活動做任務得車卡的主玩法,優化活動體驗,新增了合成稀有卡可參與大轉盤抽獎的玩法以激勵用戶集卡,同時設立了車展大眾日,在當天進入活動的用戶可以獲得現金紅包,以此來激勵用戶回流,豐富活動玩法。

          圖片

          集車卡活動的主視覺元素及配色是依據vi規范,保證整體品牌調性的統一;普通靚車卡背景延續主視覺背景,稀有卡嘗試不同配色和場景凸顯其特殊性。

          圖片

          除了專題頁和集卡活動,線上還包括端內社區活動設計,整體視覺調性都與我們輸出的車展品牌vi保持統一。

          圖片

           

          十三、倒計時海報

          為了給車展開幕造勢,我們嘗試復用主KV的三維建筑模型,將倒計時1、2、3與不同視角、不同配色的場景相結合,整體風格和車展主視覺保持一致,輸出了三張倒計時海報,豐富了整個項目的宣傳內容。

          圖片

          圖片

          整個車展項目除了線上運營活動、造勢海報,還有線下展會宣傳物料及其他第三方輸出的設計物料,整體視覺調性都是基于我們輸出的車展品牌VI進行視覺延展,保持統一性的同時,又各自有不同的視覺傳播效果。

          圖片

           

          十四、總結

          【有駕在現場】作為百度有駕車展品牌活動,我們通過未來感、年輕化、體驗感三個維度來塑造有駕車展系列活動的品牌調性,搭建了基礎風格,建設三維賽博朋克高品質主視覺,視覺元素細節驚喜感打磨,通過優化活動玩法進行引流,沉淀出新的大事件視覺設計思路,打造了有駕車展品牌設計全案。

          未來我們的思考不僅僅只局限在視覺的表現上,還要繼續挖掘品牌系列化活動的延續性與獨特性,同時更要通過合理的情感互動建立和用戶的鏈接,為品牌長線發展提供更多價值。


          作者:設計中臺

          轉載請注明:學UI網》有駕在現場 車展品牌全案設計【百度】

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


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


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



          新手學習字體設計的高效三步法

          seo達人

          一、臨摹

          臨摹是新手學習任何技能都需要經歷的階段,學字體設計自然也不例外。即你要去收集一些優秀的字體設計作品,然后照著它們來臨摹。

          很多人會瞧不上臨摹,認為照著參考一模一樣做誰都會,事實上真要做起來,很多人都臨摹不好,而且臨摹的方法也不對。那么,如何正確地臨摹呢?

           

          1、不要像摳圖一樣,用鋼筆工具直接沿著參考的外輪廓描摹。

          而是要照著參考畫出文字中的主要筆畫,諸如:橫、豎、撇、捺、點、提、勾等,然后,用這些筆畫照著參考的樣子一筆一筆把文字搭建出來。

          圖片

           

          2、如果遇到相同的筆劃,不要重新畫。

          而應該把已有的筆畫直接復制過去,有時可能需要做一點簡單的變化,這么做可以最大程度上保證筆畫的統一性。

           

          3、剛開始可以直接在參考的基礎上用筆畫來搭建文字。

          就好似描摹一樣,與參考一一對應,等熟練之后可以自行繪制筆畫,通過視覺來確定筆畫的粗細、長短、結構、擺放的位置等等。

          舉個例子,如果要臨摹下圖的字體設計,我們可以先把它的筆劃畫出來,如果抓不住筆劃的特點,或者線條畫不流暢,可以在原參考上把筆劃描摹出來。

          圖片

          圖片

          接著,再根據參考畫出文字的字框,以確定文字的寬度和高度。

          圖片

          然后,照著參考在字框里用筆畫把文字組合出來。

          最后,再仔細觀察文字筆劃的尺寸和位置是否正確,盡量做到與參考一模一樣。

          經過一段時間的臨摹練習,你不僅可以更熟練地使用鋼筆工具,同時也能掌握一些字體設計的風格、筆畫特征、字體設計的流程等等。

           

           

          二、通過參考,舉一反三

          當臨摹做得已經很熟練以后,就可以開始第二步的練習了,即遵照參考中字體設計的風格、特點,設計自己想要的其他文字。其實在實際工作中、很多設計師也會用這種方式來設計字體。想要做好這項練習,首先你要做的是對參考作品進行深度的分析。

          諸如對字體類型、字形、字體風格、重心位置、中宮松緊、筆畫粗細、筆畫結構、筆畫的對齊關系、有哪些特殊的處理技巧等特點進行分析。

          比如我想根據下圖的字體來設計文字:起來嗨。那么我就先要對參考中的字體設計進行分析:

          圖片

          該字體為無襯線體,風格簡約而現代,筆劃并沒有講究嚴格的對齊,甚至刻意做了錯位處理,各文字的字面大小也不統一,呈現出靈活多變的感覺、筆劃較粗,橫豎筆劃的粗細一樣、橫筆劃右端有類似直角三角形的襯線、部分筆劃交匯處會把橫筆劃做斷開處理、點筆劃和個別捺筆劃被設計成圓點、口部首被設計成圓圈等等。

          把參考的設計特點分析出來以后,緊接著需要把我們想設計的文字,用一個常規的字體呈現出來,由于參考中的字體設計是無襯線體,所以我們可以選擇黑體作為字體設計的觀察對象,看看該文字中有哪些筆劃可以直接挪用參考中的,有哪些則需要自己來設計。

          接下來就要著手畫草圖了,需要注意的是,參考中的文字做了整體垂直向上傾斜,在設計字體的時候如果直接設計成傾斜狀態,那么很多筆劃處理起來會不方便,所以最好先設計成水平狀態的,等確認無誤后再做傾斜扭曲。

          圖片

          另外,在畫草圖的時候要多做嘗試,對于原參考中沒有的筆畫,我們要從現有的筆畫中找到規律,這些部分的設計沒有絕對的標準,關鍵是要好看、要協調、要與整體的風格相符。比如“起”字下邊的“人”筆劃,可以借鑒參考中“辶”的處理方式。

          草圖畫好后就可以去電腦上做最后的執行了,在執行的過程中需要注意以下幾點:

           

          1、草圖不是標準,只是執行的思路。

          所以在執行的過程中仍可以進行調整、修改。

          圖片

           

          2、一邊設計一邊規范。

          如果你不是在專業的創作本上繪制的草圖,那么你的草圖通常是很不嚴謹的,那么在電腦上操作的時候就要邊設計邊規范,比如統一筆劃的粗細和結構、統一筆劃斷開部分的間距、注意某些筆劃之間的對齊關系等等。

          圖片

           

          3、與參考對比。

          字體初步設計完以后,要把其與參考放在一起進行比較,看看還有沒有處理不到位、看起來不夠舒服的地方,水平狀態調整完以后,再把文字按照參考的樣子往右上方做傾斜處理,然后繼續觀察以及做最后的完善。

          圖片

          圖片

           

           

          三、原創字體設計

          如果你能熟練地做到通過參考舉一反三,那么你的字體設計能力已經初步形成,接下來就可以做原創了。做原創字體設計時我們要注意以下幾點:

           

          1、做原創也可以找參考。

          只不過不要完全按著一個參考來做,我們可以結合好幾個參考,也可以在參考的基礎上加入自己的想法、做出一些改變等等。

           

          2、設計的流程

          A.根據要設計的文字、找到符合設計需求的參考。比如我需要設計的文字是:奇遇驚喜,并想設計成有種浪漫、古風的感覺。所以我找了下圖的字體來做參考(造字工房逸鋒體),該字體字形修長、結合了宋體和黑體的特性,筆劃橫細數粗但沒有襯線,現代而優雅。

          圖片

          B.加入自己的想法。用常規的的字庫字體把要設計的文字呈現出來,與參考放在一起進行構思。參考中的字體雖然現代而優雅、但是作為字庫字體,獨特性自然會有所欠缺,另外筆畫還是略過復雜,沒有古風和浪漫的感覺,所以我想把筆畫繼續做一些簡化,并加入祥云圖形。

          圖片

          圖片

          C.畫草圖。

          可以先畫文字的骨骼部分,以確定文字的基本架構,文字的骨骼決定了文字的基本氣質,比如高矮胖瘦、中宮松緊、重心高低、筆畫走勢等等,這也是設計師可以大做文章的地方,很多優秀的字體,在骨骼上就與普通字體有著很大的差異。這里我把文字的骨架設計得比參考更為修長。

          圖片

          骨骼畫好以后,再添加字體的肉身,即筆形,筆形決定了筆劃的粗細、端點、襯線、筆劃交匯處的處理等細節效果,這些部分的變化也非常多,設計師可以根據文字本身的特點和參考進行多種嘗試。

          圖片

          作為字體設計師,了解一些不同筆形的處理技法也很有必要。

          圖片

          ▲ 部分橫筆畫的筆形表現。

          D.把草圖導入到設計軟件中執行。草圖畫好以后就可以去電腦上執行了,執行的步驟和注意事項與“舉一反三”里提到的差不多。

          圖片

           

          3、注意文字的統一性。

          在設計字體時,要注意整體的統一性,要讓人感覺到這是一套字體,所以原則上來說,每個字的字面大小、重心位置、中宮、相同的筆畫等等,都要統一起來,當然,不包括某些為了效果靈活而刻意作出的一些特殊處理。

          圖片

          圖片

           

           

          圖片

          臨摹、舉一反三、原創,簡單的三步就能幫你從一個新手變成一個熟手,其實除了字體設計,很多其他類型的設計同樣是這個道理。當然,最重要的是你要能走出第一步,先做起來,然后要堅持下去。

           

          作者:蔥爺

          轉載請注明:學UI網》新手學習字體設計的高效三步法

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


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


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



          好難啊,一遇到場景插畫,我就廢了!

          seo達人

          輕立體的插畫小場景在平時設計中應用到的地方有很多,我們來分享一下在這次項目繪制的過程中走過的彎路和流下的淚。先來看一下優化的整個過程吧!

          圖片

          可以看出來第一版和最終版的效果對比是非常大的,第一版給人感覺如同一個半成品,場景輕飄飄的,顏色上幾乎沒有什么明暗對比,太過統一沒有分清處層次,而且細節不夠豐富。

          圖片

          通過第一版我們可以看出可以通過一下幾個方面去做層次方面的優化:

          一、增加主體細節

          1.刻畫熊熊主體

          2.優化鴨子的造型

          二、加強明暗對比

          1.加強主體和椅子的明暗對比

          2.加強背景和前景的明暗對比

           

          一.增加主體細節

          1、刻畫熊熊主體

          之前的熊熊作為主體本身刻畫的細節層次和背景的刻畫程度近似,我們要把主體變得有看點才能分清前后的關系,可以在熊的五官和服裝上進一步添加一些細節。

          例如給熊的五官添加表情,把墨鏡添加一些裝飾元素,讓視覺可以集中在熊的五官上。

          圖片

          同樣我們還可以在服裝上添加一些花紋的裝飾讓整個熊熊的主體看起來更加細致。

          圖片

          同時要注意熊的姿勢是頭部在前,胳膊在后,可以在刻畫的時候加入一些投影,加深胳膊的暗部,區分一下頭部和胳膊的層級關系。

           

          2、優化鴨子的造型

          鴨子的造型我們把游泳圈直接改成了小黃鴨漂浮物,游泳圈中間的鏤空讓視覺看起來不夠緊湊,同時我們也優化了鴨子的眼睛和嘴巴,讓鴨子看起來更精致一些。

          圖片

          然后去加強頭部和鴨子身體的前后區分,加入投影,讓它更加立體。

           

           

          二.加強明暗對比

          我們可以把整個小場景的明暗做一個區分,最亮的是熊,然后是鴨子,然后是地毯,最后是椅子,椅子作為地毯和熊之間的一個暗部,可以讓畫面有一個明暗的節奏,同時和熊的主體形成對比。

          圖片

          接下來要做的就是加強暗部和亮部之間的一個對比,體現整個空間的前后關系。

           

          1、加強主體和椅子的明暗對比

          我們把熊和椅子的明暗區分的更加明確一些,把椅子的飽和度和色相進行紫色調和低飽和度的一個調整,用對比色來拉開兩個物體的區別,加深熊的整個暗部,交代熊在床上清晰的投影。

          圖片

           

          2.加強背景和前景的明暗對比

          優化以后發現背景的植物和星星比較跳 我們去進一步加深背景讓背景往后退,同時把地毯的顏色提亮一些讓整個后景有一個區分。

          圖片

          然后我們去微調一下椅子的顏色讓椅子的顏色不要那么臟,把地毯顏色也調的明亮一些,形成對比,就到了咱們的第二版畫面:

          圖片

          第二版畫面再往后優化就是細節的調整和進一步加強明暗的區分。

          我們從以下幾個方面再去進一步區分畫面:

          一、明暗的進一步區分

          1.背景區分

          2.椅子自身的明暗區分

          3.椅子和地毯的區分

          二、添加正確的投影

          三、添加環境光

           

           

          一.明暗的進一步區分

          1、背景區分

          背景明暗的區分需要把植物部分去壓暗,同時把比較跳的星星稍微壓下去一些,做一個顏色上的過渡,加地毯的反光,讓星星的顏色退到后面去,然后給植物加上床的部分投影,空間關系更加明確一些。

          圖片

           

          2、椅子自身的明暗區分

          下一步我們要對椅子進行優化,目前的椅子沒有區分開明暗面,反而暗部的反光太強,亮部的顏色飽和度又很低,導致立體度出現了反向效果。

          我們要做的是把椅子面向光的面亮起來,背陰面暗下去,而不是亮部暗,暗部亮。

          圖片

          然后我們又發現,現在椅子的顏色對比度不夠,并且椅子腿上透視有一些問題。

          我們繼續去把椅子的顏色調暗,同時要在亮部去加入椅子受光的顏色變化,我們可以加入一些偏亮的純色,暗部做一些小的反光的變化,讓椅子更加有光澤度。

          圖片

          注意這里椅子腿也是有前后關系所以靠后的椅子腿要更加的暗一些,受光也少一些,同時給椅子腿上加入床的一個陰影。

          但這還不夠我們要進一步去加強整個畫面的對比。

           

          3、椅子和地毯的區分

          我們接著去把地毯的顏色提亮,同時把亮部光照的地方做一個暖色光照的處理,加深床的投影把投影交代的更加清晰一些,讓有顏色對比的同時也要有上下關系的對比。

          圖片

           

           

          二、添加明確的投影

          在整個過程中投影的進一步明確是增強一個立體和層級關系的關鍵,我們以鴨子、床、以及熊在床上的投影做一個前后的對比。我們要注意的有三點:

           

          1、統一投影的方向

          每個物體上都要有明暗的一個對比,如鴨子之前幾乎看不到暗面和投影,我們要去分析事物和鴨子的一個前后關系,再去添加植物后面的投影,讓鴨子看起來更加立體。

          圖片

           

          2、投影落地的形態

          注意落地點,不要讓影子浮在半空中,就像之前床的影子和星星的影子過于飄,整個物體看起來都沒有落地。

          圖片

           

           

          三、添加環境光

          1、減掉整體的內發光

          雖然在這種輕擬物畫風上有很多的物體有一些輪廓光和反光,但并不是統一直接去加一個內發光,我們要重點做的是通過環境光來加強對比,整個的內發光會讓物體失去明暗。

          拿鴨子舉例子,過強的光源會讓鴨子顯得很平。

          圖片

          我們可以加強暗部,在暗部做一些微弱的反光,在亮部加入一點輪廓光。讓整體更加的飽滿立體。

           

          2、根據不同的物體添加環境光

          熊熊主要的環境光是床的紫色反光,我們在添加的時候注意不要把床反光的顏色過于后厚重或者沒有顏色傾向。

          圖片

          調整好一個環境光后我們再去整個添加熊環境光。這樣整個畫面的優化就完成了。

          圖片

          我們來最后看一下第二版和第三版的對比效果

          圖片

          整個畫面明暗對比更強,而且顏色上更加通透,光影和諧統一,也具有更好的完整度。

          本次文章可以吸收的知識點有很多,希望大家可以和我一起在總結中收獲知識,取得進步,一個小場景塑造的立體有層次涉及到的點方方面面都會有,我們要注意繪制時多去做比較,同時保證整體明暗的對比效果和細節的刻畫調整。

          希望大家以后在繪制輕擬物場景插畫上道路不迷茫,一起去打造令人眼前一亮的畫面吧!

           

          作者:牙牙

          轉載請注明:學UI網》好難啊,一遇到場景插畫,我就廢了!

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


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


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



          中后臺產品的產研協同提效調研

          seo達人


          一、目前有哪些提升設計與前端生產力的方案

          1、D2C(Design To Code)

          D2C(Design to code)這個模式我們非常熟悉,其本質是將設計師的設計資產轉化為代碼,讓前端工程師可以快速的復用,在這個成熟的領域主要分成兩大類:「設計資產類」和「設計對接類」

          a. 設計資產類

          設計資產類是完整系統的規范和代碼進行沉淀形成設計類的資產,這一類的產品在市面上目前是屬于主流,產品有網易的Fish Design(網易自研)、Ant Design、Arco Design、Element 等,這些產品都是將組件化的設計資產轉化為代碼資產,方便前端工程師在開發 B 端產品頁面時可以快速引用,提升開發的效率。

          圖片

          b. 設計對接類

          設計對接類又分成「設計稿查看類」「設計稿代碼生成類」兩種類型:

          設計稿查看類:主要是 D-box(網易自研)、figma、藍湖等可以讓前端工程師在線查看設計師的設計稿并提供一定的轉化代碼方案,主要是為了保障產品的還原度。

          圖片

          設計稿代碼生成類:最近兩年為了徹底的解決還原度的問題,讓前端工程師專注的解決代碼問題「設計稿代碼生成類」也開始在市場嶄露頭角。

          比如:Imgcook、Codefun,直接復制設計稿地址進入軟件內部轉為代碼文件,直接導出完整的靜態頁面代碼,減少開發過程中的樣式調整問題。

          直接導出整頁代碼模式的小缺陷是無法滿足開發中:代碼精簡(ai 智能生成的代碼對目前還達不到開發人員喜歡的程度,較為冗余)、控件交互、綁定數據等幾方面的需求,但是比如在一次性的靜態頁面的實現中還是能夠達到提效的目的。

          圖片

          結論:D2C模式的產品相對獨立,從定義還原度「設計資產類」、保障還原度「設計稿查看類」、解決還原度「設計稿代碼生成類」層層遞進,可以有效提升設計師和前端工程師的生產效率和協同效率。

          但在目前競爭激烈的大環境中,優秀團隊的效率提升已經達到瓶頸,而提效的本質是為了比競爭對手更快更好,當所有人都有了相同的東西時,提效的目標可能就需要從別的地方打開缺口。

           

          2、C2D(Code To Design)

          C2D(Code To Design)「前端代碼轉設計稿」這個模式對于設計師相對模糊,不過國外的企業已經做出了探索。

          比如:2017 年Airbnb 發布的前端開源模塊 React Sketch.app,其核心理念是用代碼做設計。第一次看到的時候感覺真的很酷,通過 React Sketch.app 直接在 Sketch 設計軟件中編譯出設計界面,代碼也可以直接在項目中使用。

          圖片

          還有另外一個產品叫 html-sketchapp,通過在輸入框中輸入網頁地址就可以直接在 Sketch 中生成可編輯的設計界面「網頁轉設計文件」,通過任何前端代碼都可以轉為設計資產的文件,甚至直白一些說就是參考成熟產品做設計,適度借鑒吧。

          圖片

          結論:目前的 C2D 的市場方案對于設計師而言不夠友好,無法讓設計師可以直接使用,都需要工程師來完成轉換,同樣也會遏制設計創新,陷入同質化的泥潭中。

          但這個模式,卻非常適合“有意”借鑒參考成熟或者競爭對手的項目團隊,可以快速達到同類型產品的基準水平。

           

           

          二、針對目前現狀,什么樣的方式可以實現提效?

          從我們當前的工作流程來看

          圖片

          在這個流程中設計最在乎的就是設計階段的表現需求和前端的設計還原,為了保障精準的表現需求,在設計階段需要大量的溝通和風格嘗試。

          在前端還原階段需要和前端不斷的扣細節,輸出幾百條信息的走查文檔,那應該如何解決這些問題?

          圖片

          答案就是「 C2D2C」的模式

           

          1、C2D2C(Code To Design To Code)

          C2D2C(Design to code to design)的模式,將流程中的設計表現和前端還原階段的通過設計標準化和研發工業化的方式進行流程優化,減少設計和前端開發的參與,實現中后臺研發流程的整體提效。

          圖片

          在十幾年的發展里互聯網行業積累了大量的設計資產。

          這些設計資產的沉淀是設計標準化的基礎,將設計資產轉為封裝好的代碼組件也就是 D2C 的過程。將封裝好的組件通過低代碼平臺進行屬性配置、搭建頁面、布局調整實現頁面的設計就是 C2D 的過程。

          通過平臺設定交互行為和綁定后臺數據,完成整個系統,最后在進行站點發布,就實現了 C2D2C 的完整流程。

          圖片

          C2D2C 的模式是設計資產與線上智能化布局的代碼方案(低代碼平臺)以及后臺數據綁定的結合,將以前的人工分工通過智能化方案綜合一體去解決。

          但這個過程不是僵化死板的模式,在C2D環節實現“設計->前端”的高還原度下快速落地,在D2C環節下實現“低代碼平臺->自有產品”的靈活調整下快速復制。

          結論:隨著社會的發展,標準化和智能化的產品線都將會被人工智能取代,互聯網行業也正在向這個方向發展,所以設計的標準化和開發的工業化就像手工業向工業化的轉型,這是一個大的趨勢,未來可能一天的時間就可以生產數套后臺產品,這樣的生產效率才能跟上中國的數字化轉型浪潮。

           

          2.、C2D2C 的市場化

          低代碼平臺 是 C2D2C 模式得以實現的核心平臺,從2018 年開始海外投資開始關注低代碼平臺,OutSystem 平臺獲得 KKR 和高盛的 3.6 億美元的融資,成為了低代碼賽道的獨角獸,另一家低代碼創業公司 Mendix 被西門子以 7 億美元的價格收購,資本市場的關注讓低代碼賽道開始火熱起。

          而國內的低代碼平臺是從 2020 年疫情肆掠開始,疫情助推了在線辦公的發展,國家也在大力支持數字化經濟,更多的企業開始數字化轉型,這也讓低代碼在國內有了飛速發展的土壤。

          目前海外比較成熟的平臺主要是 OutSystem和 Mendix,而國內也有很多已經商業化的低代碼產品,像網易輕舟等,已經開始投入商業化的使用,可以從網易輕舟的低代碼產品架構,清晰完整的看到C2D2C模式的所需要具備的能力。

          圖片

          網易輕舟從業務角度出發,具備持續迭代能力、組件具備可擴展性,并且可以為企業進行私有化部署,部署完成后可以和存量系統進行集成,交付后具備非常好的可運維性,是一個成熟的商業化平臺。

          網易輕舟目前已經服務了包括工商銀行、吉利汽車、申萬宏源證券、泰康人壽、臺州銀行等包括政府產業平臺30家,從服務的客戶我們也可以看的出來,低代碼產品在大型企業中落地更有優勢。

          結論:C2D2C 的模式已經得到市場的驗證,研發工業化可以更加高效的提升中后臺產品的研發效率,設計標準化也可以減少中后臺設計師大量的重復性勞動,對于中后臺的業務產品,可以大膽地選擇一個富有實力低代碼產品。

           

           

          最后

          低代碼平臺的使用需要同時具備一定的代碼能力和設計能力,這不管是對開發還是設計師都具備一定的門檻。目前的低代碼平臺使用角色應該是前端工程師,復雜的后臺交互平臺還是需要設計師的深度介入。

          低代碼平臺的誕生減少了中后臺設計師大量的重復性工作,可以讓中后臺設計師將更多的精力投入到用戶研究和提升用戶體驗上。拖拽式的 UI 和智能化的布局以及良好的用戶體驗和以前的開發相比較,在中后臺的開發上更加的高效也更加的智能。

          在最初調研到低代碼平臺的時候,行業的快速發展和成熟,讓我下意識的反應是中后臺的設計師可能要失業了,但是在調研了平臺的使用和深入的思考后,我覺得這是中后臺設計師的機會。C2D2C 模式的最優解應該是 0 代碼方案,而使用 0 代碼平臺最好的角色就是設計師。設計師專業的審美和對于用戶體驗理解的深度都是其他職業所不具備的,未來的中后臺設計師更應該將自己的精力投入到平臺流程的優化和用戶體驗的研究中去,這也在未來 0 代碼平臺到來后,我們才能更快更好的投入到新的生產中。


          作者:程鑫

          轉載請注明:學UI網》中后臺產品的產研協同提效調研

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


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


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



          好評如潮的10個知名logo設計

          seo達人


          一、英國石油logo

          圖片

          這個叫做太陽花的logo,一經面世就引起了社會強烈關注,除了傳說中的設計費用打破歷史紀錄以外,該設計方案也確實讓人眼前一亮,完全顛覆了英國石油以往的logo。

          圖片

          該花朵采用對稱構圖,從里到外一共分三層,顏色從白色到黃色再到綠色,呈現出綻放的姿態,寓意生機勃勃,永不凋落。這個誕生于2000年的logo,至今看來依然時尚、美麗。

           

          二、索愛logo

          圖片

          2001年索尼與愛立信聯姻,于是誕生了索尼愛立信這個品牌,新的logo也在這個時候應運而生,該logo一反主流的扁平風,采用了立體的漸變風,在當時可謂是獨樹一幟,十分驚艷,從logo上我們就能感受到強烈的動感和科技感。當時的設計需求中有兩個兩個關鍵點:“流動的形象”和“另一個自我”,流動的形象是指logo本身要具有強烈的動感,讓人感覺它是活的;另一個自我指的是要有個性,這兩點都在這個logo上得到了體現。

           

          三、墨爾本城市會徽

          圖片

          墨爾本是澳大利亞的第二大城市,該logo以墨爾本的英文Melbourne的首字母“M”為原型,圖形內眾多幾何色塊相比穿插,配合從藍色到綠色的漸變色,展現了該城市活力、新潮、多元、現代化、重視生態的城市形象。

          該logo的延展圖形也很驚艷,展現了該logo極高的延展性。

          圖片

           

          四、美國航空logo

          圖片

          該logo更新于2013年,在過往形象的基礎上做了重大突破,圖形由老鷹、品牌首字母A、飛機尾翼,以及星星組成,顏色來源美國國旗中的紅、白、藍,傾斜的尾翼圖形極具動感和速度感,簡單而明了,又沒有盲目跟風扁平化,漸變以及立體效果并沒有讓該logo顯得老氣,反而增添了一份品質感。

          圖片

          ▲ 美國航空過往logo形象

           

          五、beats耳機logo

          圖片

          該品牌以售賣耳機為主,所以在logo設計上,設計師采用品牌首字母“b”與紅色圓形結合,得到一個類似人在戴著耳機聽音樂的圖形,簡單而直接,讓人一看就懂且印象深刻,其中字母b的下半部分被抽象地處理成一個正圓,與外面的大圓形成同心圓關系,所以在視覺上非常和諧、美觀。

           

          六、北京申奧標志

          圖片

          該個logo由知名設計師陳紹華設計,圖形為采用具有中國特色的書法筆刷組合成打太極的人形,而且筆刷剛好為五筆,分別使用奧運五環的顏色,代表奧運,該logo把動感和中國文化展現得淋漓盡致,且簡單、獨特,一經面世,好評如潮,最終也為北京成功申奧貢獻了一份力量。

           

          七、廣州亞運會標志

          圖片

          該logo由設計師張強設計,圖形由廣州極具代表性的建筑:五羊雕像與火炬結合而成,五羊雕像的靈感則來源于古老的五羊傳說,象征著豐收、福瑞,以及廣州人民知恩圖報、勤儉樸實的品質,火炬象征著奧運以及熱情,最下邊的四個色塊形似跑道,象征著運動和競技 。

           

          八、杭州G20峰會logo

          圖片

          該logo的圖形部分為一座拱橋與水中倒影組合在一起的形態,橋是杭州很有代表性的元素,同時也象征了開放、包容、溝通和連接。橋的圖形是由20根同等粗細的線條組成,體現了參會的20個國家地位平等。另外,該logo在形式和排版上也是個性鮮明,logo的輪廓比較狹長,文字疊加在圖形上,使其融為一體,而不是像大多數logo那樣把文字與圖形完全區分開。整個logo從形式到配色都給人一種典雅、現代的感覺,廣受大家的喜愛。

          圖片

           

          九、蔚來汽車logo

          圖片

          蔚來是一家智能電動車企業,該logo的設計理念為:blue  sky coming,圖形設計上主要呈現了三個元素:上面的弧形代表天空,象征著未來、開放與目標;下面的箭頭圖形代表路面,象征著前進與行動,地面與天空的交界處是地平線,象征著無盡的遠方。整個logo圖形在一個正圓的基礎上設計,簡單而美觀,細節的雕琢也十分到位,個人覺得是國產汽車品牌logo設計中少有的亮眼之作。

          圖片

           

          十、廣州城市會徽

          圖片

          該logo由曹雪設計,logo的外形為廣州新時代的標志建筑:廣州塔。該圖形由左邊的弧形色塊和右邊的弧形線條疊加組合而成,二者剛好又是廣州二字,同時我們在該logo中還能看到帆船和飛鳥的影子,寓意廣州海納百川、生機勃勃,整個logo的形態給人一種現代、時尚、優雅的感覺,該logo一經公布,引起了廣泛關注,也收獲了眾多好

          評。

           

          圖片

          當然,21世紀優秀的logo還有非常多,但要說比較知名且好評較多的,我對這10個logo的印象比較深,縱觀這些logo設計,我們不難發現,他們幾乎都具備這么幾個特點:簡單、獨特、調性與品牌和行業吻合、符合時代審美等。知名品牌的logo設計具有非常的框架,設計師所面臨的壓力也是巨大的,能夠有如此出品和口碑屬實不易。


          作者:蔥爺

          轉載請注明:學UI網》好評如潮的10個知名logo設計

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


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


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



          日歷

          鏈接

          個人資料

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

          存檔

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