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

          首頁

          如何讓用戶始終有掌控感——信息架構

          純純

          信息架構是產品的骨架。具體而言,就是一款產品有幾個一級頁面,以及支撐起整個產品的一級頁面、二級頁面各有幾種內容樣式。所謂一級頁面,微信的“發現”頁就是一個一級頁面;在“發現”頁點“朋友圈”,進去的就是一個二級頁面。所謂內容樣式,Banner 是一種內容樣式,九宮格是一種內容樣式,設置頁面那種列表也是一種內容樣式。

           

          這樣的信息架構,有什么價值?

           

           

          01 信息架構的價值:掌控感與健康迭代

           

          對用戶而言,信息架構的主要價值在于掌控感;對產品而言,信息架構的主要價值在于健康迭代。

           

          1. 掌控感

           

          如果房間里很亂,到處都堆滿了東西,常穿的衣服也找不到了,我們就很容易變得煩躁不安。相反,如果混亂的房間被收拾得很整潔,我們的心情也會隨之變得愉悅起來。

           

          這中間的原因是什么?

           

          個人覺得,從原始社會到 21 世紀,我們人類一直生活在競爭中,所以一直在追求一種對生活的掌控感。這種掌控感,會讓我們找到一種存在感和價值感,從而給身處競爭中的我們一種安全感。一個收拾得井然有序的房間,會讓我們覺得一切盡在掌握中;一個胡亂塞滿東西的房間,則會讓我們覺得這個房間處于失控狀態,從而引發煩躁不安。

           

          一款 App,如果主要的幾個一級頁面也都塞滿了各式各樣的內容,那么用戶通常也會感到煩躁不安。這是因為用戶不能馬上理出頭緒,不能馬上獲得那種掌控感。另外,如果大的改版經常讓用戶體會到這種煩躁不安,用戶就會對這款 App 感到不滿和失望,甚至失去信心和期待。

           

          所以說,信息架構的第一個價值,就是讓用戶始終有掌控感。

           

          2. 健康迭代

           

          產品的更新迭代,有時會出現“發?!焙汀拔⒄巍钡那闆r。這都屬于不健康的迭代。

           

          所謂發福,就是變得臃腫了,比如一級頁面突然增加了很多內容樣式。所謂微整形,就是和之前比有點亂套了,比如有的一級頁面突然消失了、有的一級頁面突然出現了、有些常用的功能突然找不到了,諸如此類。

           

          一款產品,如果大的改版總是通過發福、甚至微整形的方式實現,用戶就很難獲得掌控感。

           

          反過來,一個優秀的信息架構,是接近“凍齡”的。也就是說,不管產品怎么更新、怎么加新功能,都能簡單如初,都能讓用戶馬上獲得掌控感。典型的例子是微信:微信已經加了很多功能,但整體給人的感覺依然是簡單的。

           

          這樣的信息架構,很少發福,也幾乎不做微整形,所以能讓用戶永遠有掌控感,從而確保產品能夠健康迭代。

           

           

          02 怎樣實現信息架構的價值

           

          什么樣的信息架構,能夠實現“掌控感”和“健康迭代”?

           

          其實參考答案剛才已經出現了,那就是接近凍齡的信息架構?;蛘吒_切地說,是一種“以不變應萬變”的信息架構。

           

          這里的不變,是指信息架構看起來永遠沒有明顯變化,永遠都很簡單。萬變,是指不斷新增的功能,不斷變化的功能。

           

          如何做到以不變應萬變?一級頁面和二級頁面都很關鍵,其中最核心的是一級頁面。這里也順便拋一個問題:一級頁面,用來干啥?

           

          一級頁面主要用來干三件事,分別是:提供掌控感、提供常用功能、提供小入口。也就是說,一級頁面尤其要把掌控感給到用戶,要讓用戶快速找到常用功能,同時還要為不常用的功能提供一個小入口。需要說明的是,這個理念可能不太適合一些商店類產品,比如淘寶這樣的電商產品,所以僅供參考。

           

          那如何完成這三件事?主要有以下四個要點。

           

          1. 不要超過 4 個一級頁面

           

          4 個和 5 個,它倆之間存在微妙的區別。比如我們給手機號或銀行卡號分段時,更喜歡每段最多分 4 個數字,而不是 5 個,直觀對比見下圖。


          4 個還是 5 個

           

          很多 App 的底部導航欄,也是只有 4 個Tab,即 4 個一級頁面。受生活經驗等因素影響,當我們看到 App 有 4 個一級頁面時,內心或潛意識里可能會覺得:哦,4 個,還算簡單,基本能記?。欢斂吹接?5 個一級頁面時,可能會感到一絲壓力:5 個啊,有點多了。

           

          總的來說,我們更偏愛只有 4 個一級頁面的產品,因為 4 個仍在簡潔的范疇內,5 個就已經開始走向復雜。在《微信背后的產品觀》這場分享中,張小龍也提到過:“微信保證只有 4 個底部 Tab。”

           

          2. 不要超過 3 種內容樣式

           

          Keep 6.0 系列的“探索”頁面有 5 種內容樣式,顯得很復雜。微信的 4 個一級頁面中,“發現”和“我”頁面只有 1 種內容樣式,“微信”和“通訊錄”頁面只有 2 種內容樣式(加上頂部的搜索框),顯得非常簡單,和 Keep 的對比如下圖所示。

           

          Keep 6.0 系列與微信的內容樣式數量

           

          像微信這種內容樣式數量上的極簡,可能很多產品難以做到。那么,我們不妨退而求其次,早期先從 1 種、2 種內容樣式開始。后期加功能了,可以考慮第 3 種,謹慎考慮第 4 種,盡量不要增加第 5 種,因為一定會變得復雜。

           

          大家可能會說,產品的功能很多,3 種內容樣式不夠用。

           

          針對這種情況,只要邏輯上不存在大的問題(比如把“支付”放到“通訊錄”頁面),就可以嘗試把不同內容合并成一種樣式。微信在這方面就做得很好,大家可以參考它的設計。比如下圖的“通訊錄”頁面,聯系人上方那些內容,和聯系人不是同一類內容,但它們共用一種內容樣式——一個簡單的圖文列表。

           

          微信“通訊錄”頁面:不同內容合并成一種樣式

           

          3. 不為二成需求,去打擾八成用戶

           

          產品設計里存在一個比較常見的問題,就是往一級頁面塞很多內容或功能,其中有相當一部分是用戶日常用不到的,這種設計容易讓人覺得臃腫。比如 Keep 6.0 系列的“運動”頁面,就用了較大空間來推薦付費計劃和運營活動,如下圖所示。

           

          用較大空間來推薦付費計劃和運營活動的 Keep 頁面

           

          相信有相當一部分用戶是不需要這些內容的,所以這其實也是一種打擾。這種打擾會影響到這些用戶對這個界面的掌控感。

           

          這種現象有兩個可能的原因。一是企業擔心用戶不用這些功能,所以就在一級頁面用很多空間來展示它們,Keep 的例子應該屬于此類。二是有部分用戶提建議,所以企業就加了這些功能。

           

          關于第一個原因,個人觀點,有些功能本身就屬于二成需求,在一級頁面占用太多空間不僅改變不了這個現實,還會對用戶形成打擾。

           

          關于第二個原因,個人看法,用戶的建議通常只代表個人立場,而企業至少要代表大部分用戶的立場。比如,網上就有人建議微信在朋友圈加一個屏蔽別人的功能,實際上微信有這個功能,只是一直隱藏,沒有放出來——因為用的人少,它屬于二成需求,放出來的話會對八成用戶形成打擾。

           

          總的來說,理想情況是接受現實、尊重規律:是八成需求就提供八成空間,是二成需求就提供二成空間。具體參考如下圖所示。

           

          是八成需求就提供八成空間,是二成需求就提供二成空間

           

          4. 盡量不在標題欄使用 Tab 或下拉框,增加維度

           

          這其實是張小龍分享過的一個觀點,我個人很贊同,就直接引用一下。下面直接看兩個例子。Keep 6.0 系列的前三個一級頁面,標題欄都使用了 Tab,就顯得內容很多,有點復雜,如下圖所示(僅展示前兩個)。

           

          使用了 Tab 的標題欄

           

          微信中擁有標題欄的前三個一級頁面,其標題欄都沒有使用 Tab 或下拉框,就顯得簡單、內容少,如下圖所示(僅展示前兩個)。這也是微信保持簡單的一個重要原因。

           

          沒有使用 Tab 的標題欄

           

           

          結語

           

          一般情況下,產品都需要更新迭代:增加新功能,完善舊功能。

           

          用戶則是一個矛盾體:一方面對新功能和新事物懷有好奇心;另一方面又希望每次打開常用的產品時,都有一種回到家一樣的熟悉感和一種家里井然有序的掌控感。

           

          好的做法,就是類似微信那樣:盡管加了新功能,但是看起來沒有明顯變化。也就是說,以“不變”的信息架構,來應對萬變的功能。

          原文地址:站酷    作者:SnowDesign


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

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

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

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

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




          交互設計:如何做到善意?

          純純

          我們來探討下交互設計的善意。


          善良常常被用來形容人,偶爾被用來形容產品,很少被用來形容交互設計。


          就像人們會說,iPhone 有人文關懷,而很少會說,iPhone 的交互設計有人文關懷。在筆者看來,原因之一,是交互設計很難將人文關懷囊括完,而產品本身則基本可以。


          類似的道理,本文探討的善意,始于交互設計,但不局限于交互設計,還包括產品和企業的善意。


          一家之言,歡迎交流探討。



          01 為什么選擇善意?


          一個 3 歲小孩流落街頭,無家可歸,會讓無數人起惻隱之心。我們普通人的微小善意,有時可能是一種本能反應,或者說是一種感性反應。


          “他內心是有時邪惡,還是對人們始終良善”,這是李宇春《年輕氣盛》里的一句歌詞。


          惡是否為本能,筆者不知道??茖W家的解釋是,有些基因中會帶有惡??梢钥隙ǖ氖?,善惡皆為人性,共存于人類當中。


          感性和理性是會此消彼長的,林黛玉和薛寶釵就是兩個極致的例子。同理,人類體內的善惡,也會此消彼長。


          一款產品,在做決策時,很大程度上是基于理性。


          這種理性決策,很多時候是無意為善,也無意為惡。但遺憾的是,那個非善非惡的中間地帶不會一直存在,有些無意為善和無意為惡,最終會成為非善即惡,比如開屏頁是否放廣告這件小事(下文有詳述)。


          既然善惡會此消彼長,而且產品的有些理性決策會導致非善即惡,那么不可避免的,有時候,善惡會變成一道二選一的選擇題。


          接下來,我們就從理性的角度探討下,為什么選擇善意。



          1 長期主義


          最近幾年,互聯網從業者有個共識:創業是件九死一生的事兒。因為據數據統計,90% 的創業公司活不過三年。


          這是一個值得深思的社會現象,背后的原因究竟是什么?直接原因,往往是資金斷裂。深層原因,會有很多,比如產品不夠好、方向不夠準,等等。


          那么,核心原因呢?筆者認為,和創始人的執念有關。


          有兩類執念可以避免此類悲劇。第一類是做出優秀產品;第二類是長期主義。



          做出優秀產品這塊,有很多例子,最典型之一是特斯拉。特斯拉曾面臨多次危機(資金、產能等),但都挺過來了,這肯定和產品深受車主喜愛有關。


          筆者也見過兩個普通創業公司的例子。他們都有一顆做出好產品的心,都很重視 UI、交互、用戶體驗這些基礎的東西,而且把 UI 做的比較優秀,交互和用戶體驗做的還不錯。其中一家靠著用戶的付費在平穩發展,另一家連產品帶團隊被大廠收購了。


          長期主義這塊,典型例子之一是巴菲特。巴菲特信仰并踐行價值投資,價值投資依賴長期主義。最近幾年,長期主義在國內也被越來越多的提及。


          個人的理解,長期主義至少包含兩個要點,分別是:積累、多贏。因為,沒有積累就不會有成就,沒有多贏成就就不會長久。



          中國女排,世界冠軍。排球界有個說法,叫三年成型,五年成才,八年成器?;ヂ摼W行業,也大致如此。這是積累。


          用戶,員工,投資人,三方利益都兼顧好,才是多贏。


          俗話說,顧客是上帝,大家都知道對用戶好;投資人作為強勢一方,利益也往往有保障;員工的利益是否有保障,往往取決于創始人,所以存在很大變數。


          回到主題,長期主義和善意,有什么關系?


          通常而言,多贏能否實現,關鍵在于員工的利益能否得到保障。


          筆者在網上看過一個有意思的評論,說當下的年輕人,如果收入、成就感、高興這三點有兩點達不到,就會辭職。


          所以,員工利益得到保障的標準,可以簡單定義為“三中二“,即收入、成就感和愉悅這三點滿足兩點。



          再來分析一下現狀:相比員工,公司是強勢一方;人們仍受最大程度剝削剩余價值、官僚思想等觀念影響;惡性加班等風氣存在;僧多粥少的就業行情。


          在這樣的大環境下,如果公司對員工沒有愛和善意,員工的利益是很難得到保障的。


          最后,總結一下:公司有善意,員工利益就有保障,就能實現多贏,從而有望實現長期主義。


          2 美好生活


          前段時間,因為給武漢捐款 5000 萬、并且疫情期間蔬菜按成本價銷售,一些網友被胖東來這個商超刷屏了。


          胖東來來自河南許昌,一個三四線城市,也是筆者的家鄉。目前僅在許昌和新鄉有店。


          在一些關于胖東來文章的評論區,很多網友在喊胖東來去自己的城市開店。


          為什么有這么多呼聲?簡單分享幾個例子。


          顧客方面,胖東來有 6 類購物車,包含嬰兒手推車、兒童購物車和老年人購物車。老年人購物車自帶凳子,可供休息,同時還配有放大鏡。


          員工方面,有高薪、高福利和利潤分紅等。胖東來比較為業界稱道的高福利有:每周二閉店,春節閉店 5 天,工齡滿 1 年即有 30 天帶薪年假,一天最多工作 7 個小時。


          從網上的報道、評論以及公布于網上的企業文化來看,胖東來一方面主張工作和生活(愛情、家庭、休假等)的平衡,一方面在踐行和傳播幸福、快樂、尊重等很多積極的文化價值觀。



          看新聞的時候,筆者注意到,老板于東來經常會提到“美好”這個詞兒。實際上,在筆者看來,胖東來本身就代表了一種美好生活,一種物質和精神雙豐盛的美好生活。


          對于這樣的美好生活,用戶和員工自然喜歡??蛇@對企業有什么好處?


          胖東來曾經意欲退出新鄉市場,新鄉合作商家和市民紛紛請愿,政府也多次出面挽留,最終胖東來留下來了??梢?,胖東來在新鄉已經深入人心,顧客自然會大力支持它的發展。


          胖東來有一句 slogon,能夠很好的解釋這一切,那就是:愛在胖東來。


          同樣,既提供體面的收入,又關注員工和用戶的精神需求,給他們帶去美好生活,當然需要更大更多的善意。


          在當下中國,能提供高薪的互聯網公司已經很多了,但是能在精神層面讓員工感覺良好、感覺愉悅、感覺幸福和快樂的公司卻為數不多。


          對于所有企業而言,這又何嘗不是一種機會?



          02 交互設計里,有哪些善意?


          現實中,像胖東來給顧客和員工提供的這種美好生活不常有。但是退一步講,還是有很多產品對用戶展現了很多微小善意,值得我們學習。


          這種微小善意主要有三類,分別是:不打擾,護尊嚴,人為先。



          1 不打擾


          我們生活在一個信息爆炸的時代,不被手機上的信息過度打擾,是一個剛需。有三類信息,如果把握不好度,就會對用戶形成打擾。它們分別是:廣告、推送、推薦。



          廣告這塊,主要有兩類會形成打擾,分別是:時機不佳的廣告,過長的廣告。


          這方面,微信是個榜樣,值得學習。比如開屏頁廣告,就是時機不佳的廣告,因為大家不想在這里看到廣告,微信就沒有放。朋友圈里也有較長的視頻廣告,微信的常見做法有兩類,要么先展示一張圖片,要么先是無聲播放。是否看完整的視頻廣告,選擇權在用戶手里。


          推送這塊,常見的有手機系統的通知和 App 內的紅點消息。


          系統通知,目前也有被濫用的趨勢。根據使用情況和感受,個人的建議是這類推送控制在 1-2 類。第 1 類是關于核心功能,比如微信推送新消息,搜狐新聞推送新聞;第 2 類可保留一定的彈性,核心原則是對用戶有價值,比如偶爾的活動通知。


          目前有兩種情況會對用戶形成打擾和困擾,第一種是過于頻繁的活動通知;第二種是推送和核心功能相差甚遠的信息,比如金融類產品推送新聞。


          紅點消息,有一類會對用戶形成打擾,那就是來自官方的過于頻繁的各類活動、促銷等信息。


          推薦這塊,主要指 App 內的 Banner 和專題。目前對用戶形成打擾的主要是一級頻道的一些專題。


          一種是過多,比如網易云音樂的首頁,就有 9 個專題;一種是位置不佳,比如 Keep 的“探索”頻道就包含了課程的推薦,但是在“運動”頻道還有兩個專題來推薦課程。


          2 護尊嚴


          護尊嚴,就是盡最大可能,維護用戶的形象和尊嚴。


          最近幾年,常有產品花巨資撒紅包給用戶搶。產品的初衷自然是好的,而且看起來也是一件皆大歡喜的事情。但是這件事很難提升產品的美譽度,也就無法增加用戶對它的喜愛和忠誠程度。


          為什么會這樣?


          讓用戶搶自己撒的紅包,這件事能維護用戶的形象和尊嚴嗎?非但不能,可能還會對此造成傷害。因為可能會顯得用戶愛占小便宜,也可能會使用戶處于被施舍的一方??傊@種事對用戶來說,并不酷。


          一款產品,要想贏得用戶更多的喜歡、尊敬乃至忠誠,就最好不做哪怕僅是微弱傷害用戶形象和尊嚴的事情,同時多做一些相反的事情。


          3 人為先


          人為先,是當用戶利益和企業利益發生尖銳矛盾時,去追求一種用戶利益在先的雙贏局面。


          大家都知道,吸煙是有害健康的,但是煙草公司又是要賺錢的。泰國香煙那種既觸目驚心又惡心嚇人的包裝,就盡他們最大的可能詮釋了“吸煙有害健康”,是真正的用戶為本,讓人心生敬意。



          泰國香煙的這種做法,值得一些極易讓人上癮的游戲廠商借鑒和學習。



          03 交互設計:如何做到善意?


          上一大段,是善意的三類表現。這一大段,再探討下做到善意的一個原則。


          以社區型內容型產品為例,這個原則就是:先服務后管理


          這里的服務,是指以服務者的心態做好用戶體驗,并不局限于交互設計。這里的管理,指的是一些必要的管理,一般是用戶的行為規范和用戶違規時的處理,比如評論里罵臟話、發布侵權文章等。


          所有用戶都是需要被服務的,只有少數行為不當的用戶才是需要被管理的,所以我們要先服務后管理,以免誤傷了不需要被管理的用戶。


          服務本身就是一種善意,筆者把它分成了兩個階段,分別是:體驗的初始階段,體驗的完整過程。


          初始階段對應的是:初始服務;完整過程對應兩類服務,分別是:家常服務,極致服務。



          1 初始服務


          初始服務,是當用戶剛開始用這款產品時,能給他們留下良好印象的服務。


          如何做到?不出現任何輕微惡意和管理傾向即可,再提供一些便利和幫助則更好。


          下面分享一個反面例子。


          在個別城鎮的衛生死角,有時會看到這樣的標語,“此處禁止倒垃圾!違者罰款 200!“。結果那個地方往往有很多垃圾。


          為什么會這樣?


          這個標語,有兩層意思:第一,你很可能會在這里倒垃圾;第二,禁止你這么做,做了要罰錢。


          也就是說,某種程度上,這個標語在用惡意揣度別人,同時也在很嚴的管理別人。


          看到這個標語的人很可能會這樣想:既然認為我會在這倒垃圾,那我索性就倒了;禁止我?憑什么?還罰我錢,嚇唬誰呢,況且你有證據嗎?


          下面再分享一個很好的正面例子。


          筆者有一個宜家的退貨經歷。把一個已經拆過的桌子打包送到了宜家,宜家沒有檢查里面的零配件(很多螺絲之類的),直接退了。這樣寬松的退貨條件,宜家可能會蒙受一定損失,比如小概率的零件丟失,但宜家還是把這種服務提供給了顧客。筆者當時的感受是宜家挺信任我們的,對宜家就多了幾分好感。


          2 家常服務


          家常服務,是指一種稀松平常,但又讓用戶感到舒服自在的服務。


          舉個例子,你去好朋友家里玩,朋友給你倒了一杯水,并端出一盤削好切好的蘋果,你們一邊吃一邊聊。你和朋友是平等的關系,他這種簡單的招待并不會使你感動,但卻使你有一種接近在自己家的那種舒服自在。


          筆者在用微信公眾號(后臺)時會有這種感受。在星巴克和肯德基時也會有類似感受。


          家常服務,如何實現?第一,要有良好的初始服務,這是基礎;第二,要有周到且較高品質的交互設計,這是關鍵。


          以微信公眾號為例,和微信一樣,它的交互設計也做到了周到和較高品質。下面看看微信公眾號的初始服務。


          面向大眾的資訊平臺大多都有一個發文規范,多是關于禁止的行為,通常都會用一個單獨網頁來展示,有 1-2 頁紙那么多。


          通常情況下,多數作者是不會違反發文規范的。對于這部分作者,當他們首次看到 1-2 頁密密麻麻的發文規范時,可能會產生抵觸心理,即便自己不會違規。就好像高中開學第一天,班主任二話沒說,直接就立了 20 條班規,同學們會是什么心情。


          微信公眾號的做法就很巧妙,它把這些規范分割成了三部分。


          第一部分是嚴禁的紅線行為,以高度概括的一行文字呈現,所有人都能看到,但是得仔細留意才能注意到。這是規范性質。



          第二部分和競品一樣,也是鏈接出來的一個單獨網頁。鏈接入口也和競品一樣,在關聯性最強的發文頁面右上角。不同的是,這一頁展示的是規則,主要以問答的形式呈現,給人感覺是有幫助的信息。這是服務性質。



          而競品的這個頁面,通常都是禁三禁四的規范,給人的感覺可能是緊張、壓抑甚至抵觸。


          第三部分是次于紅線的禁止行為,比如侵權、低俗內容等。這部分內容的管理辦法被以公告的形式分散在公告列表里。而且公告列表里內容多樣,還有很多一般的通知,所以這個公告列表也不會像競品的那一頁規范一樣,給人緊張、壓抑的感覺。性質上是中性。


          另外,這部分的入口在后臺首頁右上角,和發文模塊是分開的。所以不會違法規范的作者一般不會去公告列表里翻這些內容,也就看不到。




          微信公眾號就是這么巧妙的讓多數作者看不到“班主任”的“20 條班規”,同時還讓他們看到了“班主任”的“常見問題回答”。


          這就是微信公眾號在發文規范方面的初始服務。另外還有一個加分的細節,就是檢測疑似錯別字的功能,很貼心,雖然目前還不是很準。


          3 極致服務


          極致服務,是指讓用戶感動的服務,比如海底撈和胖東來的服務。


          這種服務,一般是由許多細節積累而來,是一種做加法的服務,而且背后往往依賴人力。


          好的交互設計,一般都是在做減法,而且純粹是界面、機器在和用戶打交道。所以極致服務難以復制到交互設計上。


          不過,一款互聯網產品,除了交互設計,還有其它方面的內容。


          B 站就是一個例子,它以不走尋常路的方式,在兩個方面做到了較為極致的服務。那就是:視頻無廣告,比較積極、歡樂的彈幕氛圍。



          結語


          以用戶利益為先,不打擾用戶,維護用戶的尊嚴,這是交互設計里的三種善意,值得我們學習。


          先服務后管理。服務作為一種善意,也能夠引來用戶的善意,最終形成良性循環。


          杜絕任何輕微惡意和管理傾向,再提供一些便利和幫助,便能做到良好的初始服務;


          在初始服務的基礎上,提供周到、高品質的交互設計,就能做到良好的家常服務;


          交互設計難以做到極致服務,但是其它方面有機會。


          最后,用劉備的一句話來結束本文。


          勿以善小而不為。


          原文地址:站酷    作者:SnowDesign


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

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

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

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

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



          中后臺沒啥可設計的?試試這樣拓展設計價值

          純純

          B類領域設計師必然會面對譬如CRM、ERP等諸多類型的中后臺類產品。大多就是做做表單設計,年底考核時想爭取漲薪證明自己,但老板要問的“設計價值”是個啥?在這些業務主導下的中后臺產品又該如何定位設計機會及價值?



          本文就以比較典型且系統化的中后臺企采SaaS服務產品為例,來聊聊在這個領域中,是如何進行機會的挖掘,探索并付諸實踐的。

          01. 業務先贏 完成體驗助力是基礎

          -

          在過往數年里,阿里Ant Design,Alibaba Fusion為代表的中臺團隊進行了大量基礎組件設計體系的積累,也沉淀了一些可直接復用的工程化解決方案。如果說有就行,的確產品經理和技術人員自己拼拼湊湊,就可以極低成本的獲得一個較為套路化,但無需設計師介入費腦的中后臺產品。



          但作為用戶工作環境中和風險、錢打交道為主,被強制使用的工具載體,在全球數字化經濟轉型推進趨勢下,越來越多的中后臺B端產品需要具備更高效,更細膩的體驗,以改善千千萬萬使用者的數字化工作方式.

          初步接觸業務,我們即發現沿用基礎通用設計組件庫,“拼組件”的方式沒辦法滿足垂直業務模塊比如供應鏈詢價、采購、財務核賬履約領域高強度信息承載密度下精細化的用戶體驗訴求。

          因此,為了增強SaaS產品及服務的不可替代性,提升售賣價值亮點以及產品續約率,我重點對業務場景下特有的行為組件、模板及方案鏈路進行抽象歸納改良設計。



          這樣做最直觀的好處就是不浪費時間重復造輪子,站在巨人的肩膀上來完善組件庫,提升設計效能,1位設計師就能通過業務場景組件,高效承接密集的產品需求。 

          另一方面,收攏特定場景下核心差異點,只聚焦最小范圍來打磨組件及流程,可敏捷實現差異化設計的最佳實踐。 

          精細化的場景多欠缺合適的線上化解法,作為你深度挖掘,充分思考下的設計方案,相對更容易獲取某些領域的設計獎項甚至專利,證明你有在設計上做出了壁壘,創造了價值。 

          除此之外,由于該敏捷的體驗設計過程是以抽象核心差異為契機,對應領域的設計師亦能更高效的構建出業務特定場景下的獨有的“Design System",在后續過程中放大設計價值。

          02. 中后臺產品 效率是關鍵

          -

          多數中后臺產品(尤其是企業級應用系統)會出現 "功能、頁面多"、“流程長”的臃腫現象。 

          受打工人身份禁錮下的實操用戶大多也是迫于工作合規要求,不得不從原本習慣的線下作業流程,轉變為在中后臺線上了解信息,以及多角色協同決策處理事務。甚至可以說有了中后臺的存在,反而增加了他們日常工作操作成本,故無論是新用戶還是老用戶,都難有意愿于中后臺完成事務處理的體驗閉環。



          為提高采購流程的效率,讓中后臺線上作業更輕松,更提升企業收益/價值。

          我們基于用戶行為能力動機,從“替ta完成”,“催ta處理”,“助ta做快”這三個維度,通過協同引導提效的方式來促進線上事務處理完成并流轉。簡單說,機器能做的就自動處理推進,不能的則及時觸達引導,力求做到中后臺事務處理過程去人工化,以及主動精準有效的引導。



          設計師在這個環節內除了結合新技術,和業務團隊共同打造一些智能化服務替代原本高重復性操作以形成新體驗外,還可以深刻研究并理解人性本質,在相關待辦或服務內容觸達上精細化設計。

          01、讓待辦任務更有效的被觸達并解決

          與業務一起分層提醒內容,及對應內容的可讀性、可視化設計;

          02、基于用戶行為動機下的推送規則設計

          不打擾用戶工作前提下,及時引導助其理解更促使用戶啟用自動化提效服務,譬如處理受阻失敗、或用戶剛完成一項任務時,引導其配置自動處理規則,提高整體效率;

          03、打造激勵機制和場景

          定期進行實操人員處理任務完成度/時長的同團隊數據分析比較及外顯方案,結合數據可視化呈現手段,在行業內外部團隊相互制約下,促使用戶自我驅動警示,保障事務推進流轉。



          最終目標即是推進業務中后臺的用戶數字化體驗從最早的幫助Q&A被動喚起自助化服務,變為主動承接服務告知可處理,半自動化分發,及自動處理,甚至社會智能化數據自驅的演變進階。



          總體來說,在中后臺產品給用戶提供更簡單、更集成的方案,大量消減操作步驟,突出真正重要的信息就是設計最大的價值。

          03. 構建數字化管控的新體驗

          -

          除一線實操用戶外,我們還要關注管理者,有時更是一號位的老板這一類關鍵角色,他們在線上各個子環節都有較為強烈的可控,可管理的訴求在,以證明其付錢購買的中后臺“在線數字化”工作方式真的能降本增效,或作為企業內部管理優化的量化指標依據。

          在企業按年續費產品服務的商業化增長目標下,讓管理者能真切意識并實際體會到數字化工作方式的價值就變得尤為重要。因此,設計的關鍵是增強管理決策者對數字化平臺服務的感知度以及滿意度。

          01、智能化決策輔助的設計

          和一線操作員側的提效類似,只不過對于管理者,我們需更多著重于“替ta完成”和“助ta做快”這兩部分去打造智能化服務的管控新體驗。

          為確保機器智能化處理邏輯更接近人的自然思維,設計師在這個環節中可主動補位,制定相應類型下數據的機器思維處理分析規則以及內容維度。



          在過往采購SaaS中后臺業務設計中,設計亦抽象了事務型進展以及綜合決策分析決策兩類數據模塊新場景,通過直觀結果呈現以及判斷要點佐證,在管理行為及流程上促進管控手段的數字化升級,幫助管理者高效獲取/查看/分析數據要點。



          02、多維度的數據關懷提醒

          有了對應的分析數據結果和要點,我們還要將數字時代下的管理數據,團隊事務整體進度、風險預判結論有效觸達管理角色,更放大其體感。



          給老板用的數據大屏/中后臺數據看板,及數字孿生可視化即是一種可以充分發揮設計表現力并擅長的領域,即便你所在的中后臺團隊沒有相應技術資源,設計依舊可以通過“電子郵件” “長圖”等通用載體,以輕量化的方式來完成價值傳遞。 

          在這個環節,設計的價值就是讓管理者讀懂數據,受惠數據驅動的決策方式。

          03、形成體驗質量監測評估體系

          以設計體驗度量量化為起點,深度關聯管理決策者關心的企業運營數據“健康度”,及商業化營收續簽強相關的“續簽意向”,來評定并監測用戶對SaaS產品服務的整體接受度及體驗滿意度。



          我們基于HEART、PULSE、UES、五度模型等已有模型,選擇業務目標和場景核心指標來調整衡量維度并推導演變,從業務、產品、技術、服務等多維視角構成適合企業采購SaaS產品的體驗度量模型,推動運營/算法/后端共建機制及產品將體驗監測工具化,以形成業務中多角色都能有效應用起來的體驗質量評估體系。



          最終,管理決策者較過往能更實時的掌握一線人員工作使用中后臺的健康度情況,有效數字化管理。

          對我們的合作伙伴業務運營團隊而言,全新的客戶續簽意向管理預測方式,可提早發現風險,更能聯合內部預警及平臺觸達運營服務有效規避客戶流失。

          而對于我們自身設計職能,通過這種度量維度方法和工具,不但能定期便攜的獲取核心指標變化作為設計價值量化憑證,體驗監測所獲得的相關結論還可以指出中后臺產品當前業務階段問題方向,結合設計目標鎖定問題范圍,定位后續設計著力點。

          中后臺領域心得技巧

          -

          上述即是企采SaaS中后臺產品中的設計實踐。我們也總結了幾個定位設計機會及價值的心得或方法。



          01、學徒式調研實操,同理映射用戶 

          具有出眾同理心的設計洞察以及解法是體驗價值的基礎。(常說要站在用戶視角做設計,但不像消費端,設計師多不是中后臺實際用戶,也很難換位思考理解用戶工作行為特征和痛點。) 

          因此,中后臺領域的設計角色迫切的需要與更多的實際用戶去交談、調研。 

          為提升該過程的質量及效率,我們嘗試在用戶定性調研訪談之前,多通過學徒式調研的方法,來熟悉其工作行為特征,定性的挖掘用戶痛點。 

          即是以單任務為維度,先請教我們的實際用戶他們是如何做的,并依此自己上手完整實操,直到確保能按時保質完成目標任務。 

          設身處地還原目標用戶情景,理解各方案的優劣勢,及如何在他人身上起作用的目的,在該環節之后再去和用戶交談,即可更高效的獲得真實的用戶洞察以及理想方案假設。



          02、用設計擅長的可視化手段,呈現體驗痛點

          天馬行空的設計創新方案總是在決策時受各種技術、資源為由被Pass,推進創新智能的體驗方案在中后臺領域是個尤為費事的過程。 

          面對這一難題,我們可以通過體現設計思維的一些工具模型調整應用,來增強表現說服力,進而建立信任以及方案推進的成功率。



          譬如設計側常用的決策工具用戶體驗地圖,在B類中后臺領域中可以將原本情緒體驗波浪線替換為效率數據來調整應用,梳理并呈現產品的全流程效率數據曲線,同理“峰終定律”來快速界定并洞察全鏈路中短板模塊,以及低效待設計優化關鍵點。

          借此數據可視化手段,呈現出來體驗關鍵問題嚴重性,亦可讓項目組各職能伙伴共情,獲得設計策略及方案的認同。

          03、和業務方向緊密結合,跟業務匹配的設計創新

          設計創新提案難免會出現兩類問題:

          首先是創新提案推不下去,甚至被說是設計自high。

          這多是因為沒有想著結合業務方向,光想著創新或新穎的方式去設計方案。

          我們擅長也希望通過酷炫的動效,創新的交互,智能化體驗的暢想及解法來表現設計手段的精深。固然,這些事情的探索嘗試或練習都有其意義價值,但作為商業設計師不能光紙上談兵,只有結合業務順勢而為,我們耗時做的方案才有可能提案成功,更推進技術還原落地,從而帶給用戶更好的用戶體驗。

          再者就是方案有結合業務,也被認可有價值了,但優先級往后走?

          這說明設計結合的點不大對,并非業務最關心的。

          中后臺產品,多和前臺核心戰略有著強邏輯關系,或有廣泛的、潛在的商業化潛力。而了解業務核心關注點,最簡單快速的方法就是找到對的人——業務一號位,并快速抄作業。

          勇敢點的可直接約業務一號位聊聊,含蓄的設計師亦可嘗試借美化一號位匯報PPT等手段,巧妙的獲取并理解業務核心目標,布局以及關鍵利益,在此基礎上再從上至下梳理了解各子業務線規劃,設計就能更好的取舍。

          原文地址:站酷    作者:阿里巴巴CBU設計


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


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

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

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




          如何合理使用大標題設計風格?

          純純

          一、什么是大標題設計風格?


          大標題導航欄是從iOS11發布后,開始在中國的UI設計師中急速流行的一種設計風格。其實這種風格最早在2016年就在硅谷盛行了起來,源自一位叫Michael Horton的設計師發表的一篇《Complexion Reduction: A New Trend In Mobile Design 》的文章,這篇文章提到的Complexion Reduction這種設計風格(下文簡稱CR)就是大標題導航欄的起源,即大、黑、粗的標題。

           

          CR這種風格有四個明顯的特征:

           

          1.刪除多余的顏色;

          2.又大、又黑、又粗的標題;

          3.簡單、可識別的圖標,也不要使用顏色(常用黑灰色);

          4.留白留白留白,更多的留白。

           

          下圖是比較典型的使用CR風格的APP(分別是愛彼迎、ENJOY、火球買手、MOO音樂),大家可以結合CR風格的4大特征感受一下:

           不知道小伙伴們有沒有發現,這幾個APP的功能會比較單一或是某一垂直領域,且視覺上都給人一種高品質,超極簡的感覺,人們會更多的關注界面中內容本身,對內容的要求也會更高。



          二、中西方的差異


          那么問題來了,為什么這種CR風格鮮少出現在中國特有的淘寶類電商APP中呢?

           

          國外的APP大都是小而精致的,一般一個APP只能做一件事,功能比較單一,而國內的淘寶類電商APP,攜程類的綜合旅游APP所包含的業務與功能都非常廣泛,在狹小的手機屏幕上展示更多的商品就顯得尤其重要,CR風格提倡的大標題大留白無疑不是在挑戰老板的底線。

           

          實際上即便使用大標題風格也不要盲目采用iOS11官方的大標題導航,其原因在于中英文的差異。

           

          英文大標題一個單詞有大小寫的變化,富有一定的層級變化,而中文如果使用iOS11給定的68px(二倍圖下)的字號,那真是大到閃瞎我的眼。中文一個詞語每一個字都是差不多的大小,沒有層級上的變化,太大的字體在整個界面中看起來會很奇怪,如下圖:



          三、合理使用大標題


          雖說iOS11那么大的標題不適合大部分的APP,但并不是說大標題風格就不適合大部分APP了,實際上目前大多數的APP依然使用了大標題的風格,不過進行了一定的改良。

          以下參考尺寸均是二倍圖下的尺寸


          1.大標題導航欄


          大標題導航欄大致有兩種樣式,一種是延用iOS11的大標題導航欄,一種是稍微改良使用的大標題導航欄。


          1)iOS11大大大標題導航欄


          iOS11的大標題導航欄標題字號約為68px、欄高192px(二倍圖),大標題對齊導航欄左邊,頁面滑動時轉換為常規的導航欄。

           

          國內使用這種大大大標題的APP比較少,標題文字實在太大,若只作為導航標題占位,會極其浪費屏幕空間。

           

          使用這種大大大標題時,導航標題一般都有一定的意義,如下圖:

          餓了么的訂單頁詳情頁使用了這種大大大標題,但是標題賦予了訂單狀態的意義,比起單純的“訂單詳情”,這樣有一定意義的標題文字則可考慮使用iOS11的大大大標題。


          2)改良大標題導航欄

          某些APP在使用大標題導航欄時,在iOS11的大標題導航欄上進行了一定的改良,最常見的就是一定程度縮小了標題的字號,如下圖:

          這三個APP的標題字號都沒有到68px,常用40px~48px的字號,陌陌與天貓是固定在頂部導航欄的,而Kepp會隨頁面上滑變為常規標題導航。

           

          一般這種固定的較大標題都會隱去導航欄的分割線,顯得導航欄更高,更有呼吸感。像是天貓的大標題導航欄使用的色塊,與下方模塊又比較近,就顯得很擁擠。



          2.Tab欄大標題

          Tab欄的文字標題切換樣式最常見的就是顏色變化,加小短線等,隨著大標題風格的流行,Tab欄的切換樣式也出現了大標題的選中樣式,選中字號通常采用40~48px(甚至更大,如蝦米音樂的72px),而非選中標題通常則是采用的28~32px,如下圖:

          使用這樣的Tab欄,能夠迅速幫助用戶辨識自己所在的位置,就差指著自己說“這兒”了。需要注意的是一個屏幕內盡量只在一級Tab使用大標題切換,與二級Tab做出區分。



          3.模塊化大標題

          大標題的風格除了應用在界面頂部導航,在模塊化標題上應用的也非常多,有些APP即便頂部導航不使用大標題,卻會在模塊化標題上使用較大的字號,如下圖:

          這種模塊化大標題常配合留白分割的界面使用(這也符合了CR風格的特征),模塊化大標題在留白分割的界面上能夠更好地幫助上下模塊做到層級區分的作用。



          4.文字變大變粗變黑

          拋開大標題不談,不知大家有沒有發現,現在越來越多的APP的內容標題、正文內容的字體也在逐漸變得更黑更粗,甚至更大,畢竟我們的手機變得越來越大了。如下圖:

          即便是擁有復雜業務的淘寶與飛豬,在某些內容標題上也變得更粗更黑,一眼看過去用戶能更容易找到自己想看的內容。


          四、劃重點


          · 大標題設計風格源自Complexion Reduction這種設計風格,CR這種風格的特征就在于顏色少、標題大黑粗、圖標通用簡單、大留白;


          · 由于中英文字體的差異,中文使用超大字號沒有英文富有變化;


          · 合理使用大標題,做一些適當的改良。常見用于導航欄、一級Tab選中標題、模塊化大標題以及內容標題。

          原文地址:站酷    作者:人類君


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

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

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

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

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



          用戶心理定律及優秀案例分析

          純純

          將普遍存在的人性用戶心理規律運用于設計,增加設計的溫度。

          近來對用戶心理比較感興趣,去看相關設計資料的時候發現相關內容重復性較高,多方搜集資料結合自己的一些分析總結出一篇補充。

          定律是鑰匙,在遇到讓我們上癮,持續付出或獲得情感的APP,多去想一想它背后洞察了哪些人性及心理,能不能為我們的后續的設計吸收。










          undefined

          undefined

          undefined

          undefined

          undefined



          原文地址:站酷    作者:唐小蔥


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

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

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

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

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


          如何選擇確定B端后臺設計風格及細節優化

          純純


          1.B端后臺分類:

          根據服務對象劃分:

          一類支持有C端前臺,支持前臺產品管理各種資源。第二類服務企業,提高企業工作效率和營收。


          根據后臺功能:

          1.監控運營:時效性強,旨在實時反饋異常情況,快速判斷下達命令,回復信息、多用于數據控制中心。

          2.數據分析:數據結果的對比和分析趨勢,時效性要求并不高,了解整體和各部分數據水平,助力決策。

          3.記錄管理類:主要用于人員、設備、資產等增刪改查,文本信息容量大,頻繁便捷的操作。

          4.系統配置:權限配置、設備功能配置,操作為主。


          2.后臺深淺兩大風格分類:

          淺色:

          適合文本信息多密集的表單列表類后臺,淺色更符合人眼白底黑字的閱讀習慣,瀏覽速度更快,信息獲取效率更高。


          深色:

          圖像信息密集的后臺適合圖片、數據可視化圖表等;深色對彩色的圖像信息襯托更強。信息獲取速度較慢,長時間可能視疲勞。




          3.作者常向產品方提供的風格參考

          較常見


          1.經典商務風(導航深、內容淺)——專業、高效、成熟、可信賴(對照深色西裝人物形象)

                優點:市面最常見的風格,普世性高,大多數用戶可快速接受,層次分明

                缺點:視覺缺乏記憶點


           2.輕量科技感(導航淺、內容淺)——簡潔、明快、輕量、年輕(對照白襯衫打領帶男性)

                優點:視覺清新明快更年輕化更輕量,對其他文本及圖形展示包容性高,就像A4白紙一樣容器存在感弱

                缺點:純白色導航+頁面層次略曖昧。


           3.藍色科技風(導航中、內容中)

                適合:適合科技屬性強的產品界面,圖像圖形展示

                缺點:對其他色彩信息有干擾,持續性長時間觀看易視覺疲勞


           4.暗黑科技風(導航深、內容深)

                優點:對色彩表現力強

                缺點:密集文本信息獲取速度會下降,持續性長時間觀看易視覺疲勞




          4.精準選擇風格時可以進一步的考慮:

          1.整體行業風格

          比如美妝和科技行業的整體設計基調就不太相同。


          2.產品想要傳達的氣質:

          理性可靠 or  簡潔輕松輕量 or 關懷普世 or 酷炫吸睛….這個可以和相關產品經理、銷售共同商討


          3.目標用戶的群體特點及喜好。

          根據目標用戶的性別、年齡層、受教育水平,審美水平考量(可能包含多種角色,選取1.2個核心角色為參考)帶入目標用戶工作場景及愛用物常用物品味,去判斷基調。

          如主要用戶群:40+男性用戶,本科以上受教育水平,使用windows電腦進行專業管理操作,審美傾向明確內斂。

          如主要用戶群:20-40歲,男女比例約6:4;大專;操作水平參差


          4.使用場景及高頻的操作。

          例如:最常使用數據分析管理,需要快速閱覽多條數據,對數據進行比對,更適合淺色風格展示表單數據。


          5.判斷獨立的平臺是否為獨立開發

          獨立開發的,可以采取更獨特設計。若平臺很大需要不同外包公司的合作屬于整合類平臺則更注重設計的包容性。



          5.如何讓后臺設計更具特色:

          1.重點色的使用

          “731配色比例”70%的面板色,30%的導航面板色,10%的強調色。(這里的用色比例可以根據內容具體再去調節只是大概比例)品牌色或重點色:強調行動關鍵點、重要信息高亮、圖形化說明等。強調色用就要用的像蛋糕上的櫻桃。起到畫龍點睛作用即可。

          2.圖標的優化

          后臺高頻出現的圖標,值得我們花時間去統一設計打磨,調整圓角粗細疏密,符合整體界面氣質。從圖標庫里拖出的圖標很多在線條粗細上是不統一的,好的設計在細節處也要動人。

          B端工具類圖標識別性第一,美觀性第二。B端導航圖標更多是在基礎造型上打磨,不需要加花里胡哨的漸變、投影,導航圖標一般在24px-16px大小,太復雜反而看不清。在區分狀態的時候可以考慮加點品牌色


          3.空狀態小插畫

          空狀態插畫是B端設計師少有能發揮自己繪畫天賦小巧思的地方。

          圖形化狀態語言,輔助用戶理解內容??梢詫a品機械蒼白的文案設計表現的更加具有溫度,具有引導性。讓乏味的工作出現一些共情小彩蛋,有趣的插圖動畫可以緩解等待的焦慮。



          4.登錄注冊頁

          純色背景卡片式:簡單大方更聚焦登錄操作

          插畫背景:場景化展示產品的功能及亮點,讓用戶更有心理預期

          幾何圖形背景:最后和品牌圖形相關,加深用戶對產品的品牌印象。

          照片背景:相關場景或產品類型,具象圖片信息更直觀


          5.圓角的大小

          不同大小的圓角傳達產品不同的氣質,大圓角親和、小圓角精致、中等圓角大眾中庸。



          6.優化信息層級

          優化信息層級,區分信息主次可以使閱讀更快,操作更快,界面更有節奏感。

          這時候你就是那個考前畫重點的老師

          判斷一個頁面里最重要的是那些信息或操作,強化它!并弱化輔助信息;

          判斷一個模塊里那些是重要信息,強化它!



          6.新人需要避免的雷點:


          1.追求炫酷的視覺效果舍棄操作效率。比如追波風滿屏花里胡哨的卡片及面板,滿屏大投影及高飽和色彩。對于B端界面來說信息噪音太多,反而干擾信息獲取效率。


          2.反常規用戶習慣的操作。尊重用戶習慣,不要為了個性化去嘗試改變,不要妄圖改變用戶的操作和認知的慣性。慣性思維大于設計思維,曾經遇到過產品因為右手操作所以要把導航放在右邊的離譜例子。


          3.數量多,動靜大的夸張的動效。B端與C端不同的地方在于希望操作者沉浸式工作,遵循非必要不打擾。之前看過一個反面例子后臺,在每一步操作后都出現大的場景動效鼓勵完成,如果作為一個長期使用的工作者,我會覺得每次完成任務都需要等待動畫完成可能只需要2-3s也很浪費我的時間。


          4.新人建議多看Antdesign和Element等成熟的組件,創新類組件樣式,最好和和開發商量是否能夠實現。


          5.在確定主要風格及2-5張主要頁面后,就應該著手基礎規范(色彩字體等,不然后面越做越亂)。


          6.一段時間一個審美,同一界面中的元素風格不統一。


          7.避免大面積使用高飽和高明度的色彩,及曖昧含糊的臨近色彩。長時間使用眼睛會累,產生不耐煩焦躁的負面情緒。



          最后推薦幾個官方組件庫:




          原文地址:站酷    作者:唐小蔥 

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

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

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

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

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


          必看的平臺設計規范

          純純

          UI 設計師必備的一項基礎能力:規范能力

          為了避免重復造輪子,反復掉入同樣的陷阱,閱讀并熟知主流平臺的設計規范,是非常有幫助的。

          本文內容主要介紹了iOS 、Android、Ant Design的相關規范,為的是不重復累贅描述同一個知識點,涉及到移動端和PC端,主要為了幫助基礎同學學習,適當地刪減了一些有難度的規范。

          設計師在設計時并不一定要嚴格遵守,但對這些規范應有所了解,并融會貫通。

          一、設計規范的價值 

          1.確保界面的統一性(界面) 

          通過設計規范的約束,保證產品的色彩使用、圖標圖形、空間、文字、頁面布局等內容保證嚴格的一致性。 

          2.技術及品牌的延續 

          規范能延續產品風格及特性,保證產品視覺及交互層面的統一,包括技術帶來的變革,增強用戶的認知性,不同程度得提升用戶體驗。

          3.協同工作提高效率(設計) 

          多人合作完成一個項目時,需要視覺規范。遵循設計規范,保證視覺統一、提高工作效率。

          4.指導搭建框架及布局(開發) 

          輔助技術層搭建框架及布局的規則更清晰明確,如按鈕、顏色、字體大小等,提高開發效率,確保應用軟件最終實現效果與視覺設計相符合。



          二、視覺規范 

          視覺設計規范是指對設計的具體技術要求,是設計工作的規則。包含了目標、功能、技術指標,以及限制條件等。

          (1)視覺規范的作用 

          ① 視覺設計規范,是量化的設計指標,具有指導性、約束性。

          視覺設計規范要確定?般可用性原則和審美常識下的避免犯錯的方法,以及一旦出現錯誤后的補救方案。規范的第一個目的是減少設計過程中出錯的次數,針對新手設計師、第三方團隊,可以很好地做到經驗傳遞,迅速了解上手。減少標注時間,提高前端開發質量。

          ② 視覺設計規范,是確定關鍵因素,要有有效性、復用性。

          獲得該設計規范針對范圍內的關鍵點,包括設計方向和設計元素,以通過項目設計的過程,達到團隊成員的更加密切的配合效果。促進多人協作,解決視覺不統?現象。

          (2)視覺常見類別 

          ① 品牌規范:塑造形象以及應用的規范。主要包含了標識的標準制圖,配色字體等。以及常用的搭配方式。

          ?個企業或者?個產品,都有相應的品牌視覺識別系統(VIS)。品牌視覺識別系統是視覺設計最好的參考基礎,既然是?種指導體系或者說是參考,那么也相應地會有品牌的規范。

          ② 平臺設計語言規范:平臺理念、遵循規范的好處、某種應用的生態。比如 Google 和 Apple 制定的規范。針對第三方的規范,主要旨在讓這些第三方的設計更兼容平臺應用。通常制定了大的方向和規則。并且會提供很多基礎的設計元素和插件。

          ③ 產品業務規范:側重在產品設計和實現層,內容清晰并且實用,標注詳盡,方便設計師們使用。更注重個性化的部分。

          三、平臺設計語言規范-Material Design 

          https://material.io/

          Material Design 規范在于統一 Google 多種平臺下的一致性,代表 Google 全新的體驗。 包含豐富的色彩、空間的層次、流暢的動效、多樣的組件。

          谷歌的想法是讓谷歌平臺上的開發者掌握這個新框架,從而讓所有應用就有統一的外觀,就像是蘋果向開發者提出的設計原則一樣。

          1.Material Design 的作用 

          從設計角度:建立共同的設計語言,將產品風格、品牌及交互形式統一起來。

          從使用角度:提高產品認知度,提升品牌延續性及產品體驗的一致性。

          2.Material Design 的特征 

          (1)環境 

          Material Design 是基于三維空間的設計語言。 包含光線、材質、陰影。在 Material 環境中,虛擬燈光照射整個場景。

          (2)屬性

          Material 有自身固定不變的外在特征和內在行為邏輯 ,理解這些固有的屬性有助于實際的設計項目。

          ? 立體性 

          ? 空間位置的唯一性 

          ? 不可穿透 

          ? 形狀可變化 

          ? 沿水平方向做變化 

          ? 不可彎曲 

          ? 能與其他材質對象合并 

          ? 分裂,再合并 

          ? 可沿任何軸上移動

          (3)高度和投影

          Material 借鑒了現實物理世界中的物質特性,并將其運用在虛擬三維空間中的 Material 元素上, 有利于幫助用戶理解信息層級,同時可以統一各應用之間的體驗。

          投影提供了元素深度和運動方向的重要視覺線索;在運動中,投影提供了元素移動方向及高度變化。

          四、平臺設計語言規范-iOS 平臺設計規范 

          https://developer.apple.com/desig

          iOS 設計規范逝之蘋果開發者官網上面的 iOS 人機交互指南(iOS Human Interface Guideline)。制作這個規范的目的是為了讓所有安裝到 iOS 系統的 App 都遵從某些特定的視覺特性、交互特性,以達到風格一致的使用體驗。另一層面,也是便于讓設計人員和開發人員能夠更好地理解 iOS 系統,更合理的運用系統提供的功能和接口,更高效地制作出 App。


          1.iOS 平臺設計規范的三大基本設計主題 

          (1)清晰 (Clarity)

          在整個 iOS 系統中,每一種尺寸下的文本信息都應該是易讀的,圖標應該是精確易懂的,每一個裝飾應該是精巧適當的,而且更加需要注重功能驅動設計的原則。利用留白、色彩、字體、圖像和界面元素巧妙的突出重要內容并傳達其不同的交互性。

          (2)遵從(Deference)

          在簡潔美觀的界面中清晰流暢的動畫效果可以幫助用戶更容易理解內容并與之進行交互,而不會對用戶的操作產生干擾。內容全屏顯示時,半透明或者模糊處理的方式可以提示用戶更多的內容。減少使用邊框,漸變及陰影可以使界面輕 量化,突出顯示內容(內容優先)。

          (3)深度(Depth)

          不同的視覺層次和逼真生動的動畫效果 可以表達界面更深層次的內容,賦予了界面活力,使用戶對界面內容更容易理解。易于發現并易于觸摸的元素可以提升用戶體驗的愉悅感,用戶在操作功能時不至于迷失。當用戶在瀏覽內容時,流暢的轉場效果提供了一種縱深感。

          2.iOS 平臺的設計原則 

          為了最大限度地提高影響力和覆蓋面,在應用設計規范時應牢記以下原則:

          (1)審美完整(Aesthetic Integrity)

          審美完整性體現了 App 的外觀和行為與其功能的整合程度。例如,一個幫助用戶執行嚴肅任務的 App 可以通過微妙、不顯眼的圖形、標準控件和可預測的行為來保持他們的專注。

          另一方面,沉浸式的 App,比如游戲 App等,就可以提供吸引人的外觀,傳遞樂趣和刺激感,同時鼓勵發現。

          (2)一致性(Consistency)

          系統提供的界面元素、眾所周知的圖標、標準的文本樣式和統一的術語來實現熟悉的標準和范例可以使得一個 App 的設計符合一致性。

          (3)易用性(Direct Manipulation)

          易用性指的是用戶可以理解屏幕的內容,用手勢、觸動屏幕等動作直接操作,并且,用戶通過直接操縱,可以看到他們的行動的直接的、可見的結果。

          (4)反饋(Feedback)

          反饋指對用戶的行動進行了確認,并且通過顯示行動結果以使用戶了解情況。iOS 系統的 App 要為用戶的每一項操作提供可感知的反饋。如:輕觸時會突出顯示交互元素;進度指示器會傳達長時間運行的項目的狀態;動畫和音效有助于闡明操作的結果。

          (5)隱喻(Metaphors)

          當一個 App 中的虛擬元素以及動作都是用戶對熟悉事物的隱喻的時候(包括現實世界和數字世界),用戶會學習的更快。比如,用戶移動視圖來查看更多內容;拖拽內容;切換開關、移動滑塊并且直接滾動來選取值;甚至可以像翻書或雜志一樣輕快的翻頁。

          (6)用戶操控(User Control)

          在整個 iOS 中,用戶是掌控者,而不是 App,App可以建議一個行動方案或者警示危險后果,但 App 不能替用戶做決策。

          好的 App 可以在用戶授權和避免不必要的結果之間找到正確的平衡。

          App 可以通過交互元素,確認、取消的提醒以使得用戶覺得自己在控制。

          五、平臺設計語言規范-Ant Design平臺設計規范 

          https://ant.design/index-cn

          Ant Design服務于企業級產品的設計體系,常用于PC端設計規范,基于「自然」、「確定性」、「意義感」、「生長性」四大設計價值觀,通過模塊化解決方案,降低冗余的生產成本,讓設計者專注于更好的用戶體驗。

          1.Ant Design平臺的設計原則 

          (1)親密性

          如果信息之間關聯性越高,它們之間的距離就應該越接近,也越像一個視覺單元;反之,則它們的距離就應該越遠,也越像多個視覺單元。親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層次一目了然。

          (2)對齊

          正如「格式塔學派」中的連續律(Law of Continuity)所描述的,在知覺過程中人們往往傾向于使知覺對象的直線繼續成為直線,使曲線繼續成為曲線。在界面設計中,將元素進行對齊,既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。

          (3)對比

          對比是增加視覺效果最有效方法之一,同時也能在不同元素之間建立一種有組織的層次結構,讓用戶快速識別關鍵信息。

          (4)重復

          相同的元素在整個界面中不斷重復,不僅可以有效降低用戶的學習成本,也可以幫助用戶識別出這些元素之間的關聯性。重復元素可以是一條粗線、一種線框,某種相同的顏色、設計要素、設計風格,某種格式、空間關系等。

          (5)直接了當

          正如 Alan Cooper 所言:「需要在哪里輸出,就要允許在哪里輸入」。這就是直接操作的原理。

          eg:不要為了編輯內容而打開另一個頁面,應該直接在上下文中實現編輯。

          (6)足不出戶

          能在這個頁面解決的問題,就不要去其它頁面解決,因為任何頁面刷新和跳轉都會引起變化盲視(Change Blindness),導致用戶心流(Flow)被打斷。頻繁的頁面刷新和跳轉,就像在看戲時,演員說完一行臺詞就安排一次謝幕一樣。

          (7)簡化交互

          根據費茨法則(Fitts's Law)所描述的,如果用戶鼠標移動距離越少、對象相對目標越大,那么用戶越容易操作。通過運用上下文工具(即:放在內容中的操作工具),使內容和操作融合,從而簡化交互。

          (8)提供邀請

          很多富交互模式(eg:「拖放」、「行內編輯」、「上下文工具」)都有一個共同問題,就是缺少易發現性。所以「提供邀請」是成功完成人機交互的關鍵所在。

          邀請就是引導用戶進入下一個交互層次的提醒和暗示,通常包括意符(eg:實時的提示信息)和可供性,以表明在下一個界面可以做什么。當可供性中可感知的部分(Perceived Affordance)表現為意符時,人機交互的過程往往更加自然、順暢。

          (9)巧用過渡

          人腦灰質(Gray Matter)會對動態的事物(eg:移動、形變、色變等)保持敏感。在界面中,適當的加入一些過渡效果,能讓界面保持生動,同時也能增強用戶和界面的溝通。

          • Adding: 新加入的信息元素應被告知如何使用,從頁面轉變的信息元素需被重新識別。
          • Receding: 與當前頁無關的信息元素應采用適當方式移除。
          • Normal: 指那些從轉場開始到結束都沒有發生變化的信息元素。

          (10)即時反映

          「提供邀請」的強大體現在 交互之前 給出反饋,解決易發現性問題;「巧用過渡」的有用體現在它能夠在 交互期間 為用戶提供視覺反饋;「即時反應」的重要性體現在 交互之后 立即給出反饋。

          就像「牛頓第三定律」所描述作用力和反作用一樣,用戶進行了操作或者內部數據發生了變化,系統就應該立即有一個對應的反饋,同時輸入量級越大、重要性越高,那么反饋量級越大、重要性越高。

          雖然反饋太多(準確的說,錯誤的反饋太多)是一個問題,但是反饋太少甚至沒有反饋的系統,則讓人感覺遲鈍和笨拙,用戶體驗更差。

          寫在最后 

          當然,這并不代表了解這些就能做出優秀的設計方案了,英文水平比較好的同學建議直接讀原文,直接從 Material Design 和 iOS 的官網進行規范學習,效果更佳。當然如果英文水平有限,網上也有很多譯版方便大家閱讀。

          而關于Ant Design的設計規范,可以去官網查閱更多的詳細內容,但PC端的設計規范平臺還有很多,字節、騰訊等設計官網都有。

          記得對于規范不需要死記硬背,練多了自然能夠記住。

          作者:知群

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

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

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

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

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





          你一定要知道的色彩知識

          純純

          好的配色不但能傳達出鮮明的產品主題調性,并且能為用戶的視覺行為產生導作用,構成良好的用戶體驗。

          對于UI設計師來說,不但要考慮顏色在給予用戶的感受上的作用,同樣應當考慮其實用性,避免重形式而輕內容的問題發生。

          所以本文的內容是基于色彩的基礎知識,為大家介紹 UI 設計師常用的配色方案、配色流程,當然也包括其他視覺設計工作者在工作中要用到的基礎色彩常識。






          一、色彩常識 


          顏色或色彩是通過“眼、腦和我們的生活經驗”所產生的?種對“光”的視覺效應。但是人對顏色的感覺不僅僅由“光”的物理性質所決定,還包含著“心理”等許多因素,比如人類對顏色的感覺往往受到周圍顏色的影響。有時人們也將物質產生不同顏色的物理特性直接稱為顏色。



          顏色的應用在 UI 設計師的工作中是非常關鍵的一環。

          1.顏色的三要素 

          (1)色相 

          是指色彩的相貌,色相被用來區分顏色,根據光的不同波長,色彩具有紅色、黃色或綠色等性質,這被稱之為色相。

          (2)明度 

          是色彩從亮到暗的明暗程度,黑色的絕對明度被定義為 0 (理想黑),而白色的絕對明度被定義為 100 (理想白),其他系列灰色則介于兩者之間。

          (3)純度 

          純度通常是指色彩的鮮艷度。從科學的角度看,一種顏色的鮮艷度取決于這一色相發射光的單一程度。色彩的純度強弱,是指色相感覺明確或含糊、鮮艷或混濁的程度。








          2. 色彩模式 

          (1)HSB :在 HSB 模式中,H(Hues)表示色相,S(Saturation)表示飽和度,B(Brightness)表示亮度。

          (2)RGB :三原色紅、綠、藍疊加最終為白色(加色模式)。常用于光源光情況下,例如顯示屏幕。

          (3)CMYK :三基色洋紅、黃、青疊加最終為黑色(減色模式)。常用于反射光情況下,例如印刷。

          (4)LAB :LAB 色彩模型是由亮度(L)和有關色彩的 A,B 三個要素組成。L 表示亮度(Luminosity),A 表示從洋紅色至綠色的范圍,B表示從黃色至藍色的范圍。








          3. 色彩心理作用 

          色彩心理作用是指色彩作用與人的情感所產生的心理感受與綜合性生理感覺作用。它影響著人們的記憶、感知、聯想和情感,刺激著視覺,在設計中有著不可忽視的作用。色彩的直接心理作用對設計有著重大的影響,關系到對用戶心理的把握。

          色彩心理作用包括色彩的直接心理效應間接心理效應。

          (1)直接心理 

          色彩的直接心理效應是色彩本身的屬性即色相、明度、純度等感官印象造成的心理感受。它包括很多不同的心理效應,一般可分為 9 類,即色彩的興奮感和沉靜感、色彩的冷暖感、色彩的輕重感、色彩的華麗感和樸素感、色彩的明快和陰郁感、色彩的軟硬感、色彩的明暗感和色彩的空間感。







          (2)間接心理 

          色彩的間接心理效應是由色彩的直觀感受反映到大腦所產生的聯想效果。在設計中常常利用色彩間接心理效應來傳達廣告信息。

          4. 色彩象征 & 聯想 




          色彩象征

          1)灰?:正式、重?、成熟

          2)棕?:保守、親切、穩定

          3)粉?:?性、天真、?春

          4)??:注意、提醒、快樂

          5)紫?:奢華、浪漫、創意

          是一種充滿神秘的顏色,在自然界中較少見到,所以被引申為象征高貴的色彩。

          在UI設計中的應用場景為紫+粉常用于女性化的產品調性。

          6)??:新鮮、清潔、健康

          白色常常被認為是無色”即不是色彩。

          在UI設計中的應用場景,常用于背景色,緩和各種顏色的沖突,以襯托其他色彩,提高畫面明度,提高文字可讀性。




          圖源-dribbble

          7)??:正式、權?、?練

          是一種充滿質感的顏色,它是所有色彩中最有力量的,能很快吸引用戶的注意力。

          在UI中的應用場景,常和其他色彩百搭,比如黑色+金色,黑色+紅色等等,以及現在UI設計中的暗黑模式。



          圖源-dribbble

          8)藍?:信任、舒適、放松

          純凈的藍色通常讓人聯想到海洋和天空,讓人的內心感到平和,有助于人的頭腦變得冷靜,減少工作中的煩躁和沖動。

          在UI設計中應用場景,常用于工具、商務、科技類等產品,B端設計也經常運用。





          圖源-dribbble

          9)綠?:??、?然、成功

          綠色是大自然中最常見的顏色,代表著健康、生命、青春、寧靜、自然、和平、安全、舒適,是一種充滿希望的顏色。

          在設計中的應用場景,健康、醫療、運動及少兒類產品使用較多,一般在軟件中表示安全、成功。





          圖源-dribbble

          10)橙?:信?、能量、樂觀

          它烘托出的活躍氣氛沒有危險的感覺,反而是一種友好。

          在UI設計中應用場景,電商、金融以及服務類的產品使用較多,比如淘寶。


          圖源-dribbble

          11)紅?:危險、重要、激情

          最醒目和強勢的顏色,甚至能引起一些生理反應,例如心跳呼吸加快等。

          在UI設計中應用場景,紅色常用于電商、金融、服務等行業。紅色也最能烘托氣氛,在中國傳統節日里都使用熱鬧的紅色來裝飾,比如新年春節階段。同時紅色也代表了警示、告誡,所以在界面設計中常用紅色的文字和按鈕來警示用戶慎重操作。





          圖源-dribbble

          5.UI中的色彩


          Ul配色一般包含主色和輔助色、強調色、中性色。

          主色通常與品牌色一致,輔助色一般選擇與主色色調一致且能拉開層次的顏色,強調色選擇與主色相對立的互補色。

          中性色主要用于界面中的線條和背景


          圖源-dribbble

          二、配色方法 

          每?種色彩都有其自身的特質,而這?特性的發揮,還需要依賴于色彩在整個配色時所處的位置、面積等,即色彩與其他色彩所形成的秩序。

          1. 主色&輔助色配色 

          顏色同樣有主體,和輔助。確定主體色系,有助于頁面整體基調的把控。在實際的操作過程中,顏色要適量,通常2-3種就可以了。多了往往較亂(并非絕對)。

          2. 色環配色方法 

          單色系配色法:同?個色系內根據顏色的明度和純度不同去做區分,形成層級關系、對比關

          系的配色方法。例如:深藍、天藍、淺藍這樣的層級變化。

          鄰近色配色法:相鄰的色系進行搭配。例如:黃色、橙色、紅色。

          對比色配色法:對比的色系進行搭配。例如:黃色、紫色。




          3.App 配色 

          一套 App 配色基本由背景色、主題色、輔助色、點睛色 4 種色調組成。

          • 背景色:分為淺色基地(白基),深色基地(黑基),彩色基地(灰基)。
          • 主題色:除了基地背景色外占最多體積的色調組成,主色調也可由幾個顏色混合的漸變色組成。
          • 輔助色:輔助主色,使畫面細節更豐富,輔助色也可由呼應主色調內容圖片輔助。
          • 點睛色:引導閱讀,裝飾頁面,讓頁面的元素信息層級井然有序。




          三、配色工具 

          flatuicolors https://flatuicolors.com

          提供多款扁平?彩配??案,可以根據 UI 設計的需要選擇使?。

          Paletton http://paletton.com

          是?個在線的?環配??具,我們可以根據需要選擇單?、相近?、對??等規則來查看配?,也可以實時查看其在??中的搭配效果。

          uigradientshttps://uigradients.com/

          UIgradients 以分享美麗漸變?彩為主的分享站,??接近上百種漸變配??案,設計師可根據???格來選擇搭配,此外我們還能直接獲得對應漸變配?的CSS代碼。

          webgradientshttps://webgradients.com/

          富有超多好看漸變漸變配?的?站,只需要復制?彩編號填充漸變,或者直接下載PSD,Sketch,圖?,CSS代碼。

          CoolHuehttps://webkul.github.io/coolhue/

          富有超多好看漸變配?的?站,可安裝Sketch 插件,或者直接下載圖?和CSS代碼。

          中國色網站http://zhongguose.com/

          只有中國的顏色, 才能這般,美得不可方物

          Adobe Color【工具】https://color.adobe.com/zh/create/color-wheel

          Adobe色輪配色工具,可以選擇色彩模式與調和規則

          ColorSpacehttps://mycolor.space/

          功能強大的漸變色在線生成器,支持單色、雙色,甚至三色漸變。

          寫在最后 

          色彩是設計中的重要組成部分,不同的色彩傳遞不同的情感和態度給用戶,這也是UI設計規范中需要注意的部分,即做到色彩統一、色彩平衡。

          作者:知群

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

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

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

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

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




          如何設計更好的圖標?

          純純

          如何在你的產品中設計和使用圖標?怎樣給品牌帶來獨特的感覺?我的以下幾點建議建議可以來幫助你設計更棒的圖標。

           

          前言

          圖標是用戶界面中重要的組成部分之一。它是一種表示命令、內容并揭示功能背后含義的視覺語言。

          你設計的圖標應該可以被用戶立即理解和識別。

          如何在你的產品中設計和使用圖標?怎樣給品牌帶來獨特的感覺?我的以下幾點建議建議可以來幫助你設計更棒的圖標。

           

          技巧1 -設置網格

          你永遠不會創建單獨一個的圖標,因為圖標總是一套的。為了讓你的圖標具備統一性,你需要一個網格。

          定義安全區域并設置邊框。使用生成的網格作為模板,以固化所有圖標的比例和大小。

           

           


          技巧2 -保持一致

          在設計一組圖標時,使用相同的線寬、角半徑和填充樣式。這將確保你的圖標看起來品牌統一和更容易識別。

          例如:線寬 - 2px,角半徑 - 3px;

           

           


          Icon set from Super Basic Icons.

           

          技巧3:表達清楚

          在圖標設計中,少即是多。使用清晰的隱喻和點到為止的細節,使每個圖標易于識別和理解。



          技巧4 -使用相等的間距

          在你的圖標元素之間使用相等的間距,使你的一整套圖標看起來和諧。

          你可以通過按住 Figma、Sketch 或 XD 中的 ALT 鍵來計算向量線之間的距離。

           

           

          技巧5 -視覺矯正

          基于視覺中心對齊圖標元素,平衡視覺重量。


          技巧6 -填充空間

          旋轉局促的圖標,充分利用空間來獲得更好的可讀性。

           

          技巧7 -組合樣式

          使用填充和輪廓樣式來描述界面狀態,幫助用戶找到正確的圖標或按鈕。


          技巧8-便捷的工具

          工具

          • Icons8.com

          • iconfinder.com

          • flaticon.com

          • thenouproject.com

           

          資源


          提升網站設計的10個小技巧

          純純

          每個人都是從初學者開始他的設計之旅的,你的審美眼光也要像其他事物一樣經過訓練。看 Dribbble 的設計可能是非常有幫助的,但有時候你只是欣賞設計,卻不明白為什么。

           

          沒有靈感、沒有優質的設計素材、不知道要設計什么,所有這些原因都可能會拖慢你的速度,讓你感到沮喪。所以現在我將和你分享 10 個極其簡單的設計技巧,幫你改善你的設計作品,而且不需要額外學習新的技能哦。

           

          請記住,我提供的不是必修遵守的規則,而是大多數時候都有效的技巧。

           

          1)把你的設計作品去色。

          如果你沒有好的想法或優質的設計素材,那么你可以把你的作品去色。你可以通過正確的構圖獲得野獸派的設計。這么做有助于你理解平衡、留白,以及如何使用文字和幾何圖形。

           

          讓我們來看一個案例:


           


          2)用“平衡方案”測試你的畫面。

          我自己發明了一套測試畫面的方法:用簡單的幾何圖形代表畫面中內容,然后通過比較頁面中色塊的面積來確定頁面是否平衡。當你在自己的作品中使用這個方法時,會得到下圖這樣的效果。

           

           

          通常你需要通過視覺進行判斷,但這里我們可以做一些簡單的計算幫助理解:

           

          左邊區域的黑色矩形加起來約為:

          (236 * 138 ) + (934 * 132 ) + ( 313 * 69 ) + (674 * 44) = 207109 PX

           

          而右邊的大長方形數約為:

          446×446=198916PX

           

          他們只是相差了一點點 3.9558%。

           

          注意:圓形比長方形小,但由于相當銳利和細致,使它更吸引人的注意。

          我在設計之前沒有計算過。經過多年的練習,這只是成為自動的,因為你的眼睛會感覺到錯誤的平衡。

           

          3)用背景來呈現設計。

          我之前帶來的例子是在灰色背景上呈現的,但你可以嘗試不同的東西。這有助于為你的設計創造一些景深。但要注意,在一個真正的網站中,你不會有那么多額外的空間,所以這只是一個展示技巧!


           

          4)使用推薦的字體大小。

          不要再整天浪費時間去實驗字體大小。一般情況下以下字體大小是合適的:段落使用 14-18 pt 左右,副標題使用 24-36 pt,標題使用 96-144 pt 左右。Figma 的默認大小對于排版來說是相當不錯的。雖然它們看起來會很小,但這是正常的。

           

          有些字體相對于其他字體會偏大或者偏小,所以你應該以標準字體為基礎。比如 Roboto:如果字體大小接近 14-18 pt 的 Roboto,那就非常適合用于段落。

           

           

          5)擁抱 Z 軸。

          如果你有一些具有透明區域的圖片,你可以利用它們來創建一些分層。

           

          在網頁開發中,CSS 代碼有一個 Z-index 的參數,可以用來把圖像帶到其他項目的后面或前面,給人一種立體的錯覺。

           

          讓我們看看我的一個簡單的設計,其中就利用了這種技巧。

           

           

          6)開始使用柔和的顏色。

          鮮艷的色彩雖然美好,但往往會導致畫面過于刺激?,F在非常流行在設計中使用更加柔和的色彩,你可以在下圖拾色器中紅色標記區域內選取更柔和的顏色。

           


           


          7)讓畫面有呼吸感。

          在我看來,多一些留白要比沒有留白更好。雜亂無章的設計就通常都很糟。你可以通過以下方式獲得呼吸感。

           

          1、保持大量的背景可見。

          2、用間距避免文字墻效果。

          3、使用不會吸引太多注意力的圖片。

          4、精煉你的文字。

           

           

           

          8)在設計中使用噪點。

          通常當我們想到設計的時候,我們會想到干凈、流暢、清晰等概念。但完美就存在于缺陷之中。

           

          在你的設計中,當你想給自己的網站一個優雅或藝術的外觀,噪點是一個強有力的朋友。

           

          此外,應用微妙的噪點讓你的構圖看起來像電影一樣,這對視頻和動態網站來說效果非常好。

           

          你可以通過使用 Photoshop,在白色背景上創建一個 2-4 K 的高斯模糊,然后將其應用在你的畫板上,從而獲得一些噪點紋理。

           

           

          9)開始尋找更好的字體。

          我們電腦上預裝的字體通常都不是很好的選擇。要想找到更好的字體,可以開始上網沖浪或看 youtube 視頻,了解精彩的字體和字庫。

           

          但要注意:很多字體都不是免費的,在沒有授權的情況下使用它們可能會給你帶來麻煩。不過不用擔心,大多數的字體都有免費版本!

           

          雖然有大量不同的字體和風格,但一般來說,我把它們分為三大類。

           

          1、古典字體

          2、現代字體

          3、正文字體

           

          通常情況下,前兩種也可以用在正文中,只是字體的設計者希望你把它們當作標題來使用。

           

          古典字體包括Abril Fatface、Playfair Display、Volux、Chalga和許多其他字體。

          現代字體包括Metropolis, ITC Avant Garde, Redwing, Takota, Gotham....

           

           

          10)利用幾何圖形。

          這可能是最難利用的技巧,但如果應用得當,畫面會非常有沖擊力。

           

          利用幾何圖形有助于強化布局中的概念和秩序,甚至不需要使用額外的圖像。找到合適的幾何圖形是很難的。目前我還是不能很好地掌握它。

           

          但是有一個訣竅是,把你的文案中的字母、數字和標題當作幾何圖形:把它們做成巨大但微妙的形狀,或者用一些特定的字母作為形狀(字母 A 就很好用)。

           



          作者:知群

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

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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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