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

          首頁

          【UI設計】神奇的圖形裁切術技巧!你值得擁有!

          seo達人


           

          矩形裁切

          設計師日常拿到的圖片形式就是矩形圖,矩形裁切也是最基礎的裁圖技巧,接下來通過三個案例進行講解:

           

          1. 簡化(裁剪多余內容)

          通常情況下畫面都需要有著明確的主體,這樣才能夠有效的吸引受眾的視線,將畫面所要傳達的信息清楚地呈現出來。

          通過對圖形的裁切,簡化可能搶走主體視覺的多余元素,保證圖片的簡潔度,以達到主體更加突出的效果,提升信息傳遞的效率。

          圖片

          對原圖進行適當的裁切,減少多余元素對主體的干擾,能更突出設計主題,但在裁切時,需要注意主體元素的完整性。

          留出右邊空間進行文字排版:

          圖片

           

          2. 放大(突出主體)

          通過圖片裁切,放大主體,讓主體更突出,強調細節和情感,增加視覺沖擊力。

          如左圖是一張視覺效果質量不錯的拳擊手圖片,但缺少視覺沖擊力,通過裁切讓主體更突出,滿版占據畫面,更具氣勢。

          圖片

          把照片調整為黑白,并加強對比度,質感也更好。留出右邊空間,根據圖片的外輪廓進行文字的編排。

          圖片

           

          3. 局部特寫(特殊視覺體驗)

          同樣的主體,經過裁切,讓畫面集中于整體目標的一部分,可以看到不一樣的細節,呈現出特殊的視覺體驗。

          圖片

          如下圖,選取籃球局部特寫,看似取景小了,但是會擴展觀看者的聯想空間。更戲劇性的表達設計主題,更加濃郁的營造氛圍,這樣的處理手法讓版面顯得簡潔而高級。

          圖片

           

          異形裁切

          雖然使用矩形圖片進行設計也可以獲得不錯的視覺效果,但看多了會讓人感到乏味,將圖片裁切為其它圖形會讓整個設計顯得更加新穎。

          所謂的異形裁切就是使用除了矩形以外的其它形狀對圖片進行裁切,需要注意的是裁切圖形后不能影響到觀眾的理解。

           

          1. 幾何形狀

          使用規則的幾何形態,如三角形、圓形、多邊形等,對圖片的外輪廓進行裁切,得到新穎的幾何形狀圖形。

          圖片

          圖片

           

          2. 不規則形狀

          不規則形狀形式多種多樣,運用在版式設計中很考驗設計師想象力。優點是可自由發揮設計的空間很大,缺點是操作難度高,排版難以把控。

          圖片

          此案例根據建筑的流線型造型,按照建筑的外形進行裁切處理,使版面具有更強的形式感,視覺效果更加靈動美觀。

          圖片

          圖片

          還有另一種不規則的形狀是無規律、復雜多變、偶然產生形狀,視覺感受自然、生動、有靈性。如筆觸、墨點之類的偶然形態等。

          裁切后得到的不規則圖形,能夠打破頁面的單調乏味,讓畫面更具設計感。

          圖片

          圖片

           

          3. 特定形狀

          將圖形按照特定意義的形狀(如數字、logo、人物等)來限定,使用剪貼蒙版來將圖片約束在特定的圖形的輪廓當中,使版面嘗試新穎、獨特的視角,更有趣的傳遞信息。

          圖片

          圖片

          圖片

           

          END

          本期講解了圖形裁切常用的方法,當圖形處理好以后,我們會根據圖形的位置、輪廓等因素進行文字的編排,那么如何在設計中做到圖文互動,我們將在下期進行講解,下期見!

           

          原文地址:藝海拾貝Design(公眾號)

          作者:鄧海貝

          轉載請注明:學UI網》神奇的圖形裁切術技巧!你值得擁有!

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

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

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

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

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



          詳解| 一文帶你了解「基礎組件」和「高級組件」

          seo達人


          圖片

           

          一. 概念區分

          「基礎組件」和「高級組件」并不存在嚴格的界限區別,以至于很多設計師對二者沒有做過多的區分,但兩者各自有明顯的特點。

           

          1 . 基礎組件

          「基礎組件」也可以被叫做「原子組件」「通用組件」,是一種底層組件,其特點如下:

          • 單一的不可再拆分的組件:比如一個 button,一個輸入框,一個開關等。
          • 適用于各類業務場景:比如政務業務、電商業務、金融業務等業務都可以使用。
          • 可保證設計質量和效率:使用組件可以使設計稿具備較高的一致性,并提升設計和開發的工作協同效率。

          圖片

          一部分基礎組件的示例

           

          最為大家熟知的、典型的基礎組件庫就是 Ant Design,通用、開源、包容是其主要特點。迄今為止,Ant Design 已擁有超過 1k+ 的設計和開發貢獻者,被應用于 2w+ 的企業各類業務場景中。

           

          2 . 高級組件

          「高級組件」也可以被叫做「區塊組件」「業務組件」,是一種相對來說更具備業務屬性的組件,其特點如下:

          • 復合型的區塊組件:是基礎組件的合集,比如一個表單,一個表格,一張多功能卡片等。
          • 適用于更專業的業務場景:帶有強烈的業務屬性,在業務實操設計過程中,會更有針對性、更高效。
          • 可保證業務完成的專業性和效率:好的業務組件可以更好地賦能業務,更快地完成業務需求。

          圖片

          復合表單組件,提煉于政務類業務場景

           

          圖片

          指標+統計數值的復合組件,來源于數據統計類業務場景

           

          業務組件源于業務,是設計師對有業務特色的、出現頻次高的組件進行的整理和沉淀。Ant Design Pro(TechUI)就是 AntD 團隊根據業務中的實際應用場景和需求,總結出的更適合螞蟻集團業務場景的高級組件庫。

           

          二. 設計重點

          「基礎組件」和「高級組件」在搭建和設計的過程中要注意哪些內容?什么樣的內容可以被做成基礎組件?什么樣的內容和組件又可以/應該被封裝成業務組件?

           

          1 . 基礎組件設計依據

          基礎組件可以直接借鑒已有的、成熟的開源組件設計體系,減少重復勞作。如果自己的團隊也想做,判斷依據通常包括:

          • 內容或元素出現和使用的頻次;
          • 用戶操作后的基礎交互反饋,比如 hover 后出現的氣泡、違規操作后看到的提示條;
          • 設計走查的過程中經常會看到的質量問題,也可以用組件來統一,比如 icon 的顏色總是用錯、位置總是上上下下差幾個不一致等等。

           

          2 . 高級組件設計依據

          相比于基礎組件,高級組件因其獨特的業務屬性,以及與產品的強綁定關系,很難找到已有的組件庫進行借鑒和應用。判斷內容是否應該被沉淀的依據通常包括:

          • 元素或內容是很多個基礎組件的拼接合集,且在很多場景中的布局具備一定規律,會同時出現;
          • 在通用組件的基礎上帶有強烈的業務特性和需求,比如每次使用組件 A 的時候,都要加入業務需要的表單或提示信息,A 就可以升級成業務組件 A+。

          需要注意的是,業務組件庫中的組件數量不是越多越好“專而精” 有時會更高效。畢竟設計系統的根本目的是降本提效,而非設計師炫耀設計價值的工具。

          另外,“專而精” 也是另一個維度的 “全”。當我們通過對業務需求和屬性的深入研究,將業務組件做的足夠專業,也會從另一個維度對業務進行補充和賦能,從設計側推動業務進行體驗優化,促進產品質量的提升。

          業務組件的搭建標準和規則,更多由業務設計師來決定,也是所有 B 端設計師應該精進的能力。

           

          3 . 完整概念列表

          所以回到我們開篇遇到的問題:

          “為什么對于彈窗的尺寸、抽屜的寬度、輸入框的長度、表格每一欄的寬度等等組件的細節尺寸,為什么 Ant Design 幾乎沒有給出明確的數值定義?”

          因為每個產品各具特色,對于這種與業務強相關的組件尺寸,在通用的、開源的基礎組件庫中,不太好給出一刀切的定義。但在我們日常面對業務需求所用的高級業務組件庫中,則需要有明確的規范

          那么到底哪些數據需要被規范?應該如何編寫規范?「基礎組件」和「高級組件」在設計中還要注意到哪些細節?為了幫助大家更清晰地區分概念,關于「基礎組件」和「高級組件」我總結出了一個完整的清單列表:

          • 基本概念區分
          • 案例區分
          • 組件設計工作流程區分
          • 組件設計內容區分

           


          原文鏈接:長弓小子(公眾號)

          作者:元堯

          轉載請注明:學UI網 ?詳解| 一文帶你了解「基礎組件」和「高級組件」

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

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

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

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

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




          【軟件界面設計】APP上的“小紅點”設計,居然有這么多你不知道的設計細節

          seo達人


          徽標的四種類型

          徽標組件有純圓點、數值、文字、圖標4種常見的類型:

           

          純圓點

          純圓點徽標是最常用的類型,作為一個輕量級的提醒,引導用戶點擊某些特定的功能。

          圖片

          純圓點徽標還可以用來區分用戶的狀態,顯示用戶是否在線。

          圖片

           

          數值

          帶有數值的徽標用來表示具體的數量,主要用在消息通知、添加購物車、外賣點餐等場景。例如在消息通知的場景中,消息icon上顯示的數值可以用來告訴用戶有幾條未讀的新消息。

          圖片

          又或者在網購或點餐等場景中,通過購物車的數值徽標的變化,就能知道已經選擇了多少商品或食物。

          圖片

           

          文字

          文字主要有兩種使用類型,一種是單獨的文字徽標,多用在電商運營等活動場景中,通過顯示優惠促銷來吸引用戶例如在某多多首頁的功能圖標區域,通過加入不同的文字徽標,能夠告訴用戶有新的“限時秒殺”活動和“立減2元”的充值優惠,鼓勵用戶采取行動。

          圖片

          另一種是作為文字標簽,放在UI卡片的任意一角,用來展示某個熱門的話題或者顯示瀏覽量等。

          圖片

          或者放在內容中,用來突出重要的活動。關于標簽組件,還有很有需要注意的設計點,后期設計夾會單獨出一篇文章展開講講標簽設計。

          圖片

           

          圖標

          在元素基礎上疊加一個圖標來顯示當前的狀態,或者對用戶的反饋做出響應,常用的圖標狀態包括成功、失敗、警告。

          圖片

          在一些交友類產品中,可以用圖標徽標表示哪些用戶已經過實名認證。

          圖片

          Tips:根據使用場景的需要,一個UI頁面中可以包含多種徽標類型。在收件箱中,使用右上角的數值徽標展示新收到的郵件數量,下方純圓點提示可以明確區分出新郵件和已讀郵件。

          圖片

           

          徽標設計的五個要素

          雖然徽標看起來很簡單,但想要得到一個獨特的徽標,仍然需要考慮顏色、圓角、描邊、陰影、位置等設計要素。

           

          顏色填充

          利用徽標顏色來調整內容優先級。背景色100%的徽標比半透明(不透明度為15–20%)的徽標視覺效果更明顯,那么重要的內容優先使用100%的顏色填充,相對次要的內容則使用半透明度的徽標。

          圖片

          徽標的顏色并不局限于某一種,更重要的是要靈活使用,做到在每個頁面中都能有效吸引用戶視線并且易于識別。

          圖片

           

          圓角半徑

          調整徽標的圓角半徑來改變容器的外形。除了基礎的圓形、方形,也可以考慮使用長條狀矩形、氣泡形、不規則形狀等外形樣式。

          圖片

          徽標大多用在原有元素的基礎上,所以在設計徽標外形時,還要考慮原有元素的樣式和風格,例如原有元素是圓形,那么徽標也應該考慮設計成圓形,這樣才能和原有圖標統一,跟整個UI頁面搭配。

           

          輪廓描邊

          仔細觀察就會發現,大多數徽標并沒有和原有元素貼在一起,而是相切一定距離的寬度。

          通過給徽標加入與背景色相同的描邊,既能將徽標單獨展示出來,還能保證徽標在任何背景顏色上都能夠被看到。

          圖片

           

          添加陰影

           通過給徽標設置一個平滑的陰影(使用相同的顏色),能夠得到一個微妙而優雅的懸停效果。

          圖片

           

          位置關系

          徽標容器的長度根據根據內容量的多少而定,容器長度可以向左、向右或從中心擴展。當徽標向右延伸時,需要注意徽標距離右側相鄰的圖標之間的距離,避免徽標太長影響相鄰圖標的顯示。

          圖片

          靈活運用特定的文字縮寫可以有效減少內容量并節省空間,例如使用“99+”來表示超過100條的消息,用“4.8k”表示4800位關注者。

           

          最后

          以上就是徽標(Badge)設計容易忽略的設計點,希望通過這些細節能幫助你打磨和改善產品的體驗。

          「組件系列」的其他文章,近期也會不斷更新,歡迎大家關注~

          最后為大家分享一套微信 WeUI 官方組件庫,包括深淺兩個版本和詳細的設計規范,數據圖表源文件, 文件已打包好, 大家后臺回復關鍵詞即可領取。

          圖片


          慢慢來比較快,希望對你有幫助!

          資料參考: How to design Badges

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》APP上的“小紅點”設計,居然有這么多你不知道的設計細節

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

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

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

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

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



          【UI設計】第一次做這種氛圍海報,挺難的!

          seo達人



          1. 真正去做了之后,你才會發現沒你想象中那么簡單!

          我們在聽知識點的時候,看別人咔咔幾下就把效果做出來了,聽著也很簡單,感覺很容易嘛。

          我們很有可能就陷在這個錯誤的思維里,知識點聽著很容易理解,是因為別人拆解的很透徹,看別人做效果做的很輕松,是因為別人已經私下做了不下于5遍的練習,以上這些和我們是沒有任何關系的,真正能和自己產生關系的,只有聽了知識點后去上手操作,我們才會發現,原來真的沒有那么簡單。

          所以才會有以下這么多的版本:

          圖片

          圖片

          圖片

          4.0版本:人物主體更突出于背景

          圖片

           

          所以,做起來的時候發現,挺不容易的。

           

          2. 大氛圍海報,主體素材的底子很重要

          在做大氛圍的時候,背景和元素很重要,需要有一定的空間感,除此之外,其實主體素材也很關鍵,我們一定要選擇一些底子比較好的素材,比如素材本身最好帶有一定的明暗關系、暗部最好能看到一些細節,不然全都是死黑死黑的,那就不好了。

          所以我們可以看一下,我最開始找的素材和最后的素材:

          圖片

          很明顯,后者會更加立體飽滿,調整起來會相對容易一些。

           

          3. 畫面的光源一定要統一

          最開始我找的這張素材,其實光源是在左前方,但是我的背景光源是在后側偏上的位置,結果就導致畫面看起來不是很和諧:

          圖片

          左側光很大,上面的光也很大,我們雖然可以把兩個光源都留下來,但是一定要統一好,分清主次和強弱,比如我定的頂光是主光源,左測是試輔光源,在后面的調整之后:

          圖片

          就可以很明顯的分清楚光源主次了,素材光源和背景就很好的統一了。

           

          4. 畫面千萬別曝光

          畫面很怕曝光,一旦曝光,就會有很多純白色,純白色一多,就看不到細節,細節一旦缺失,畫面就不高級了。

          我們看前面的版本,很多地方都曝光了:

          圖片

          這也是因為素材的限制,因為對比如果調整的太過,原版素材高亮的地方就會曝光過度。

          但我們也有辦法彌補,其實很多太白的地方,我們完全可以去填充一些內容,比如我們下面這張圖,地方2本來是曝光過度的,后來我用仿制圖章工具,把地方1的內容給復制過來了:

          圖片

          這樣就好了很多。

          切記,畫面別曝光過度哦!

           

          5. 選擇的字體,一定要符合畫面氣質

          我們不可能所有的畫面都去修字體,但即使選擇默認字體,也一定要選擇符合畫面氣質的,這個是必須的。

          比如我這個畫面是相對比較男性的、戰斗熱血的,所以我們選字體盡量要方正機械一點,千萬不能隨便整上去一個,比如最開始我選的是這個字體:

          圖片

          最開始沒太注意,后來發現還是很違和的,因為這個字體有很多曲線,配合起來有點難受,所以最后我才選了這個字體:

          圖片

          要比那個和諧很多。

          這個英文字體叫:Zilap Orion Personal Use Futuristic,文末有獲取方式。

           

          總結

          好了,以上就是今天分享的內容啦,最后說下,為什么我一個UI設計師,要去練視覺項的東西,其實所有和美術、視覺相關的東西,基礎都是一樣的,我們很多ui設計師,都很缺少對于視覺基礎的理解,透視、空間、配色、構成等等,我只是在不斷練習基礎,畢竟我的基礎太過薄弱了。

          不足之處還有很多,繼續加油。


           

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

          轉載請注明:學UI網》第一次做這種氛圍海報,挺難的!

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

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

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

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

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



          學再多方法,不如多做一些解決方案

          ui設計分享達人

          目前為止,我發現大部分市面上的文章都在告訴大家,競品分析怎么做、場景分析怎么做、體驗地圖怎么做、訪談怎么做、度量模型怎么做,但唯獨少了最后落地方案怎么做。


          我曾經試著利用迪士尼和環球影城的兩個案例來優化他們的產品,但是很多人開始無腦噴,因為沒有業務做背景,別人想怎么說怎么說,都是“我覺得”。正因為這樣,市面上你幾乎看不到有什么文章教大家實際的交互解決方案,因為怕被噴子噴,反正沒有業務背景你也無法論證自己方案的合理性,靠經驗?別人不認同,你也沒有數據來說服別人,所以這事大家都不敢去做。


          但是沒有業務背景的交互方案就不能做了嗎?當然不是,有了業務背景你可以更針對性的選擇你自己知識庫里的方案和頁面結構來解決業務和用戶的問題,那么前提是你的知識庫里有那么多案例才行,否則有再多再清晰的業務背景,你掏不出來,沒有用。


          所以從今天開始,我會陸續提供一些咱們小伙伴在做練習時候遇到的一些交互問題,大家一起來探討一下。業務背景會適當的提到,但是還是以交互方案的多樣性為主去討論,再強調一遍,不要揪著業務去框住自己的思維。


          學習交互也好,學習UI也罷,如果你完全不懂理論是行不通的,所以很多剛入行的小伙伴基礎不夠扎實,覺得理論沒用,這是不對的,理論有用但是也配合實踐,利用更多的實際案例去加深理論的印象,做到舉一反三,這樣的效果比較好。所以在做案例之前大家務必也要多去了解一下交互的設計理論和基礎指南。



          今天練習的主題是:籃球館預定流程和原型


          其實以前有文章聊到過,但是大家都有不同的聲音,那么我們就繼續來探討一下有哪些不同的方案。既然業務背景不確定,那么我們的交互方案就不存在最優解。



          案例


          下文描述以圖片順序做記號,例如第一張界面即為p1。



          產品功能為什么這么布局、為什么用這個控件、為什么用這個交互形式,取決于業務目標和設計目標,還有用戶的心智模型,以及該單元本身的屬性。那么首先來看案例1-p1,該練習的背景沒有描述業務特征,所以這個布局說明,該產品是一個平臺型的產品,有各種球館的列表,除了細節不完整以外沒啥大的問題。


          再看p2和p3這兩個頁面是這個練習的核心頁面,我們總說產品形態取決于產品本身的定位,平臺型產品的球館詳情大致是可以這樣的,如果產品是自我品牌的產品,那么形態就會發生很大的變化。例如你可以在美團上點星巴克,你也可以在星巴克小程序上下單,但是這兩個應用中的星巴克,是不一樣的內容呈現。



          我們從p2依次往下看,從業務和用戶兩個角度來看這個方案,首先從業務的角度看,有問題的點在于場地說明,平臺型的產品一般都會給商家做管理后臺和營銷工具,但是場地說明這個板塊就有點雞肋了,


          原因1: 大部分球館的標準都是統一的,不可能一塊木地板一塊pvc這樣錯開,很難看,也不可能。如果有區別那么只有尺寸規格的區別。


          原因2:場地類型展示并不是核心用戶需求,只是一種輔助決策,并且是“一次性”決策,該流程的核心任務還是要讓用戶可以去預定場地,但是目前整個頁面只有底部一個預定的按鈕(等會說這個按鈕)


          原因3: 頁面頂部有場館的圖片及環境介紹了,所以場地圖片展示可以集中在頂部的圖片區域展示,例如大眾點評,點開后會有更多分類的圖片和視頻標簽。



          所以中間這塊區域可以展示快捷預定的入口,比單純展示場地類型性價比高的多。


          那么底部是否需要有一個立即預定的按鈕呢?如果這個產品是一個專門用來給籃球館做推廣的平臺,我覺得可以放。但如果是類似大眾點評這樣的平臺的話,就要繼續思考了。


          而我們看到大眾點評為什么底部不做成一個大按鈕的形式,豈不是會更加強化這個任務的核心目標嗎?平臺類型的產品對接商家的種類非常多,同時類似這樣的平臺產品核心的產品定位是給幫助用戶去找到好吃、好玩、好看的地方,側重的是真實用戶反饋,所以說到真實用戶反饋這里再舉個小例子,大眾點評在評價的時候當點擊第五顆星的時候是顯示4.5星,而不會直接顯示5星,要再次點擊后才會變成5星。



          產品認為為了快速點擊5星好評的行為并不是真實反饋,當真實想要給5星的時候才會再操作一步(題外話)。


          回正題,平臺型的產品定位是為了把所有商家和用戶進行高效的匹配(花錢匹配度、曝光更高),而不是為某一個商家去做轉化。并且使用該產品的用戶場景和需求比較豐富,大部分用戶都只是來看看這些場所的評分、口碑和詳情。


          所以底部就不會只放一個預定/買單的大按鈕,而改成了用戶反饋的相關功能。為了幫助商家做銷售,營銷管理工具做的還是很成熟的,什么拼團啦、套餐啦、代金券的工具啦等等。


          有同學會問,那不就是大眾點評嘛,有什么區別。首先不要為了不同而不同,為了創新而創新,如果有更優秀的解決方案當然是最好了,但在當下的環境中,沒有什么必要。如果一定要做差異化,一定是業務訴求出現了。比如這個產品變成了自有品牌做的一個app/小程序,而不再是靠平臺幫我去宣傳籃球場地,那么會變成什么樣呢?


          那我們可以想到的時候在預約入口的地方就會發生了變化(同星巴克),平臺通過列表進入,而自有產品則是在產品首頁中放一個入口,形態也完全改變,首頁不僅僅有場地預定,還會有私教培訓、課程套餐、活動組織等等,圍繞著這個場地衍生出很多的業務。并且像用戶評價這個東西,在自有產品中也變得不那么透明,表現形式肯定也會更加弱化。


          所以在本身是平臺的屬性下,這個頁面正常就是這樣,p2缺少了用戶側的一些支線場景和功能的補充,例如咨詢入口、舉報入口等支線的功能。



          再看p3,點擊預約入口后開始進行選擇場地的交互,選擇場地需要幾個關鍵要素:1.日期 2.時間 3.場地號 4.場地規格 5.價格,那么這里又涉及到業務背景了,場地號是什么?場地規格又是什么?商家如果要讓別人預定場地,是按照全場預定還是可以半場預定,場地的類型是否有多樣,都會影響到我們這整個預約的交互流程。


          p3的這個方案的問題在于:


          1.信息關聯度沒做好,這里的日期和時間要更緊密,和買電影票不一樣。

          2.時間的交互效率低,并且沒有展示全,可擴展性不好,如果場館早上8點開門怎么辦?商家要求最低2小時起訂或者1小時起訂怎么辦?

          3.半場和全場的選擇不夠簡單,全場其實等于兩個半場,而現在的展示形式變成了一個切換按鈕,雖然加了一個箭頭,但是這樣的交互形式和控件的用法是不符合常規的,并且指向性很差,當切換到3/4號場地的時候箭頭就指向了半場,這樣就會產生歧義,所以是不可行的。


          所以我們這里就會發現這些信息是需要聯動的,聯動表單最常見的就是橫縱聯合。一般最初級的做法就是一個行為管一個信息,就比如這樣:把選項放入picker中



          這種交互方式一般不單獨用,因為其實算是一種樹狀結構,這種結構一般運用在添加收貨地址等完全獨立的信息填寫或者一些多行表單中。


          而這里的選擇日期、時間、類型、編號并不完全獨立,而且需要實時查看。


          所以這樣也不夠直觀,picker擋住了價格,無法實時查看。更何況在這個頁面中所有內容都收起來版面利用率大幅下降,交互層級更深了。


          再看一些其他的方案,難道就一定要選場地嗎?我只需要時間、日期行不行。不行,為什么?


          那我們再來看下面這個方案:




          這個方案中,同學把圖片加入進來,希望幫助用戶去輔助決策,其實沒必要,之前也說過,圖片屬于認知信息的一部分,在外面認知完了解過就可以了,里面就不需要再展示一遍了,可能也是為了不讓頁面這么空,因為底部用了一個卡片的塊選擇日期時間。但是少了場地類型的選擇(半/全)長,為什么說半全場和場地號一定要選呢?因為有很多場景缺失了,比如你要幫朋友訂另一個場地怎么辦?我要訂兩個半場打全場怎么辦?每次預定只定了時間,老板還要手動標記哪些場地在哪些時間沒有預定,非常的麻煩。所以不選擇場地是不行的。



          再來看一個方案:



          這個方案的選項和操作過于分散,而一般也不會將需要交互的選項放在左側,有個原則就是內容在上/左,操作在下/右,雖然不能一概而論但大部分情況都要遵循。參考古騰堡圖標原則,左側的日期不經意看以為是一個標題。大部分第一次做交互原型的同學可能都會這樣,一些按鈕和控件的用法和該放、可以放的位置不太清楚,在做交互的時候還有一件事要清楚,就是誰控制誰,控制器怎么觸發。


          而這個方案和p3也是一樣,觸點順序亂了:選擇日期-選擇場地類型-選擇場地號-選擇時間。因為預約場地的場景是,今天小王想約朋友去打球,他問了一下朋友哪天有空,朋友說下周六都可以,最好是下午,于是小王打開應用軟件,選擇了下周六的日期和下午的時間,看看還有哪些場地可以預約。


          同樣也是順序亂了:場地編號-日期-時間。為什么順序很重要,這就和我們買電影票的習慣一樣,大部分情況是我們想要看某一本電影,然后再考慮自己的時間和去哪個電影院,有人說,我就不一樣,我會先選擇電影院,比如我逛街途中突然想看電影了,再看看電影院最近有什么電影。我只能說,滿足大部分、大概率的用戶需求和場景才是正事,產品是無法滿足全部用戶的。


          拋開日期和時間的關聯性,這個方案還有一個問題就是如果要預定多個場地就會比較復雜,例如只有1號場地和9號場地的某一個時間段可以預約,那么就需要用戶在幾個場地中展開收起進行操作,非常繁瑣。



          再來看一個案例



          這位同學將步驟分為了先通過picker選擇日期和時間,確定后再選擇場地。這個流程問題就在于:


          1.picker用的不對,picker雖然叫做選擇器,但往往不會作為一個中間任務承載的模塊去用,而是對于一個頁面中需要選擇一些選項的時候才會用到,選擇完后依然停留在該頁面。否則進入下一個頁面后,再返回,就看不到picker了,還要再選擇一次。


          2.場地可能會出現被人預定的情況,所以當選擇日期和時間后再選擇場地,如果被預定了,那么用戶就會比較抓狂。



          所以在這個頁面中我們會選擇將其全部展開,怎么展開呢,有人覺的日期時間可以不動,把場地和類型展開。有人覺得全部展開才更直觀,那我們來看這兩個方案


          如果日期和時間不展開,會有一個問題,那就是無法選擇多個時間段的場地,只能選擇某個時間段的多個場地,無法滿足這部分用戶需求,并且在信息展示上也會比較擁擠。那么我再看看全部展開,全部展開之后將時間和日期也做一個橫縱形式,然后將半/全場和編號進行結合,默認選擇一個塊即為半場,但是在場地命名上還是需要做一個小心思,那就是如果有人要包全場,如果我們單純給場地編號1、2、3、4….就會讓用戶不知道哪個半場和哪個半場是一體的,所以命名就可以改成1號場A、1號場B…...



          當然如果不要編號問題也不大,主要是場地還有些特殊情況,比如不同場地的通風、燈光的區別,所以會有場地編號。


          在之前的留言中,也有小伙伴會問,即便是自有產品,用戶在選擇場地的時候到底是否需要再看場地的圖片,直接從入口進來不顯示圖片就讓用戶去定場地合理嗎?這里主要就是分針對老用戶還是新用戶,只要去過一次的用戶基本上也就不需要再看場地圖片了,新用戶的話就需要,他們還需要知道場館的地址、聯系方式等等,所以這些內容會聚合在選擇場館的上一步,也就是首頁,具體首頁可以怎么放這些內容留給大家思考。


          我們講到這里,還有一些抬杠冠軍又要說了,一個頁面這么多信息太復雜了,我選擇第一個方案,多簡單,就兩個選項。如果我們知道復雜性守恒定律,那么不管怎么壓縮信息復雜度是不變的,把那么多場地選擇壓縮在一個picker中會更加復雜和難操作。


          其實當大家看到這些原型的時候,都明白問題出在哪里,真實情況是,如果讓你們從0開始,一下子就懵逼了。比如預定籃球場地的這個流程,從無到有,如果讓你自己來設計一遍,你可以完整的做下來嗎?每一個細節是否到位。大家產生了一種幻覺,看懂了,等于自己會做。一定一定要腳踏實地去做一遍才知道自己哪里搞懂哪里沒有搞懂。

          原文地址:站酷
          作者:MOMOUX墨默體驗

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

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

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

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


          美學可用性:用戶體驗的責任之美

          ui設計分享達人

          什么是設計?簡而言之,就是用邏輯和美來解決人們的問題,滿足他們的愿望。在本文中,我們將討論美在用戶體驗設計中的作用:讓我們看看它如何讓用戶和企業都感到高興。

          為什么美對設計很重要

          網站或移動應用程序應該有效、輕松、直觀地解決他們的問題。但是接下來會發生什么,當產品不再是唯一的,不再是獨家的東西,自然競爭開始發揮作用時?人們開始看得更深,爭取更多。他們將審美愉悅和情感吸引力添加到他們的愿望清單中。而在兩款功能同樣出色的產品之間,絕大多數情況下,用戶會選擇美觀的一款。

          基于需求層次,人們獲得的越多,他們的選擇就越復雜。教育和收入水平讓他們思考超越功能:除此之外,用戶追求和諧與美感。所以,美的作用越來越高。

          以下是美在用戶體驗設計中以這種方式起作用的一系列原因:

          1) 它使設計充滿情感,也就是人性化

          2) 它使數字事物與現實世界保持聯系

          3) 它支持可用性

          4) 滿足審美需求

          5) 它將不同的事物與一種風格結合在一起

          6) 它讓產品在競爭中脫穎而出。

          美與美學是連接設計的過去、現在和未來的堅實橋梁。今天,新的布局和圖形基于數百年來收集的豐富的世界文化遺產?,F代設計師和藝術家通過一些趨勢和創新對其進行改造:建立一個新的文化歷史圈,他們保留了歷代最優秀藝術家的作品。這就是藝術和美學吸引力在設計中發揮作用的時候。我們不是在重新發明——我們是讓它變得現代化,讓它解決人們的問題。

          審美-可用性效應

          用戶體驗設計大師尼爾森諾曼集團將其描述為審美可用性效應現象。它指的是用戶傾向于認為有吸引力的產品更有用。人們傾向于相信看起來更好的東西會更好地工作——即使它們實際上并沒有更有效率。這種效果是為什么良好的用戶體驗不能只是功能性UI的一個重要原因——設計一個既有吸引力又實用的界面是值得付出努力的。

          基于此,讓我們考慮一下美感對UX 目標的影響。UX設計有 4 個基本方面,外觀視覺和諧呈現出賦予所有要點的因素。

          可用性意味著產品可以工作并且用戶了解如何工作。

          可訪問性則允許界面適用于具有不同能力和跨各種設備的不同人。

          實用性意味著它可以解決問題。

          可取性意味著它是令人愉快的,并使用戶感到高興。

          業務目標

          但是,啟動新產品或改進知名產品的公司也必須從另一個角度思考。它通過各種財務因素、轉換、銷售和所有其他業務來運作。

          銀幕上的美會影響他們的商業目標嗎?確實會。色彩理論和心理學、屏幕上的和諧、可讀的文本內容和有吸引力的圖像不僅是讓用戶開心的關鍵。

          用戶體驗美學元素

          不同的元素可以讓美融入用戶界面并構建其美學,其中包括:

          a) 排版

          b) 布局

          c) 照片

          d) 插圖

          e) 3D圖形

          f) 動畫片

          g) 視頻

          h) 人物

          所有這些元素構成了交互的美感,并直接影響積極的用戶體驗。

          一致性

          從美學可用性效應考慮的另一個核心點在于用戶體驗和業務的十字路口——一致性。正如雅各布尼爾森所說,“一致性是最強大的可用性原則之一:當事情總是表現相同時,用戶不必擔心會發生什么。”

          事實上,它比交互更進一步。它還有助于建立強大的品牌。標志和品牌商品、網站、應用程序、電子郵件和社交網絡——產品與其用戶的每個接觸點都應遵循一個總體理念和一組價值觀,并以一致和完整的風格包裝。

          最后

          在全球范圍內,所有的設計解決方案都應該回答一個問題——Why?我們做出的所有決定都應該從“Why”開始,這將形成如何與用戶交談,無論溝通的來源是什么。無論與品牌的連接點是什么,您都應該確定與您交流的是什么。這會建立信任感并使品牌更強大,而這正是美有助于使用戶體驗更加穩固和有用的地方。

          原文地址:站酷
          作者:對啊設計君

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

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

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

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


          2022最新盤點,這些設計趨勢今年會怎樣?

          seo達人


          色彩趨勢 

          輕量漸變
          首先值得一說的是輕量漸變,輕量漸變屬于弱漸變范疇,其特點為漸變色彩鄰近,幅度輕柔,節奏緩慢,融合感和細膩感較強。

          因為輕量漸變多會選擇那些明度高、飽和度低的鄰近色,所以能很好地表達出設計中的“呼吸感”。這種呼吸感和通透感給人的感覺非常清新,所以在2022年應該還會持續地流行下去。

           

          高飽和度撞色
          高飽和度色系的應用在2020年就已經成為了重要趨勢之一,因為高飽和度的色彩更能吸引人的注意力,從而有效的吸引用戶的視覺落點。

          可盡管“吸睛”對品牌來說非常重要,但我們在使用時仍需克制,因為過高飽和度的搭配,往往會給頁面的一體性造成一定程度上的背離,且非常容易帶來視覺疲勞。

           

          所以設計師在使用這類顏色時,也通常會對其飽和度和明度進行一定程度的降低,讓顏色“豐盈卻不擁擠”,從而保證我們視覺上的舒適性。

          另外,從高飽和的UI案例中我們也能夠看到,在搭配色彩時,選用大量的鄰近色營造氛圍,再用一兩個對比色產生沖突,就會使得整個頁面輕重相平衡,帶來不錯的視覺體驗。

           

          糖果色
          糖果色以粉色、粉藍色、粉綠色、粉黃色、明艷紫、檸檬黃、寶石藍和芥末綠等甜蜜的女性色彩為主色調,它能帶來一種纖細,柔軟的感覺。所以哪怕一個畫面中出現過多的色彩,也不會讓人覺得很沖突和背離!

           

           

          圖形趨勢 

          emoji表情
          表情符號在現如今是一個超越文本并且能夠得到廣泛認知、跨越文化和多領域的一種視覺語言,在文字段落的末尾加上 Emoji 能夠更好傳達情緒,這使得表情符號不僅在網頁、文本甚至在海報中作為主視覺,都能帶來非常不錯的氛圍感。

          在2021年,emoji不僅被廣泛應用起來,還被廣泛3D化。加上陰影效果的emoji,其情緒的傳達也變得更加豐富。

           

          2022,emoji的表達依舊會持續進行,只是其形式會更加豐富,例如這種“假3D”效果等

           

          3D化
          說到了emoji的3D表達,就不得不說2021最為流行的一個設計趨勢,那就是大量的平面內容通過增加了陰影的效果而被立體的表達了出來。

          像我們熟悉的蘋果應用程序icon等,其設計細節都因此變得更加的豐富而有層次。

          而2022,3D設計趨勢也會通過不斷的發展進一步明確了其自身的地位。它能夠為設計師提供無限的可能性,為任何你能想象的東西提供更多可發揮的空間。

          2022年我們也會看到更多關于2D和3D之間完美結合的設計,像下圖的案例,手繪線條的手指和球體表情之間的互動,不僅讓整個頁面顯得更加有趣生動,還能使2D3D這兩種設計方式的優點都能得到更充分的展現。

          270e8f3a9045870bffea3c57e2842255.gif

           

          玻璃擬態
          同樣,在2021年超級流行的毛玻璃效果,我們也會在2022年看見更加豐富的表達~

          比如最近在dribble上很火的這組效果圖,就是在平面的基礎上,將毛玻璃的效果運用在3D的物體上,讓整體的虛實感更加的生動,也會給設計增加一點與眾不同的活力。

          270e8f3a9045870bffea3c57e2842255.gif

          format,png

          除此以外,我們還可以看到的,這一趨勢已經明顯轉移到了玻璃和水晶質感上,而且以令人難以置信的用立體擬真度將圖形設計提升到了一個全新的高度。所以,2022我們也將看到更多與全息和3D趨勢相輔相成的透明質感和逼真的玻璃背景等元素的設計。

          c7228e64d6a33bb24b7f5ed12d5469d3.gif

           

          幾何抽象
          完全不同于寫實的3D風格,2022年的設計風格可能也會開始往抽象發展。用幾何圖形來表達意象,用色彩傳達情感。少了繁瑣的裝飾,用更簡潔有力的方式去傳達設計理念。

          當分形形狀與色彩完美結合時,就可以創建出極具吸引力的視覺效果。

          c7228e64d6a33bb24b7f5ed12d5469d3.gifa1bce1da9d209654d9c8ca39b749f270.gif

           

          結語 

          的確,每年的設計趨勢似乎總有相似的地方,2022年的設計風格也是在2021的基礎上進行演變和發展的。所以更重要的是,我們要學會持續地積累這些設計素材,并不斷地審視自己的設計作品,學會將他人的設計思路結合在自己的設計靈感上,才能成為一個一直擁有輸出能力的設計師~

           

          原文地址:CSDN

          作者:摹客

          轉載請注明:學UI網》2022最新盤點,這些設計趨勢今年會怎樣?

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

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

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

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




          從設計實戰中,總結了這份B端產品設計規范

          seo達人


          色彩規范 

          色彩規范一般包含品牌色、輔助色和中性色,在B端產品中,顏色除了迎來傳達品牌調性,更多的用來傳達一些提示或警告,通過不同的顏色給予用戶信息反饋,不同的狀態運用不同的顏色展示,比如:

          綠色通常代表成功、已發送、已簽到等狀態;

          紅色通常代表失敗、未發布、未簽到等狀態。

          另外,通過顏色可以對內容進行分層級展示,提高用戶閱讀信息的效率。

           

          品牌主色

          一套產品只有一個品牌主色,是界面中出現最多的顏色。在需要用色強調而且沒有其他要求時,一般都會選擇主色。

          網絡上很多人說B端產品大部分用藍色或者偏冷色系作為主色,可以帶給用戶一種嚴肅冷靜的感覺,但在工作日常中,很多企業會要求顏色必須是公司的品牌色。

          例如當前任職的公司品牌色是飽和度較高的紫色,那么在定主色時,我們就不能跳脫這個色彩范圍,在這樣的情況下,我們可以考慮將品牌色飽和度降低或者用其他暗色系的顏色進行搭配,從而在觀感上盡量顯得不是那么刺眼,降低用戶眼睛疲勞度。

           

          輔助色

          用于提示其他場景,比如:成功、失敗、警告、無效等,輔助色主要是幫助用戶高效獲得信息。

           

          中性色

          常用于文本、背景、邊框、分割線等。

          圖片

           

          字體規范 

          在B端的設計上,文字的字體,字重,字號,行號、顏色用來區分界面信息的層級關系。

           

          字體

          中文字體一般用蘋方體、思源黑體、微軟雅黑,英文字體一般為Helvetica Neue、思源黑體、微軟雅黑。

           

          字號

          系統中字體大小為:12px、14px、16px、18px、20px、24px、26px、28px、30px、36px…

          在開發中,瀏覽器最小字體一般為12px,注意設計中不可以低于最小字體設計。

           

          行高

          行高上,可以采用行高=文字大小+8px,例如14px字體,則14px+8px=22px,則行高為22px。

           

          字重

          通常采用regular、medium、semibold三個字重。

           

          顏色

          目前最常用的字體顏色是#333333、#666666、#999999,區分標題、正文、輔助文字,具體可根據設計進行調節。

          圖片

           

          圖標規范 

          在B端設計中,圖標要簡潔易懂,用來幫助用戶更快導航,提高用戶使用產品的效率。

          在繪制完圖標后,可以存儲成svg方式上傳至Iconfont,這樣方便和開發進行對接,也可以打造自己的圖標庫,在后續的項目中,方便直接運用或修改。

          圖片

           

          布局柵格 

          B端系統的主流分辨率主要為1920、1440和1366,個別系統存在1280的顯示設備,通過適配布局來完成在不同分辨率下展示內容。

          一般選用24柵格布局,不同柵格結構中柵格區域也會有所不同,固定區域會存在于響應式網格之外,不隨著頁面的變化而改變大小。

          圖片

           

          組件規范 

          B端組件庫的建立,常用的組件包括按鈕組件、面包屑、導航菜單、分頁、下拉控件、上下左右滑條、日期選擇框、單選復選框、樹形選擇、標簽頁、輸入框、表單、上傳樣式、氣泡卡片、表格列表、警告提示、彈窗等。

           

          按鈕

          按鈕的五種樣式:主按鈕、默認按鈕、虛線按鈕、文本按鈕、鏈接按鈕。

          按鈕的四種狀態:常規、懸停、選中、禁用。

          圖片

           

          面包屑

          顯示當前頁面在系統層級結構中的位置,并能向上返回,用于系統擁有超過兩層以上的層級結構,同時可以告訴用戶當前頁面在哪里,并提供導航功能。

          圖片

           

          導航菜單

          導航菜單為頁面和功能提供導航的菜單功能,用戶依賴導航在各個頁面中進行跳轉。

          圖片

           

          分頁

          采用分頁的形式分隔長列表數據,每次只加載一個頁面。當加載/渲染所有數據將花費很多時間時可采用分頁。

          圖片

           

          下拉菜單

          當選項過多時,使用下拉菜單展示并選擇內容。

          圖片

           

          時間日期選擇器

          用于選擇或輸入日期,分為固定時間點&范圍、任意時間點&范圍、選擇日/月/年范圍。

          圖片

           

          選擇框

          用于在一組備選項中進行選擇,包括單選框和多選框。

          圖片

           

          標簽頁

          通過切換不同的選項標簽,查看不同的頁面內容。

          圖片

           

          輸入框

          需要注意輸入框在輸入前、輸入中、輸入后三種不同的狀態。

          圖片

           

          上傳

          通過點擊或拖拽上傳文件。

          圖片

           

          表格

          用于展示多條結構類似數據,可對數據進行排序、篩選、對比或其他自定義操作。

          圖片

           

          警告提示

          用于頁面中展示重要的提示信息。警告提示一般分為四個狀態:成功、信息注釋、警告、錯誤(失敗)。

          圖片

           

          彈窗

          用于消息提示、成功提示、錯誤提示、詢問信息、填寫表單。

          圖片

           

          最后 

          希望通過這套B端設計規范,能讓你對B端系統有一個全面的了解。在之后的文章中,設計夾會持續分享這些設計規范的具體用法。

          例如那么多的B端組件,實際上每個組件都值得單獨用一篇文章來仔細研究如何使用。

          如果你想學習更多關于「B端設計」的知識,記得及時關注文章推送哦~

          最后設計夾分享一套簡約風格樣機模型供大伙包裝作品時使用,這套樣機包含手機端、Pad端、手表端、PC端等多種尺寸,有PSD、Al、XD三種格式,樣機已打包好, 大家后臺回復關鍵詞即可領取。

          領取方式:關注公眾號,后臺回復【樣機】獲取源文件

          圖片

          慢慢來比較快,希望對你有所幫助!

           

          原文地址:Clip設計夾(公眾號)

          作者:Fix-

          轉載請注明:學UI網》從設計實戰中,總結了這份B端產品設計規范


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

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

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

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





          基于數據的體驗洞察與驗證—GSM模型

          seo達人


          我們為什么要使用GSM模型

          常規工作中,需求往往由PM發起,UE團隊到底如何跟PM、FE等團隊成員協同,達成目標共識,是我們值得討論的。

          圖片

          因此建立一套科學的模型,通過對目標的設定來倒推過程,結合定性和定量研究,與項目組就目標可以達成共識,并且更加準確的反應出產品目標中的用戶體驗質量,這套模型就是GSM模型。

           

          GSM模型的簡介與定義

          “GSM”是Google提出的一種自上而下度量用戶行為的方法,通常用于衡量產品/項目目標的實現程度。通過對目標的設定來倒推過程,精準設定指標體系的一種量化研究方法。適用于產品設計中的各個角色。

          圖片

          • 目標:需要解決的問題,通過對產品(項目)目標拆解推導出用戶體驗目標,體驗目標輔助產品目標達成;
          • 信號:設計目標實現后所產生出的現象,設計目標是信號的必要條件;
          • 指標:是對用戶現象的量化,也就是信號所得出的可衡量的數據化現象。

           

          GSM模型的使用場景

          GSM模型可適用于產品設計中的各個角色,對交互設計師尤為重要,交互設計師作為連接產品、用戶、設計的中間一環,不斷在業務和體驗之間博弈,尋找平衡點。

          圖片

          通過GSM模型對產品目標進行分析,結合業務目標與用戶需求,找到改進機會點,在設計中幫我們斧正設計思路,對方案不斷優化,上線后進行方案效果回收。

           

          GSM模型帶來的價值

          綜上所述,GSM模型基于項目目標,找出設計目標。并且可以辨別設計的優良。

           

          GSM模型的具體實施步驟

          圖片

          通過對目標的設定來倒推過程,并精準設定指標體系。

           

          step 1 識別并明確目標(Goal

          業務目標、用戶目標、設計目標是什么?

          用戶要完成什么任務?我們希望他們按照什么路線走?希望他們執行什么操作?

          圖片

          這里以手機百度APP智能小程序業務端——創建小程序表單項目改版為例,提高表單審核通過率是整個項目目標,通過拆分項目,設計目標為表單填寫更快速和表單填寫更準確。通過確定設計目標繼續推到用戶表現。

           

          step 2 推導目標對應的表現(Signal

          什么用戶行為/態度指示了目標達成?什么樣的感受與目標失敗/成功相關?

          圖片

          從目標——信號可以是一對多的關系,根據用 戶行為在不同的行為階段會有不同的信號表現,以用戶不同階段觀測用戶的不同行為表現。

          • 進入 —— 通過各種途徑進入頁面
          • 發現 —— 在該頁面中瀏覽、查找自己所需要的信息
          • 辨別 —— 然后通過圖片、標題等內容以及設計形式來識別有效信息
          • 行動 —— 找到后用戶想了解詳情,點擊鏈接進入

          這里還以手機百度APP智能小程序業務端——創建小程序表單項目改版為例,將設計目標轉化為用戶行為。

           

          圖片

           

          step 3 找出關鍵的數據指標(Metric)

          依照用戶的行為表現,觀測對應的數據指標,通過這些可量化、可衡量的數據指標進行數據分析并指導下一步的優化迭代。

          1. 進入 —— 作為用戶進入的頁面,在這一步經常發生的問題是退出,往往會產生兩個對應的指標

          • a. 作為用戶在網站或APP的著陸頁,用戶離開為跳出
          • b. 非網站或APP的著陸頁,用戶離開為退出

          往往,在這一行為中“跳出”指標可以衡量頁面內容傳達與用戶目的匹配程度,是否符合用戶的心理模型,這也是絕大多數網站首頁最重要的數據指標之一。

           

          2. 發現 —— 用戶來到頁面中都要先瀏覽的過程

          在這一步,設計師關注的問題是頁面中的用戶視覺流,關鍵信息能否被用戶快速鎖定。

          圖片

           

          3. 辨別 —— 當用戶發現關鍵信息后,需要通過識別文字或樣式來判斷當前的信息是否與自己的目的符合,并決定是否要繼續采取后面的點擊行動。這里設計師關注的是信息的易識別性,來快速幫助用戶做出決策。

          關于識別性的指標,歸納出3點來進行衡量:

          • a.鼠標懸停時間
          • b.后臺報錯率
          • c.人均點擊次數(適用特殊控件,如篩選器等)

           

          4. 行動 —— 用戶在站內內容的點擊

          “點擊”數據是用戶行為中最重要的一點。不僅僅是單個頁面,用戶在站內行為路徑分析中,點擊是作為路徑中一個節點的結束,下個節點的開始。所以我們主要針對圖中的“站內分流”進行分析。

          在首頁的分流數據中,作為設計師主要關注兩個指標:

          a.不同內容的點擊占比

          b.其后續路徑中的目標轉化質量

          圖片

          再次回到我們的工作案例中,根據用戶行為表現拆分成數據指標。

          圖片

          綜上所示,通過表單可視化、精準引導、組件升級的方式,完成項目與設計目標,最終改版成功。

          圖片

           

          結語

          GSM模型是一種綜合數據驗證模型,在使用過程中可以結合頭腦風暴、市場調研、可行性測試等方式共同使用。

          圖片

           

          原文地址:百度MEUX(公眾號)
           
          作者:百度APP用戶體驗
           
           轉載請注明:學UI網》基于數據的體驗洞察與驗證—GSM模型

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

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

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

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



          如何有效提高你的思考能力!

          seo達人


          1.我們的思考方式

          如果想要快速有效的提升我們的思考能力,那么首先需要了解,我們平時在遇到問題時是如何思考的。

          比如,領導叫你去負責一個產品的設計語言定義,這時候,出現最多的可能會有以下兩種情況(完全不知道的已經排除):

          第一種情況:腦袋里面有一些不完整的零散知識,也不知道怎么組織運用。

          圖片

          第二種情況:腦袋里面有完整的零散知識,并且能組織成一套完整的方法論,還能很好的推動實現。

          圖片

          這兩種最根本的區別是第二種知識結構已經有了明確的解決方案,第一種非常零散的知識。

          可能有人說,第二種都是很資深的設計師了,肯定能做出來,其實大部分人都可以,只要你的知識圖書館里面有相關可組織起來的知識。

          任何人都是這樣的,在我們在遇到問題時,一般都是從知識圖書館中去搜索解決策略。

          這時候,假如你搜索范圍有限,知識圖書館存量較少,那么此時就會很難繼續下去,沒有足夠的知識來支撐你完成下一步行動。相反,如果你的知識圖書館非常豐富,涉及到多個領域,那么你給出的解決方案就會更系統,更完整,更具創新性。

          說到這里,那么要如何才能擁有豐富的知識圖書館,下面我們來看看,如何在日常工作學習中積累,不斷壯大我們的知識圖書館。

           

          2.如何豐富知識圖書館

          我們解決任何問題時候,其實都在調用我們的知識圖書館里面的知識。有人可能會說是想象力,其實想象力都是基于已有的龐大知識圖書館,然后從里面挑選出來各種排列組合出來的新解決方案。

          越是知識圖書館豐富的人,他們給出的解決方案就會越多且豐富,創新度也會很高。

          這就是為何,我們身邊有些設計師面對一個問題,能有多種解法,甚至有些設計師給出的解法會讓你很感嘆為何他能這么厲害。

          那么如何在短時間豐富強化我們知識圖書館?最有效且最快的方式有以下幾種:

          1.需要定期,定計劃的豐富你專業領域的知識,比如你是一名UI設計師,那么這個領域的知識你都需要了解,并且把最常用的知識多熟練,最好能掌握這個領域的幾個牛逼的方法論。

          2.找一本書籍,這個書籍能覆蓋這個領域知識基本介紹80%以上知識,那么你就知道這個領域知識架構,然后逐步去填充,形成你的知識網絡。

          3.找個可靠的導師,行業專家,跟著練,提升也最快。

          保持學習態度,不斷訓練和豐富我們知識圖書館,這樣我們在遇到問題時候,就可以輕松從里面調取來應用,你的思維也會更開竅。

          創新思考怎么來的?就是將你的龐大知識圖書館里面的知識,重新拿出來排列組合,就是創新。

          如果想要自己在短時間有明顯的提高,那么開始定個目標去逐步實現。

           

          3.寫在最后

          今天我們說了一個很重要的關鍵詞:“知識圖書館”,我們在生活中解決任何問題都是在不斷調用知識圖書館里面存儲的知識。

          如果你現在還是遇到問題,腦袋一片空白,不知道怎么解決,那并不是因為你笨,而是因為你的 知識圖書館的存量太少。沒關系,就現在,下個決心去豐富。

          分享一句話給大家:你要相信看似不起波瀾的日復一日,會突然在某一天讓人看到堅持的意義。

           

          原文地址:功夫UX (公眾號)
          作者: Tony
          轉載請注明:學UI網》如何有效提高你的思考能力!

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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