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

          首頁

          向世界知名的設計師致敬系列之一: 雷蒙德·羅維,約恩·伍重,菲利普·斯達克,榮久庵憲司,亞歷克斯

          藍藍設計的小編

          向世界知名的設計師致敬系列之一: 雷蒙德·羅維,約恩·伍重,菲利普·斯達克,榮久庵憲司,亞歷克斯, 亞歷克斯·塞繆爾森

          B端設計復盤系列——表單頁

          ui設計分享達人

          01表單概念

          表單頁作為基礎通用組件,也是B端產品中臺、后臺出現比較頻繁的頁面之一??此坪唵蔚捻撁嫖覀冊谠O計時卻有很多值得推敲的點,在細節處提升用戶易用度,我通過日常的學習和公司項目,在這里總結復盤了自己的經驗。

          表單的適用場景比較廣泛,常見的基礎表單比如登錄注冊頁面,這一類往往信息簡單,格式比較固定,除此之外就是分步表單、高級表單。常見的場景主要用于新建信息、申請、客戶信息、商品信息等等。這類表單可能存在復雜邏輯關系和功能,有時會給我們造成困擾。以下我將以這一類表單為主要案例,一一進行拆解。

          登錄注冊頁:表單內容簡單,操作簡單。

          分步表單:具有流程化特點,具有先后邏輯關系,內容較多的業務類型,比如轉賬,新建商品訂單等。分步填寫可以減緩用戶壓力,起到安撫用戶情緒的作用。

          高級表單:主要用于需要一次性輸入、提交 大批量數據的場景。也成為分組表單,和分布表單一樣都是為了減輕用戶填寫壓力。

          02設計原則

          首先我們需要明確表單頁的主要功能:表單頁承載了系統中絕大多數系統數據的錄入、增刪、修改、查看,是系統中人機交互最為頻繁和典型的數據媒介。表單頁通常需要用戶錄入大量的信息或數據,在設計時我們的核心目標應該是讓用戶明確當前表單頁面要完成什么任務,輕松理解項目含義及生效的結果,思考如何幫助用戶高效、準確、輕松的完成任務。

          表單設計基本原則:明確、高效、安全

          明確:用戶可以快速定位重要信息和目標選項,表單文案和組件可以準確傳達任務含義

          高效:易理解易操作的交互方式,盡量減少交互步驟,減少用戶任務路徑步長,配合合理的信息布局引導,準確的選擇合適的組件傳達信息,幫助用戶高效的完成任務。

          安全感:操作前有效的防錯機制,操作中有明確的狀態反饋與容錯,允許糾正錯誤。操作后及時的保存,取消機制。

          03表單構成

          一個完整的表單通常包括表單標題、表單標簽、表單域、提示信息、占位符、操作按鈕幾部分。

          標題:起到說明表單模塊的作用,是用戶快速明確任務和定位頁面位置的重要標識。

          表單標簽:內容項的名稱,說明對應填寫項含義及說明用戶該填入什么信息。

          表單域:表單的核心操作區域,用戶操作最頻繁,最集中的地方,這里的可選擇組件樣式也會根據內容需要而變化,類型最為豐富多樣。需要注意的是同一類型的組件需保持一致性原則。

          占位符:一般出現在用戶未填寫內容時,用于輔助提示用戶錄入線索。

          提示信息:輔助提示用戶的作用。分為普通提示和錯誤提示,也是很好的防錯糾錯機制體驗。

          操作按鈕:“結束”表單任務的觸發器,用于向服務器提交數據或者放棄操作。


          表單標簽

          表單標簽樣式常見的有4種,左對齊標簽、右對齊標簽、頂部標簽和行內標簽,不同的對齊方式各有優勢和缺點,適應在不同的場景。

          右對齊標簽(冒號對齊)

          優點:標簽指向明確,操作效率高,節約縱向空間

          缺點:可讀性低,不適用于狹長空間或需要適配多語言的頁面

          場景:普通表單填寫,多用于web端

          左對齊標簽

          優點:閱讀性高,節約縱向空間

          缺點:不適用于狹長空間或需要多語言適配的頁面,操作效率低

          場景:詳情陳列

          頂部標簽

          優點:視覺對齊舒適,節約橫向空間

          缺點:縱向空間利用不高

          場景:多用于移動端表單填寫,多語言適配頁面

          行內標簽

          優點:視覺對齊和空間最節約的方式

          缺點:當用戶輸入狀態時,標簽消失,增加用戶記憶負擔

          場景:多用于登錄注冊,修改密碼等內容極少,不需要記憶的頁面


          表單域

          表單域是一個表單頁面的主體部分,其內容豐富多樣,從而它可選擇形式也最多,不同的內容我們在設計的時候應該選擇最合適的組件,以及應該注意同類型內容選擇統一的組件進行設計。

          定義操作框大小

          在實際項目中我們往往會遇到內容長度不能統一的時候,那怎么這種情況該怎么處理呢?

          以往我的處理方式是強行拉長對齊,但我們可以發現強行對齊的時候,視覺沒有得到很大優化,反而在隱喻傳達給用戶錯誤的信息,當用戶在操作1功能的時候,可能會錯誤的認為這個選項可以選擇很多,因為我們給的選擇框很長,而實際上它只能選一個。這樣就會給用戶造成不必要的理解成本。

          比較好的方式處理方式是我們設計組件庫時就設定不同尺寸的操作框,來適應不同場景下不同內容需求。如果不能對齊,那就讓它參差不齊。

          提示信息

          提示信息在表單中起到提示、糾錯的作用。形式主要有以下幾種:行內占位符提示、操作框下方文字提示、tost提示、氣泡提示。

          行內占位符:這是一種基礎應用,它即可用于占位,也可用于任務說明提示,當我們說明文字很少的時候可選擇的一種方式。需要注意的是內容務必簡潔易懂,減少閱讀成本,不要說“正確的廢話”,語句應該是完整的陳述句。

          氣泡提示:當提示文字很多,主要用于對標簽的名字釋義時,氣泡彈窗是個不錯的選擇。它的優勢在于可以將更多內容折疊,不占用空間,缺點是不直觀,增加了用戶操作步驟。

          Tost提示:Tost提示一般是在出發操作按鈕后給出的提示,可以是操作結果提示,也可以是內容填寫提示。

          操作框下方文字提示:當提示內容很多時,還可以考慮操作框下方提示,多用于對輸入內容的輔助說明場景。應用場景包括以下幾種:

          組件組合后在表現層的設計

          提示信息在頁面中還是一個輔助性的角色,常規情況下的視覺層級應該是 表單內容>表單標簽>提示信息。當用戶有錯誤操作時“錯誤提示”優先級是最高的,我們一般用帶有警示性的顏色給以醒目顯示。

          為了使用戶更好的辨別任務項,需要注意組件與組件、組件與說明文字之間的間距差別。

          04交互方式

          表單中的交互方式根據其內容選擇對應最合適的形式,內容簡單而少的可以直接在原位編輯,操作快捷,關聯性最強,所見即所得,內容容量低于5個。其次內容較多的,或者針對全局操作的可以選擇氣泡卡片,比如全局設置等。第三種是彈窗或者抽屜,兩者形式是一致的,區別在于對內容的承載量上,彈窗容量較小,內容較多的情況下抽屜式彈窗(側拉彈窗)是更好的選擇。最后,內容承載最大的就是頁面跳轉,同時這種方式與原頁面的關聯性最弱。

          組件構成表單,實際項目中,我們的表單往往內容會多而復雜,設計時可以考慮在布局上優化去提升使用體驗。

          常用的方式有幾種:信息分組、錨點定位、標簽頁、分步驟。

          在格式塔鄰近性原則中提到,人們將彼此接近的事物、元素,傾向于認為它們是相關的。在設計中很早就運用到這種認識傾向。所以我們在信息分組時可以運用設計手法將相關信息從視覺上區分開,提升信息閱讀有效率。

          分組方式:

          1.簡單的內容使用標題分組或卡片分組就可以達到目的。

          2.而內容很多,組別之間沒有關聯性時用標簽分組

          3.頁面內容很長需要連續下滑操作時,錨點定位就可以提供便捷的操作體驗。

          4.在任務有先后邏輯關系時,分步驟是最好的選擇。

          標簽分組與錨點定位在表現形式上類似,區別點在于操作后的結果。標簽分組切換標簽后頁面數據會刷新,一般沒有自動保存功能,錨點定位則是每次點擊定位頁面不刷新數據,始終保持在同一數據頁面。


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

          文章來源:站酷 作者:將晚秋

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

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

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



          C端產品分析方法總結

          ui設計分享達人


          做一個完整C端項目前,從產品思維得理解、需求分析到場景分析,通過以上分析得出結論,進而制定我們的設計目標,把設計目標落地到解決實際的設計問題,內容較多,大家可以根據上述目錄來進行選擇性閱讀。


          1.1產品思維包括


          1.1.1 用戶思維:深入了解用戶的需求和場景


          了解用戶心理:“心理”主要是指用戶的情緒,只有了解用戶的心理狀態,才能知道他們在接觸到或者使用我們的產品時是正面的情緒還是負面的情緒。正面情緒需要我們引導去實現轉化,負面情緒需要我們安撫以避免跳出和口碑的損失。


          把控用戶行為:最終目的還是引導用戶行為,讓用戶按照我們的計劃進行產品的交互、操作,從而實現對用戶的有效管控和轉化。例如:上品店慶推出“購物省錢節”的概念,聯合商家推出各種優惠活動,就是抓住用戶在購物時想省錢的心理,通過降價、優惠券等方案讓用戶在選購商品、提交訂單和結算階段都保持高漲的情緒,從而推動用戶最終完成付款。


          解決用戶痛點: 在完成上面的分析后,我們最終需要把調研和分析結論落地為設計方案,前提是要關注用戶當前的情緒是負面的還是正面的,如果是負面的情緒,我們可以通過補償、安撫等方案對用戶進行留存。例如:在等待外賣送達時,配送信息頁一般都會有預估時間、位置等信息,讓用戶有一定預期。同時如果遲到時間過長,也會通過準時寶等規則給予用戶優惠券補償,這些都是負面情緒的安慰。



          1.1.2 項目思維:主動發現并解決用戶體驗過程中遇到的問題

          項目思維主要指,我們要具備極強的發現問題、輸出方案、推動落地的能力。這就是設計師的項目思維和推動力,可以保證自己的想法快速落地、推動設計優化并盡快上線。



          1.1.3 商業思維/業務思維:將設計目標與業務目標緊密結合

          商業思維是指,拉新:通過產品、運營和營銷策略讓用戶下載產品。留存:讓下載的用戶保持活躍度,留住用戶,便于轉化。轉化:讓用戶按照我們的業務規劃去注冊、分享、下單、付款等動作,一步步帶入我們的圈套,完成關鍵操作。變現:將用戶行為變現,內容產品的活躍度可以帶來廣告營收,電商產品的成交額就是業務收益。



          2.1產品思維的重要性


          2.1.1 Ui設計師和產品經理的區分界限


          相同點:在實際工作中,設計師和產品經理的目標在本質上是一致的,都是解決用戶的痛點、滿足用戶的需求,為用戶提供體驗更好的產品,并在此基礎之上完成用戶轉化,實現收益。作為一個設計師,我們對產品了解的深度不一定比得過產品經理,但是廣度上你應該要求自己和產品經理保持一致。只要掌握產品的架構、流程和業務的模式、原理即可。



          不同點:UI設計師更注重通過用戶體驗來留存用戶,產品經理更多地考慮轉化用戶和變現的途徑。



          沖突點:這時就會產生一些沖突和矛盾,有時為達到業績目標,產品經理或其他業務方可能會提出有損用戶體驗的方案或者策略。


          想要解決與產品沖突得問題,就要充分調動自己的產品思維,保持習慣性的產品思維,才能始終保持和業務一致的目標。和業務方站在一起,才能找到設計和業務的共同目標,并將業務目標轉化為可執行的設計目標,才能為設計帶來更高的價值。


          2.1.2 UI/UX設計師的真正價值是什么


          這里就繞不開這個話題----產品思維。別人眼里的UI設計師,很多人會認為設計師的工作就是設計流程頁面、視覺效果。這些工作看起來只是錦上添花,即使沒有專業的設計師來設計,可能只是流程、控件位置不太合理、樣式和顏色不太好看而已,并不會影響產品的開發和上線。其實,設計師的價值不僅是藝術價值,更重要的是為業務帶來價值。


          UI/UX設計師,關鍵在于對用戶場景、對產品細節的敏感度,這也是其他崗位不具備的技能。實際工作中這些細節問題,很容易區分出來專業性的差異,因為UIUX設計師是距離用戶最近的人。我們設計頁面,用戶在頁面上操作和獲取信息。我們設計流程,用戶通過流程完成各自的需求。我們設計的產品流程、頁面,是用戶直接接觸和使用的東西?;谶@個原因,設計師對用戶的需求、反饋是最了解和最敏感的,我們可以通過用戶的反饋、操作數據把控用戶的心理狀態和行為方向。無論是在方向上還是從細節出發,挖掘和洞察用戶需求,設計師有明顯的優勢。

          所以UI設計師真正的價值就是通過自己對細節和場景的思考,自我驅動,找到設計優化、產品迭代、業務提升的機會點。想要找到這些機會點,你需要培養自己的產品思維、項目思維和商業思維。


          2.1.3 如何培養自己的產品思維


          01、多與需求方、業務方(產品經理、運營、市場等崗位的同事)溝通,在參加需求評審的時候,深入了解業務和產品的特點、原理。


          02、了解產品流程:在接手某項業務或產品時,先利用思維導圖對產品的架構做一次梳理,通過功能結構圖你可以清晰地看到產品應該有的功能。在掌握架構的基礎上,對產品的核心流程再進行一次梳理,包括線上、線下所有的流程節點、體驗接觸點和不同用戶端的流程觸點。


          03、多做競品分析,從競品中尋找靈感和產品感。怎么做競品分析具體可查看我的其他文章,競品分析維度的確定。


          04、持續不斷地培養自己的思維能力,深入思考、多做歸納總結和分析。在做設計的時候我們也可以讓自己的思維慢下來,多去思考:思考一下為什么做這個需求?對用戶有什么價值?對產品有什么價值?對業務有什么價值?設計、產品、運營應該怎么做才能達成這個目標?我們的做法對業務、對產品有什么影響?設計方案能不能很好地平衡業務和體驗的關系?



          2.1為什么要進行需求分析

          01、用戶不知道自己真正想要什么。

          02、用戶難以說出自己的真實需求,用戶在闡釋自己的需求時,就會不自覺地粉飾和解釋自己赤裸裸的本質需求。例如:那些刷視頻就能領紅包得產品,但為什么它最近不火了,這類產品的人群,本質需求是:通過刷頁面領紅包,獲取更多的錢,這類人根本不關心內容是什么、內容質量怎么樣,這就造成了內容的觸達效果非常差。


          2.2 用戶需求分析步驟


          2.2.1 篩選出目標用戶


          01、了解我們產品的目標用戶群體和現有產品用戶群體,掌握用戶基本信息,分析用戶特征。(Who)用戶是哪些人:性別、年齡、地域分布、學歷收入等。(What) 用戶有什么共性。(Why)為什么選用我們的產品。(Where/When)在什么場景下使用我們的產品。


          02、通過了解用戶得到的所有信息,然后創建用戶畫像,得出結論。那么如何創建用戶畫像呢?


                 001、人物創建:創建一個虛擬的用戶群體中的一員,利用我們上面提到的用戶相關信息,可以給他/她一個插畫風格的照片幫助我們具體化這個用戶的人格和形象。然后列出他/她的基本信息,給他/她定一個社會角色,比如:小王,男,28歲,銷售經理,我們產品的熟練用戶,月收入2萬,學歷本科。

                  

                 002、分析動機:這個人物用我們的產品想干什么;這個人物對我們產品某個功能使用較多,需求較強的原因是什么,想達成什么樣的個人目標。


          2.2.2 提煉核心需求


          可以通過用戶畫像推測用戶的心理特征和行為偏好,積累了以上信息,你就比較容易進行需求的分析和挖掘了,提煉出解決用戶需求的核心的痛點。例如:解決了用戶在特定場景下的某一個核心痛點,滿足了用戶在當前場景下特定的訴求/需求。例如:共享單車產品就是解決了從車站、地鐵站到家、工作單位最后一段距離的出行痛點。例如:地圖軟件解決的是陌生地區找不到路和易違章的痛點。


          2.2.3 找到本質需求

          01、了解人性:做設計就是做人性,只有把握好人性的特點才能更好地滿足用戶心理,進一步引導用戶行為。馬斯洛需求層次理論,人的需求從低到高可分為 5 個層次:我們就可以試著洞察用戶在特定場景下的本質需求到底是什么了。生理需求(呼吸/食物/水):現代社會其實就是對生存條件的追求;安全需求(避免自己受到傷害);

          社交需求(愛與被愛/社會關系/地位)對情感的需要;尊重需求(被自己認可/被他人認可和尊重)對穩定社會地位的需要;自我實現需求(道德層面/內心層面的追求和滿足)。


          所以用戶的本質需求無外乎:生存、金錢、情感、名利、心理滿足這幾個方面。


          02、將用戶敘述的需求,轉化為本質需求:比如:有的用戶說,上品商場最近優惠券怎么少了?我都不想去上品買東西了。用戶表意是嫌優惠券少,如果我們草率得出:增加優惠券運營力度的結論太過于表面,其實用戶的本質是嫌商品太貴了,他們的本質需求是省錢,少花錢且買到想要的東西。而這類用戶是對價格極其敏感的用戶,增加優惠券只是其中一個策略,是無法滿足他們根本需求的。根據他們省錢的本質需求,我們可以給他們更多地推薦低端商家,哪怕沒有優惠券,還是能提升一波 GMV。


          進而轉化成設計目標為,要通過我們的設計能力,給用戶營造一個很省錢的氛圍,而不是一味地給用戶降價或是發優惠券。規劃更多的秒殺、每日特價、分享領券等活動專區,在設計頁面時增加優惠券、紅包等元素,突出省錢、低價等文案,可以有效地吸引此類用戶,引導他們下單付款。這就是本質需求的應用方法。


          2.2.3 拆解挖掘到的本質需求———KANO模型

          工具——KANO 模型問卷調研,主要依據是用戶調研,可以通過定性訪談的方式,對部分用戶進行了解,大概了解用戶對需求的態度;也可以通過定量問卷的方式,通過問卷獲取比較有參考價值的數據信息。不同類型的需求和用戶滿意度之間的關系,將影響用戶滿意度的因素分成五類:


          基本型需求:無此功能,用戶滿意度會顯著降低;有此功能,用戶滿意度不會顯著提升。

          期望型需求:無此功能,用戶滿意度會降低;有此功能,用戶滿意度會提升。

          興奮型需求:無此功能,用戶滿意度不會降低;有此功能,用戶滿意度會有顯著提升。

          無差異需求:有無此功能,用戶滿意度都不會有太大變化。

          反向型需求:無此功能,不會影響滿意度;但有此功能用戶滿意度會下降。


          經過需求分析我們會拿到大量用戶需求的相關信息,在取舍和決策時我們可以使用三個原則 + 一個工具:01、

          圍繞本質需求和痛點;關注與業務不相悖的需求;解決影響用戶峰值體驗的問題;在做分析時可以利用 KANO 模型,重點關注模型定位出的基本型、期望型需求,適當關注興奮型和反向型需求。



          至此,我們掌握了產品分析的第一步,也就是找到設計的方向和基本依據——用戶需求;下一模塊我們將進入需求分析的第二步——場景分析,來找到設計可以利用的機會點、切入點!


          3.1為什么要進行場景分析


          3.1.1 場景是產品設計的基礎

          01、任何產品的誕生都是基于用途,牙刷為了刷牙、菜刀為了切菜、汽車為了出行……生產這些產品是為了滿足用戶的需求,而生產產品時需要考慮的因素如外觀、材質、設計細節等則源于用戶場景。

          02、互聯網產品其實也是一樣的道理,產品基于用戶的一些需求或者痛點而誕生,基于用戶的使用場景做功能和細節體驗。


          3.1.2 場景分析的核心能力就是同理心

          站在用戶的立場思考細節:必須首先知道用戶需要什么、喜好什么、討厭什么、不能接受什么,才能進一步改善我們的產品?;谟脩舻哪康?、行為偏好等研究用戶在場景里的行為、情緒,從而深入場景,做出正確的決策。


          避免主管的質疑和批判:有的用戶會有各種各樣“奇葩”的反饋,所以我們要多理解用戶的選擇和立場,避免主觀的質疑和批判。


          學會聆聽和關注反饋:在日常工作的溝通、對用戶的訪談中,我們可以試著多用心傾聽對方的表達。



          3.2 怎么做場景分析——三個工具一個方法


          3.2.1 用戶體驗地圖(流程分析)


          3.2.1.1概念

          01、還原用戶體驗產品的流程(分析的是場景中的線,包括流程線、行為線等。)02、列出用戶與產品、與線下場景有聯系的所有觸點。03、通過這些觸點掌握用戶的操作軌跡和行為特征。04、分析用戶的體驗感受。


          3.2.1.2 “五步法”梳理體驗地圖全流程

          01、明確分析對象:最重要的是確定一條明確的流程線,分析的產品某個功能或者某個服務/體驗流程,并非用戶。


          02、拆解體驗流程:把分析的流程進行拆分,拆成一個個體驗節點,實際場景設置節點。比如網約車的產品,要根據用戶在線下叫出租車的體驗場景來拆分,可以拆成走到路邊、招手攔車、上車、行程中、支付下車等幾個重要節點,然后根據這些節點來考慮和分析是否有優化或者需要顛覆的地方。


          03、創建用戶畫像:主要從用戶的基礎特征、用戶的心理和偏好等信息去做畫像,最后可以形成一個稍稍具體的角色。


          04、分析階段:制作表格,把每個節點的信息進行分析推測和記錄。例如下面表格:



          橫向:第二步拆解出來的所有的流程節點。


          縱向:用戶與產品的觸點:就是用戶如何操作我們產品,點了哪里、在哪里停留時間較長,這都是通過埋點數據可以看到的。


          用戶目標:從用戶的使用數據和用戶訪談中獲取相關的用戶信息,通過用戶的行為和他們表述的信息找到他們的立場、目的和利益點,從而分析他們想要什么。


          用戶行為:為了這個目標會怎么做。


          結果:看我們的產品頁面信息、流程及功能能不能滿足用戶上述的目的和行為即可。


          用戶情緒:用戶的目標和我們觸點是否契合,最終的結果是否能滿足用戶的需求和目的,沒有滿足的時候情緒低落到什么程度,滿足的時候情緒會高漲到什么情況,哪里是最低谷,哪里是最高峰。


          05、得出結論重點要看的是用戶情緒的起伏。找到最低點,看哪些節點影響了用戶的體驗,就是產品的痛點,也是我們的設計發力點和機會點。


          3.2.2 同理心模型(節點分析)


          3.2.2.1概念

          同理心模型適合分析我們產品體驗流程中的某個節點或細節功能,不適合進行流程化的分析。包含所看、所聽、所做、感受、所想。


          3.2.2.2同理心分析方法


          01、明確我們分析的對象是什么:比如:網約車用戶在打車等待接單的環節;比如電商產品確認訂單的環節;這些環節這些環節和節點都有共同的特點,就是集中在有限的一到三個頁面中,用戶的核心操作比較簡單。


          02、首先把圖表畫在白板上,用便利貼寫出所看、所聽、所做、感受、所想,五個維度的想法,


          03、然后進行集體討論,把這些便利貼提煉總結,歸納出重點信息,通過這種方式可以避免一個人悶頭思考的局限性,也可以保證思考的全面性。


          04、接下來對這個圖進行行為總結,找到用戶行為的原因,分析用戶的偏好和習慣。


          05、最后通過用戶情緒和感受,分析我們產品體驗的問題。



          3.2.3 情感化設計(節點分析)


          3.2.3.1情感化設計要素

          本能層

          親切:通過情感化設計,營造親切的氛圍,拉近與用戶的距離。比如:百度地圖可以在導航設置里將導航車標設置成自己的汽車品牌,當看到自己車的車標在地圖上移動,用戶就會感覺非常親切和熟悉。


          安全:讓用戶感到人身、隱私的安全。比如:嗶哩嗶哩在登錄界面輸入密碼時的二次元形象會有捂眼睛的動作。


          互動:我們的產品流程和功能的實現需要用戶的參與。比如:用戶刷新網頁時,由于網速較慢、需要較多的加載時間,在加載的過程中,有很多網站會提供一些互動小游戲。用戶參與進來了,整體等待的時間也就顯得沒那么漫長,這種互動既可以緩解用戶的焦慮情緒,又能有效防止用戶跳出。


          驚喜:人們對一件事物的判斷往往會基于最初的信息。所以如果我們在提供最初的信息時就給予用戶更好的結果,一定可以給用戶帶來驚喜?;ㄐ∝i在打車時先出現原價,然后彈出優惠券動效,價格數字也嘩啦嘩啦往下降,這個不斷下降的數字就利用了錨定效應,給予用戶一定的驚喜。


          行為層

          關懷:考慮用戶的使用場景,在場景下給予用戶細節上的功能推薦或操作建議。比如:美團外賣,在天氣惡劣時會提前提醒用戶:為避免延誤用餐時間,請提前下單。比如:滴滴出行,在用戶經常通勤的時間段也會自動提示:由常用起點至常用終點的路線派車大概需要XX分鐘,點擊即可叫車


          預期:難以避免需要等待、甚至反復操作的情況,此時為避免用戶跳出,你需要在細節上做好預期管理。比如:我們在用支付寶還信用卡時,支付完成后我們能看到已提交——待銀行處理等環節的流程提示。比如:我們在填寫一個需要補充大量信息才能注冊的網站賬號時,網站頂部一般會有注冊步驟的導航。當然以上只是最基礎的預期管理,如果你的文案能更俏皮一點,視覺效果上增加一些 IP 、甚至動畫就更好了。


          反饋:對用戶的操作及時給予回應,尤其是異常場景,需要使用用戶更容易接受的方式給予反饋。


          反思層

          情懷:能給用戶帶來情感上的力量。


          品牌:在產品的配色、排版、控件樣式上體現品牌的統一調性。在產品的體驗流程中貫穿品牌的價值。比如:在京東自營的店鋪購物、使用京東物流的產品會標明“京東物流”,在確認訂單頁也有“京準達”的功能選項,京東通過這種方式,將自營物流、快速到達的品牌特性一一表達。


          價值:實現更大的社會價值,從而提升企業形象。比如:商城的包裝箱、騰訊的 404 網頁上都能看到一些被拐兒童的尋人啟事,因為這些網頁和包裝材料的傳播力極大、傳播范圍極廣,可以帶來良好的社會公益效益。


          3.2.4 故事版

          故事版:體驗地圖和同理心模型,可以分別從流程到節點對場景進行分析,那么這些場景如何歸納和表達,以供大家決策和評審呢?需要站在用戶需求的角度講故事。故事板這種漫畫/故事的形式易于被受眾接受,在闡釋需求、說明方案時具有更強的親和力和說服力,


          描述過程:創建的虛擬人物;明確關鍵節點;找到虛擬人物在整個故事中所有行為和目的。



          產品思維、需求分析、場景分析這三部分是產品設計三個基本要素,做好這些分析能幫助我們了解產品、業務與用戶之間的聯系,從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。接下來我們要做的就是明確設計目標。



          4.1為什么要明確設計目標

          01、一接到需求就馬上打開軟件開始往上鋪圖,遇到被卡住的情況,沒有辦法繼續做下去,總在糾結。

          02、有時候產品經理對某個需求也提不出很明確的方向,我們設計的時候能搞出幾個方向的方案,但是不知道如何決策。

          03、我們在著手設計的時候就沒有想好我們輸出這個設計圖的目的是什么,比如需要促進產品什么轉化、解決用戶什么痛點、解決體驗上哪些問題?

          04、我們做這些工作的目的是XXX,只有達到這個目標我們做了這么多工作才有意義、有價值。

          05、在日常工作中你也會發現,產品設計不等于純創意設計,產品設計的關鍵價值在于發現和解決問題,通過對體驗流程和頁面細節的處理/優化,得到我們期望的用戶反饋和業務數據。


          4.2 整個項目設計思考的流程

          01、設計目標的來源是用戶目標、業務目標和產品目標,依據這三個目標,我們將其轉化為設計目標;

          02、然后是將設計方案朝著既定目標實施,在方案的流程和細節里體現/實現我們的設計目標;

          03、上線后,及時收集和整理設計目標、產品目標相關的數據和用戶反饋,驗證我們的設計方案有無達到目標;

          04、然后規劃下一步的迭代方向。



          4.3 怎么設定設計目標“三步法”

          01、明確用戶目標和產品目標:設計目標的根本是產品目標,產品目標的根本來是業務目標和用戶目標,也就是業務的規劃和用戶的需求、痛點。因此在實際操作中,第一步我們要先明確我們的產品目標是什么,產品目標大多和用戶的轉化、功能的使用率有關,我們朝著這些方向分析一般不會有較大偏差。


          02、通過上面目標找到與之相關的關鍵用戶操作:比如點擊加購按鈕、比如完成付款驗證操作、比如填寫全部表單信息。


          03、將關鍵的用戶操作轉化成可以衡量的數據指標:將這些關鍵的用戶操作轉化為可以衡量的數據指標,比如加購 BTN 的點擊量、訂單提交后的付款成功率、比如表單信息的完整率。因此設計目標必須是可量化的,產品使用數據和業務數據,比如點擊量、退出率、取消率、跳出率等,才能在設計方案上線后正確評估我們的方案有沒有完成設計目標。



          5.1怎樣跨越設計難點

          01、先去定位設計難點,找到設計重點,再著手設計。完成主流程后再去解決小問題。

          02、接著列出流程或需求點,對設計方案有大致框架;

          03、然后針對流程中每個節點列舉可能會出現的問題把精力放在影響設計目標和用戶核心體驗的重點問題上。


          5.2怎樣解決設計難點

          精益創業模式里有一個 MVP 的概念,我們現在產品研發中的敏捷模式也是源于這個概念。簡單來講,就是用較小的成本先做出一個產品,然后快速上線,驗證業務模式、產品策略和用戶體驗等問題,然后小版本快速迭代,進行優化。



          參考資料:

          《用戶體驗干貨筆記》

          《用戶體驗要素》

          《騰訊產品法》

          《交互設計知識體系》




          C端設計前的準備工作,其中重點在于學會需求分析和場景分析。具體掌握需求分析的核心方法步驟,和場景分析中用到的三個工具用戶體驗地圖、同理心模型、情感化設計、和故事版。需求分析、場景分析是產品設計的基本要素,做好這些分析能幫助我們了解產品、業務與用戶之間的聯系,從而做出體驗好、價值高的優秀產品。這些分析都是我們進入設計工作的前期信息和準備依據。


          接下來我們要做的就是明確設計目標,設計目標的來源是用戶目標、業務目標和產品目標,依據這三個目標,我們將其轉化為設計目標,然后將設計方案朝著既定目標實施,在方案的流程和細節里體現/實現我們的設計目標,在產品上線后,及時收集和整理和設計目標、產品目標相關的數據和用戶反饋,驗證我們的設計方案有無達到目標,然后規劃下一步的迭代方向。

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

          文章來源:站酷 作者:morning_c

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

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

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


          剖析車載界面設計

          資深UI設計者

                 HMI是Human Machine Interface 的縮寫,“人機接口”,也叫人機界面。凡是參與人機信息交流的領域都存在著人機界面。本文將深度剖析車載界面的設計要點及注意規范。

                 智慧城市的建設趨勢越來越顯著,政府對于汽車智能化、信息化發展非常重視,汽車駕駛體驗感與個性化的設計也會成為我們對于汽車選購的參考和方向,自從人們對于用戶體驗的重視,人機交互設計工作內容也成為重要環節。

                 對于人機界面,首先我們要明確一些概念。


          1、人機界面與人們常說的“觸摸屏”有什么區別?

          從嚴格意義上來說,兩者是有本質上的區別的。因為“觸摸屏”僅是人機界面產品中可能用到的硬件部分,是一種替代鼠標及鍵盤部分功能,安裝在顯示屏前端的輸入設備;而人機界面產品則是一種包含硬件和軟件的人機交互設備。在工業中,人們常把具有觸摸輸入功能的人機界面產品稱為“觸摸屏”,但這是不科學的。


          2.人機界面產品中是否有操作系統?

          任何人機界面產品都有系統軟件部分,系統軟件運行在HMI的處理器中,支持多任務處理功能,處理器中需有小型的操作系統管理系統軟件的運行?;谄桨逵嬎銠C的高性能人機界面產品中,一般使用WinCE,Linux等通用的嵌入式操作系統。

                 我們做的交互場景是有車輛行駛的,所以首先是要考慮安全因素,美觀其次,因此在特殊環境下操作車載系統,我們無法用傳統移動端沉浸式的設計思維來設計車載的界面與功能,需要放下所謂的美學,緊扣實際場景下的交互方式與用戶需求來設計,因為在極短時間內導致我們必須對所有可能用到的功能入口一步即達,對信息的布局必須做到一眼即見。



                 汽車HMI有自己的設計原則和設計規范以及美學理念。

          汽車行業本身是一個有著強烈美學理念和設計規范的行業,其實準確的說應該是汽車HMI中控設計是基于自身傳統規范,結合互聯網移動端和Web端的基礎上,慢慢形成了一種新的設計規范。


                 在開始講解之前,我們首先要了解官方的一些設計規范。

          1. 阿里 Alios 開放平臺

          https://miniapp.alios.cn/index#/document

          2. 百度車載生態開放平臺

          https://chelianwang.baidu.com/homepage/openPlateform/design/sec-4-1.html

          3. 谷歌駕駛

          https://developers.google.com/cars/design/design-foundations

          4. 蘋果 Apple Car Play

          https://www.apple.com.cn/ios/carplay/

          5. 華為車機三方應用交互設計規范

          https://developer.huawei.com/consumer/cn/doc/50902

             

                 我們還要了解車內屏幕的類型,主駕駛前面的儀表盤、HUD和中控屏幕,副駕駛和后排的娛樂屏幕。

          1. 儀表盤

          汽車儀表盤是反映車輛各系統工作狀況的裝置。一般由時速表、轉速表、機油壓力表、水溫表、燃油表以及電子指示燈等組成。汽車儀表是駕駛員與汽車進行信息交流的重要接口。當今純液晶屏的儀表盤占市場主導地位,純機械、燈顯、段碼將退出歷史舞臺。

          2. HUD

          平視顯示器(Head Up Display),最早是航空器上的飛行輔助儀器,運用在戰斗機上,由于戰斗機上很多信息需要飛機駕駛員隨時查看,避免駕駛員低頭看儀表而分心,隨后又普及在民航客機上,由于HUD的方便性以及能夠提高飛行安全,這項技術后來也發展到汽車行業,汽車搭載的HUD抬頭數字顯示功能,是利用光學反射的原理,將重要的行駛信息胎壓、速度和轉速等信息投射到駕駛艙前段玻璃上面,在駕駛過程中不用分心看儀表盤,減輕眼睛的疲勞,給駕駛帶來便利和安全。


                 此前,HUD前裝市場基本被日本精機、德國大陸、日本電裝、偉世通等國外巨頭壟斷,且競爭格局高度集中,前五名企業市場份額超95%。近三年,隨著國內智能駕駛技術商業化落地加快,不少自主品牌供應商開始嶄露頭角,且爆發力十足。HUD的發展會越來越迅猛,原因主要有以下幾點。

          1、HUD作為ADAS人機交互的窗口,可以呈現駕駛輔助信息,提升駕駛的安全性和舒適性,使駕駛者擁有更佳的應用體驗;

          2、為提升市場競爭力,車企對自動駕駛和智能座艙重視度提升,尤其是自主品牌車企近年在國家智能網聯發展戰略的推動和扶持下,轉型動作快、力度大,產品創新和應用上也更加大膽和前衛。、

          3、HUD技術上取得突破,顯示效果大幅改善;

          4、隨著技術升級,HUD配套價格逐漸下降,性價比逐步提升;

          3. 娛樂屏幕

          后排娛樂屏更像是一個平板,主要功能點為視頻、音樂、游戲等等,幫助后排乘客打發時間,所以后排的娛樂系統就是為娛樂而生,無需考慮安全性。

          車載界面的設計原則

          1.迅捷性

          與人們常常所說的三秒設計原則類似。移動端系統為沉浸式操作,而車載系統不一樣,在駕駛過程中,用戶95%的精力在于聚焦駕駛上行為上,用戶只能抽取僅5%左右的精力與時間來操控車載。因此也就決定了車載系統的功能邏輯,信息布局都必須在極短的時間內以最好的方式呈現。

          而如果用戶沒有在這個時間以內完成操作任務,要么用戶選擇放棄,重新再來;要么用戶花費更多時間和精力,但這樣駕駛的危險系數會成倍增長。經筆者多次在不同路段試驗,統計下來平均每次操作,即視線與注意力專注在車載上的時間,無法超過三秒,事實上,當進入第三秒時,已不得不需要利用余光開始注意前方路況了。

          因此,在三秒以內,無論是用戶第一次操作失敗,重新注意路況后,再重復操作,還是用戶持續操作直到任務完成,都是非常危險的行為,在這里,由于用戶試錯的成本非常巨大,也因此交互的設計與信息布局的設計都需要做到最極致的狀態。


                 隨著大屏、多屏化的發展趨勢,觸摸和語音控制應時而生,為了增強操作合理性,以及減少或避免觸摸屏的誤觸功能。從信息輸入來看,以觸控、語音為主,手勢、視覺交互為輔;從反饋輸出來看,以視覺、語音、觸控交互為主,嗅覺交互為輔。

          人機交互定義需要區分車輛是行駛中還是靜止狀態,車輛在行駛中,對于需要駕駛員操作反饋的交互行為需要遵循3S原則(上面提到的三秒原則),降低安全隱患。甚至有一些交互動作在車輛行駛過程中需要禁用的。

          2. 聚合性

          得益于計算機算法的強大,汽車功能越來越完善,信息量也越來越大,為了讓用戶有更好的體驗,避免過多信息的干擾,必須做到界面顯示輕量化。

          這也是為什么飛機駕駛艙內、國際空間站內的各種操控開關拉桿都是星羅密布式的擺放,并非以如今的科技無法做到像科幻片里一樣簡潔干凈的操控臺,而是因為考慮到在實際應用場景下,專業素質的人員不需要也沒有時間去欣賞美觀的界面,學習我們所認為的交互方式。


          保障關鍵信息是醒目的,容易讓用戶視覺快速捕獲,在各種環境場景下具有良好的可見性和易讀性,無需駕駛員費力尋找和識別。

          3. 及時性

          這里所說的及時性指的是反饋信息的及時性,我們要考慮實現全方位的信息提示,著重考慮視覺層面和聽覺層面。

          在駕駛的過程當中,司機的雙手被占用,于是眼睛和耳朵感知要提高,與移動端的視覺顯示不同,HMI設計師需要注意除了基礎的視覺顯示規范外,還需格外注意與安全相關信息的展示、視覺警告、文字易讀性和顯示眩光等顯示問題。

          在車輛行駛過程中,對于司機來說,聽覺反饋也是很有必要考慮的場景,通過語音反饋司機需要獲取的信息,能讓司機盡量保持視覺焦點在路況上。多場景的融合考慮信息獲取的效率,能減少在開車過程中的安全隱患。

          我們不僅要考慮設計層面,還要考慮到交互層面。

          交互方式

          (1)觸控

          這里分兩種,一種是通過按鍵控制;一種是通過觸屏控制。

          都是通過不斷的觸控功能按鈕行程鍛煉肌肉記憶,現在的趨勢越來越趨向重觸屏,輕按鈕,這樣不僅系統迭代成本小,功能可以動態分布。

          但是對于一些精準調節的功能還是按鍵控制好一些。

          微軟 的Surface Dial可以給我們很好的啟發,智能旋鈕可以解決大部分屏幕調節的不精準的痛點,而效率又高。

          (2)語音

          在汽車人機交互中,語音交互被認為是車內場景下最自然的交互方式,而語音交互需要一個載體來傳達多樣化的情感。

          語音控制的前景主要在于兩個因素,一個是可以把除了界面以外的利用起來,一個可以與HMI自由交談,二是最小化HMI手動操作產生的干擾,增加安全性。

          (3)手勢

          手勢交互是對語音交互、觸控交互的很好補充,能夠讓車主通過簡單的手勢和語音就能完成車內的交互任務,也是能夠增加交互趣味性、表達情感、傳達情緒的另一個自然交互方式。

          常用的手勢:單指滑動(上下左右)、雙指滑動(左右)、五指抓取等。

          HMI的交互手勢不同于手機和IPAD,手機和IPAD握在手里,左右手都可以操作,多指組合的可能性也多,而HMI的手勢定義,更多的是需要滿足駕駛員的使用場景,屏幕是固定在車上的,要規避掉一些不方便的手勢。

          比如雙指往上滑動就很不方便,向上推不靈活,也有阻力。

                 所以要想系統整體跳出基礎可用性范圍,進階到好用的層次,系統對各種復雜交插的應用場景的處理需要更加智能(如導航中的來電,緊急路況的提示),對車內環境控制(如聲音、氣溫)需要更加敏感。車載系統的設計相比于移動端有著更明顯的約束,不論是從空間、時間、行為、心智,都有著明顯獨特的場景和特點,要做好車載系統設計,我們需要有豐富的同理心以及親身體驗并反復驗證設計。

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

          文章來源:站酷 作者:弧形線

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

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

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



          在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界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

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

          存檔

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