<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設計技巧指南

          博博

          看了一位著名設計大師Aaron Gustafson關于UI設計的演講報告,討論和剖析了幾個自適應界面,并演示了他們如何智能地變形以滿足用戶的需求。這里我有一些心得體會分享給大家。

          ef3d58bbefb9a801219c775296f4.jpg

          看了一位著名設計大師Aaron Gustafson關于UI設計的演講報告,討論和剖析了幾個自適應界面,并演示了他們如何智能地變形以滿足用戶的需求。這里我有一些心得體會分享給大家。

          597858bbefeda801219c7779053e.jpg

          當我開始我的職業生涯,我還是一個簡單的網頁設計師。我在網頁設計工作了一年,從小型商業網站開始,最終轉移到更大的客戶。我發現對它并不感興趣。我對分頁模式,用戶與表單交互的方式,以及感覺到的性能,比網頁的視覺設計更感興趣。我發現我愛上了交互,體驗各種的性能。


          當我看科幻電影時,我會看看界面。當我玩視頻游戲時,我會觀察菜單的布局方式。如果任何這些特質聽起來很熟悉,你也可能有一顆UI設計師的心臟。


          于是我退出我的之前的設計公司,開始了我自己感興趣的項目與目標。在我的LinkedIn頁面上,我試圖總結我的新職業目標:創作出不僅具有視覺,交互,體驗,還應更加智能,更加方便的大膽構想。自從我愛上了我現在這份工作以來已經有三年了,我并不是把它當作工作,而是把它當作我興趣慢慢去培養,所以我的旅程并沒有停止。我目前在一家創業公司,這里有我們共同的夢想與信念,我們想把東西做好,做全面,希望廣大用戶會喜歡,我每天逼著自己去思考,去學習,去看一些書籍資料,但是很多時候事與愿違!

          39d658bbf015a801219c77ae979e.jpg

          在這篇文章中,我主要想描述一個UI設計師是什么樣子:

          • 這些工作是什么構成的?

          • 哪里是最好的學習資源?

          • 你如何在你的技藝得上展現更好?


          UI設計的工作


          我會將用戶界面設計的工作分為四類。與客戶溝通,研究,設計和原型,并與開發人員溝通。下面讓我們更詳細的去接觸一下怎么去工作。

          645458bbf041a801219c7709c910.jpg

          溝通


          客戶溝通是關于理解客戶的問題。目標是掌握客戶的業務。項目的開始通常包括很多的談話。在工作開始時,不要太多地去了解客戶的想法- 你可以設想可能的設計解決方案時,以全新的方式展現給她們看,然后接受需求,進行分析。


          要成為一個好的UI設計師,你需要能夠最終考慮你的客戶的意愿。例如,您的客戶可能在航空,為他們工作最終將使你對這個行業有很多認知。所以,你會感受到:不能明智的去選擇你的工作行業,也就不會成為這行業的專家。我們需要對自己有足夠的認知。


          在項目期間,溝通不會停止。作為設計師,你將不斷地展示你的工作。產品的誕生需要有火花的碰撞,所以我們迭代好,不斷的進行溝通與討論。


          研究


          與客戶溝通,你會做很多研究。這可能包括實地研究,與客戶的研討會,分析競爭或定義一個策略 - 基本上,只是幫助你理解手頭的問題。


          研究是什么?研究可以告訴你的設計選擇。這是你讀過的文章,或者蘋果剛剛發布的新東西。當你解釋為什么做出一個特定的設計選擇時,你的研究會幫助你。


          研究可以非常廣泛。我經常測試新的設備用于研究目的; 或注冊新的網絡應用程序以研究其用戶界面。


          設計和原型


          作為設計師,你可能會花大部分時間做設計調整工作。UI設計項目可以以多種方式前進,從素描,詳細設計到編碼。

          bff458bbf070a801219c7766d8d1.jpg

          您使用的方法在很大程度上取決于項目的類型。你在設計什么?這是一個網站,還是應用程序,或者你寧愿稱它為一個應用程序嗎?它使用本地技術嗎?是重新設計還是從頭開始?


          在我們公司沒有固定的過程,但大多數項目遵循相同的粗略順序:他們從草圖和線框開始,繼續詳細的視覺和交互設計,并以一個原型結束。


          作為設計師,我們花費了大量的時間來思考我們的工具。雖然強大的工具很重要,但它們不是最重要的事情。能夠使用Adobe Creative Suite和像Sketch這樣的應用程序是相當于能夠使用鉛筆繪畫或刷子來繪畫。


          話雖如此,對工具的濃厚興趣是一件好事。我也喜歡嘗試新的設計工具,可以幫助我更有效率的完成工作。我最喜歡的矢量編輯工具是Illustrator,但我的大部分視覺設計工作是在這些天在PS上完成的。其他團隊成員已經切換到較新的工具,如Sketch,Affinity Designer,這些工具我們都需要了解,找到適合自己的就行。


          工具是一個非常個人的選擇。只要我們能輕松地一起工作,每個人都可以自由選擇自己。為了使與客戶的討論,我們的設計更簡單,我們使用Axure制作原型。對于更高級的原型,我們使用HTML和CSS。你需要的工具都取決于你想要做的工作。


          開發者溝通


          溝通設計有多種形式:詳細規格,提供資產,一起審查設計。在每個實例中提供的意義很大程度上取決于項目是本機還是Web應用程序。

          5c7e58bbf0c4a801219c77607b77.jpg

          傳統的方法是在屏幕設計旁邊交付資源。屏幕設計可用于查看設計整體看起來是什么樣子,而資產是即用型PNG和圖標的SVG,因此開發人員不必處理圖形編輯器。


          在我們公司,我們是提供更多的支持者。我們使用組件樣式指南來幫助保持我們設計的一致性。當我們處理一個web項目時,我們提供了詳細的HTML和CSS集合,逐條記錄,準備實施。我相信在軟件開發的每個階段都有設計眼光是實現我創建一流級軟件目標的唯一途徑。


          Web與本機應用程序


          然而,這些指南傾向于針對營銷網站進行調整,并且其中的內容并不總是導致良好的用戶界面決策。字體傾向于出于營銷原因而選擇,而不是為了易于理解。顏色可以是粗體和醒目的,它可以在廣告活動中使用,但不會在您日常使用的應用中使用。這些指南必須解釋。

          753d58bbf0f6a801219c77956d8b.jpg

          有幾個UI設計的網絡指南。你可以認為網絡是不同風格的熔爐。如果你做任何感覺更像一個應用程序而不是一個網站,你需要知道廣泛使用的框架如Bootstrap和ZURB基金會。框架先打好,再開始確定事情應該如何去做,因為你不想重復做某一件事。


          我比較喜歡使用Bootstrap。它為常見的UI元素(如按鈕,數據表和模態)提供了合理的默認大小。


          在網頁設計中,您受網絡技術能力的限制。它曾經是很難實現簡單的視覺華麗像網站上的圓角。現在很多構想都可以做了 - 你現在可以自由繪制大量的陰影,過渡,動畫甚至3D的用戶界面。


          作為設計師,在瀏覽器中控制流程和設計是更加現實的。我還沒有看到許多UI設計師接管本地應用程序的UI編程,但是設計師做一個網絡應用程序的HTML和CSS是一個常見的事情。如果你可以編寫你自己的設計,你將有一項專業獨特的技能在你的同行,也會增加你許多優勢。但是對我來說,這也是唯一的方式,真正了解網絡的工作原理。所以作為一名設計師,還是需要懂代碼的。

          c63e58bbf121a801219c770c4a6e.jpg

          Web約束


          您很快就會發現,并非所有的瀏覽器都支持您學習的所有酷技巧,這是網頁設計的現實。這是很好的遵循著名的原則,如漸進增強,你盡可能加載增強內容,但也想想如何內容降級。


          最近,“切割芥末”已經變得流行。在BBC的網絡團隊的支持下,這包括區分“好”和“壞”瀏覽器,并為“壞”瀏覽器提供有限的體驗。但是,它真的只適用于內容網站。


          當涉及到類似應用程序的體驗,許多人只限于支持一些領先的瀏覽器,使開發更容易??杀氖?,這讓我們回到1996年的情況,你需要一個特定的瀏覽器來查看內容。

          911358bbf17ca801219c779a41ff.jpg


          改善你的技能


          那么,你如何跟上快速移動的網絡行業的最新發展,并提高你的技能?讓我們看看幾種不同的方法提高你的技能...

          dbda58bbf1a0a801219c779130bc.jpg

          平臺知識


          設計師的主要部分是平臺知識。你應該知道各種操作系統,以及如何使用它們。作為設計師,我們傾向于使用Mac,但是很容易忘記,大多數人使用Windows框來完成他們的工作。


          我覺得你只有真正理解的東西,如果你自己使用它。我喜歡使用我的Mac設計,但花費大量的時間趕上各種其他平臺的演變。我有幾個副本的Windows安裝在我的Mac上作為虛擬機。我一直在忙于使用Microsoft的Insider程序測試Windows 10的新構建,以檢查UI中的各種更改。


          我也經常購買新硬件來測試它是如何工作的。我買了一個蘋果手表只是為了測試的平臺。然后我賣了它,因為我覺得它并不是必要的。


          此外,web可以被視為其自己的操作系統。它不斷發展,每周都會向每個瀏覽器供應商添加新功能。非常值得了解瀏覽器的技術方面,特別是關于CSS和圖形能力。你需要知道SVG和WebGL是什么,以及如何使用Web動畫API。


          每個平臺隨著時間演變,作為一個用戶界面設計師,它是你的任務,保持最新。畢竟,無論你在設計什么,都不是孤立生活,而是一個更大的軟件生態系統的一部分。

          b04f58bbf1c8a801219c77bbdc11.jpg

          回到基本


          我們今天所處的困境與我們在20年前所掙扎的情況沒有什么不同。書中有很多好的建議。嘗試防御設計的網頁由Jason Fried和馬修Linderman和不要讓我認為通過史蒂夫·克魯格的初學者。


          如果你不知道概念,如模態和可承受性,你需要讀。你應該能夠解釋Fitts的定律是什么。格式塔的鄰近法?這是UI設計的面包和黃油。


          受游戲和電影的啟發


          作為UI設計師,我利用其他靈感來源來完成我的工作。我在游戲中找到很多靈感。一些游戲非常復雜,UI設計人員不得不解決與UI設計師在商業項目上工作相同的復雜界面問題。

          41a258bbf1eea801219c77d094ef.jpg

          游戲也可以表示趨勢。在Colin McRae Rally的菜單中發現的極簡主義讓我想起了iOS7的方向。在某種程度上,現在時尚的UI動畫設計出現在幾年和幾年前的游戲中。從skeuomorphism到裸,功能界面和“平面設計”的轉變在游戲中也很明顯。比較2006年的湮滅與2011年的天際。這兩個游戲都是同一系列的RPG,但差異是驚人的。


          Marvel電影中的未來派界面如鋼鐵俠也是我的靈感。他們不是完全可用的例子,但他們確實讓我更多地關注計算作為一個整體。我們想要一個未來的屏幕,或者我們想讓屏幕消失?這可能是一個很好的問題,在一個酒吧的設計師。

            • 文章來源:站酷   作者:布力吥力

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

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

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



          Design System 界面設計原則-視覺篇

          博博

          有正確的設計觀作判斷好壞的標準,并結合行之有效的設計原則作指引,才能制定出最優的設計方案。



          前言


          近年來,「設計規范」逐漸被「設計體系」或「設計語言」的概念重塑?;谝惶准軜媷乐敗⒁巹t統一的體系框架,產品表現層面的設計工作可以逐漸實現模塊化運作,從而讓視覺設計工作變得更加高效。


          「Design System 系列」將會從設計觀、設計原則、設計形式三個方向入手,由深到淺、由整到分地演繹設計體系對整個產品迭代過程的價值和意義。有正確的設計觀作判斷好壞的標準,并結合行之有效的設計原則作指引,才能制定出最優的設計方案。



          簡介


          Robin Williams 的四大基本設計原則相信大家都不陌生,尤其在平面設計領域內對它的應用更為廣泛。在此基礎上,我結合中后臺產品的設計特點,將其縮寫為「兩對兩性」原則,即:對齊、對比、親密性、一致性。


          每個優秀的設計中都會應用這些設計原則,并且各自是相互關聯的,只應用某一個原則的情況很少。


          作為設計體系的一部分,這套設計原則也為設計實踐提供了理論依據。本章引用中后臺產品設計中一些常見的案例,并以簡潔凝練的語言,分析總結了這四個基本原則的實際應用方法和注意事項。


          本章大綱如下:




          一、對齊原則


          任何元素都不能在頁面上隨意擺放,每一項都應該與頁面上的另一項或多項存在某種視覺關聯。即使對齊的元素空間上是相互分開的,但在水平或垂直位置上也會有一條“隱形的線”把它們連在一起。


          在界面設計中,將元素進行對齊,既符合用戶的認知特性,也能引導視覺流向,讓用戶更流暢地接收信息。



          1. 左對齊


          左對齊是將文本信息或視覺元素沿垂直方向向左對齊的一種對齊方式,左側會有一條“隱形的線”,將彼此分離的文本或元素連在了一起。


          文案類、列表類、表單類等排版會常用到左對齊的方式,這能讓用戶順著視覺流的方向,快速高效地接收信息或填寫表單內容。



          2. 右對齊


          右對齊與左對齊相反,右側會有一條“隱形的線”,將文本信息或視覺元素連在一起。


          在表格或表單中使用右對齊,可以實現快速對比數值大小,建議數值的格式保持統一。常規類數值可以統一使用千位符,如「1,024」;金額類數值可以保留小數點后兩位,如「¥88.00」。



          3. 居中對齊


          居中對齊是第三種常見的對齊方式,中間會有一條“隱形的線”,將文本信息或視覺元素連在一起。


          居中對齊會形成一種更正式、更穩重的外觀。盡管這是一種合理的對齊方式,但邊界是“軟”的,“對齊線”的強度也較弱,所以會顯得中規中矩。通常,首頁的功能介紹文案以及數據、金融等類型的產品界面會使用這種對齊方式。



          4. 兩端對齊


          兩端對齊也稱方形左右對齊,因為文本信息的左右兩端均對齊。


          通常在商品信息結算、帶有輔助說明的列表等場景中會使用兩端對齊的方式,不僅能讓橫向的文案更具關聯性,易于用戶接受信息,也能使排版顯得更加工整和嚴謹。




          二、對比原則


          對比可以有效地增強頁面的視覺效果,同時也有助于元素之間建立一種有組織的層級結構,讓用戶快速識別關鍵信息。


          需要注意的是,要想實現有效的對比,就應當拉開元素之間的差異,差異越大,對比效果越明顯。



          1. 字體對比


          字體對比包括:襯線體和無襯線體的對比,如 Georgia 和 PingFang;字重粗細的對比,如 Regular 和 Semibold;字號大小的對比,如 14px 與 20px;字體顏色的對比,如 #333 和 #999。


          當界面或模塊的標題字體大而粗、且顏色較深,正文字體小而細、且顏色較淺時,信息層級關系更明顯,字體對比效果將更理想。



          2. 顏色對比


          顏色對比包括:色相對比,如 Red 和 Blue;飽和度對比,如 S100 和 S60;明度對比,如 B100 和 B60。


          下圖中的百分比堆疊面積圖利用不同維度 (區域) 的色相對比,清晰的反應每個數值所占百分比隨時間或類別變化的趨勢,對于分析自變量是大數據、時變數據、有序數據時各個指標分量占比極為有用。



          3. 大小對比


          大小對比就是在同一畫面里利用大小兩種元素,以小襯大,或以大襯小,使主體得到突出。大小對比主要體現在面積或體積兩種維度上的對比。


          在下圖的 Dialog 中,主體圖片的面積相對于商品信息文字的面積得到最大化突出,主次更加分明,視覺沖擊感也更加強烈。



          4. 水平與垂直對比


          水平與垂直對比,是指水平分布的視覺元素與垂直分布的視覺元素在橫縱方向上的對比。


          在排版上,水平與垂直對比可以打破單一呆板的排列方式,在保持對齊的基礎上,豐富了界面元素的空間表現形式,減輕了用戶的疲勞感和無味感。




          三、親密性原則


          如果信息之間關聯性越高,它們之間的距離就應該越接近,從而形成一個視覺單元;反之,則它們的距離就應該越遠,從而形成多個視覺單元。


          親密性的根本目的是實現組織性,讓用戶對頁面結構和信息層級一目了然。



          1. 水平空間關系


          為了自適應不同尺寸的屏幕,同時保持橫向上控件的關聯性,因而采用柵格布局的方式來組織擺放元素和控件,保證布局的靈活性。


          同一控件內部的元素,橫向間距上也會有“親疏”之分,以體現組織性。



          2. 垂直空間關系


          在復雜的頁面或模塊設計中,縱向上需要使用高、中、低三種規格的間距來區分信息的層級關系?;凇冈g距」8px,三種規格可以是 24px (高間距)、16px (中間距)、8px (低間距)。


          注:縱向間距公式:y=8+8×n。其中 y 是縱向間距,8 是元間距,n≥0。


          另外,增加「分割線」等視覺元素,也是有效劃分頁面結構和信息層級的常用手段。




          四、一致性原則


          可以把「一致性」理解為「復用」,相同的元素在整個界面中不斷復用,復用元素可以是線框、顏色、控件、文本格式、空間間距、設計要素等等。


          一致性的根本目的是統一元素,并增強視覺效果,降低用戶的學習成本,幫助用戶快速識別出這些元素之間的關聯性。



          1. 線框復用


          同類信息的載體可以是相同粗細的線框、相同投影的卡片、或是相同顏色的底面,注意保持樣式屬性值的一致,以及上下左右間距的一致。



          2. 顏色復用


          在界面設計中,相同的功能提示、圖表數據、文字層級、按鈕、圖標、分割線、背景等,應使用相同的顏色,保持色彩體系上的統一,避免同類型的元素使用不同顏色給用戶造成認知困擾。



          3. 控件復用


          使用統一的導航、按鈕、彈框、圖表、選擇器等控件,既可以提高設計者和開發者的工作效率,避免重復造輪子的現象出現,又可以保持界面設計的一致性,降低用戶的理解成本,提高使用效率。



          4. 格式復用


          相同類型、維度或級別的文案,應使用相同的展現格式。注意標題、正文、輔助信息的層級關系,使用統一的對齊方式,讓關聯性高的信息之間形成一個視覺整體。




          本章小結


          1. 對齊

          任何元素都不能在頁面上隨意擺放,每一項都應該與頁面上的另一項或多項存在某種視覺關聯。


          2. 對比

          對比可以有效地增強頁面的視覺效果,建立一種有組織的層級結構,如果想讓元素不同,那就讓它們截然不同。


          3. 親密性

          如果信息之間關聯性越高,它們之間的距離就應該越接近,從而形成一個視覺單元,這有助于組織信息,減少混亂。


          4. 一致性 

          一致性的根本目的是統一元素,并增強視覺效果,降低用戶的學習成本,幫助用戶快速識別出這些元素之間的關聯性。


            • 文章來源:站酷   作者:Neil彭彭

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

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

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



          十分鐘認識界面設計中卡片式設計技法

          博博

          正確認識卡片式設計,什么是卡片、總結卡片優勢、卡片正確設計知識通過設計兩個案例進行講解,卡片在運用時的技法,望能幫助大家

          好久沒有發文章了,今天順叔和大家一起聊一聊卡片式設計,無論是WEB還是APP卡片式設計運用的比較多,很多UI設計師比較偏愛這樣的表現,卡片式設計會給人一種視覺上的享受,也能對于界面具有層次感。但往往在卡片設計中有一些技法還是需要了解,不能因為卡片式設計而卡片式設計,要能更好的應用到界面場景中。希望在這次分享中一些知識點能幫助到大家,之后的幾篇系列文章中,順叔會從界面中比較趨勢的設計技法進行分析,希望能幫助到一些設計的小伙伴。


          教程前的引言

          卡片式設計這幾年比較流行,同樣這樣的設計表達也是個趨勢,應用在APP PC界面中至今還流行著,從事UI設計的都會知道卡片式設計,具有把內容整合模塊化,從視覺,個性化體驗上進行呈現,是設計師在設計時常用的一種表現,同樣也具有獨特的創新概念。

          在一些項目中,一些客戶會說這個設計的APP界面有點太白,沒有層次感怎么辦,那這時你應該和客戶說在APP設計中運用了現在比較流行的一個表現手法,卡片式設計,可以解決在畫面中有個性化 、變化、 層次感的設計。那客戶又問什么是卡片式設計呢?


          一、什么是卡片

          無處不在的卡片設計具有個性的美感和很好的易用性,是以文字標題,小標題, 圖形或圖片組成的模塊化,以塊狀形式規整的整合內容,讓內容更規整化,視覺上更個性化,也是操作上快捷的內容信息入口。更直觀的表達內容信息和快捷跳轉操作。成為當今在設計中一個比較流行趨勢,而卡片在設計中也占用一定的優勢,讓整體更加的有層次感,在運用起來也比較方便,從視覺、體驗、交互都具有不錯的優點


          設計效果圖展示

          順叔為了這個文章特意設計了兩個案例,通過這兩個案例進行一些講解。請見下圖:


          二、卡片設計優勢

          1.趨勢

          無論是大平臺 還是小平臺的產品都會運用這樣的卡片式,跟風式設計趨勢,也讓卡片式設計成為了一個現在常用的優勢,不過卡片式設計的確有很好的效果

          2. 層次感

          具有一定的層次感,能在頁面版式中起到設計上的不同,個性化變化,頁面層次感區分強烈,能更好的體現提煉出內容

          3. 規整化

          卡片式設計以圖片、 圖標 、LOGO、 標題、 整合到一起 以塊狀的形式在界面中展示,更規整的排版呈現。雖然內容多會導致頁面亂,一個模塊包含內容之后就會規整不少,也給頁面設計上帶來了更好的視覺

          4. 視覺體驗

          卡片式給整個頁面會增加視覺上的體驗,特別那種大圖片卡片式更具有視覺上的沖擊力,背景襯托出前景卡片式設計。同樣對卡片式也感覺到舒適感??ㄆ皆O計還是需要根據整個布局、 產品需求 、功能進行設計。以達到最好的用戶體驗、視覺體驗。

          不要為了卡片設計而卡片設計。

          5. 易用性

          卡片式設計在易用性和靈活性上比較高,在響應式設計中同樣應用的也比較多一些。能更好的有序排列。

          6.簡約設計

          簡約設計會更顯得品質,不需要過多的進行裝飾,哪怕就是一個白色的色塊,上面點綴有色彩的圖標和標題 副標的變化,也會覺得顯得高大上,就算是一個帶有顏色的色塊卡片,也無須過多的設計 內容上的標題 、圖標、 按鈕就足以支撐起卡片

          7. 交互效果

          在卡片式的設計中會有一些動效交互,比如整體卡片放大、 縮小 、左滑、 右滑,可以整模塊化滑動 縮放。整體效果增加了不錯的視覺交互體驗


          三、卡片正確設計知識

          一般在界面設計中卡片的存在的意義和表現手法都是什么樣的呢,下面為大家舉例了幾種常用的正確的設計表達姿勢。希望小伙伴在設計的同時有所靈感和參考,把一些表現手法加入到自己的設計中,適合才最重要??ㄆ皆O計還是要根據整個風格和整個布局而進行展示,在做進一步的對比和布局中以最好的效果為最終展示方式,總結分析幾個常見代表例子,如有不全請討論補充,下面就是一些例子


          1.卡片式形式一

          以色塊為主體并用現在比較流行的漸變色組成,其中四邊為圓角,同樣色塊下邊陰影襯托出主題,這個是在卡片中設計比較常見的運用手法,卡片的長高在設計中也是根據結構,內容功能而進行設定。正方形,長方形都是一個表現得手法,在色塊上面標題文字,圖標,圖形是整個卡片的布局的形式,無非就是左右布局和上下布局

          應用場景:卡包、天氣、類別、入口、優惠劵,卡劵

          此圖片來自于網絡

          2. 卡片式形式二

          這種形式共同點都是在頭部C位出現的卡片式設計,其中承載著標題,副標題,以及圖文版式,不難發現,如果圖片有顏色,那么下面是白色底,這樣在白底上面色塊的出現還是比較簡約凸顯卡片,如果背景有顏色,卡片也有顏色那么卡片的凸顯程度就不會那么強,圖二很多在會員卡設計中常用的比較多,也比較簡約,另外兩個共同特點背景有顏色,一般底部背景顏色就是整個界面的主色調,背景有色塊,上面就用白色卡片,卡片上方標題、 文字、 圖片呈現。只不過排版的方式有所不同而已,在很多APP設計中,這樣的表達也很多,通過主色調可以很融合的把上面的狀態欄,導航欄融為一體視覺上統一性,底部背景顏色延續下來,上面凸顯白色卡片,這樣更具有視覺感和層次感。白色的卡片不需要過多的修飾,更能體現的上面的文字和圖片。

          應用場景:會員卡,滑動卡片,圖文標題,入口

          此圖片來自于網絡

          3. 卡片式形式三

          這種形式上圖下文字,或者是上標題,下圖片的形式,這種形式特別在圖片素材的選擇上尤為重要,有視覺效果好的圖片通過剪切,處理,合成,攝影,插畫等等方式,出現的圖片質量上好的話可以帶動整個設計的逼格,通過有效的圖片傳達,文字傳達,讓用戶更清晰的了解。這樣的形似一般在入口或者列表的形式出現的比較多,同樣也能體現出整體化和視覺化

          應用場景:滑動卡片,圖文標題,入口,列表

          此圖片來自于網絡

          4. 卡片式形式四

          大圖卡片式,一般以攝影圖片,插畫形式,文字壓與圖片之上,這樣的效果更具有沖擊力,也能顯得出比較潮流。體驗也很不錯,放大視覺,展示內容,圖片相結合,讓瀏覽者更愿意多看一會。表達的圖片與文字內容相符,做到圖文交融的程度。一般這樣對于圖片的選擇上還是比較要求嚴格的。沒有質量的圖效果會降低。

          應用場景:列表,說明,入口,天氣


          此圖片來自于網絡

          5.卡片式形式五

          列表卡片設計,這種形式一般白色的卡片,上面標題,頭像,按鈕,扁平插畫形式體現,更多應用在一級頁面的下方內容,以及二級頁面的列表頁或者集合頁,整體弱化背景以白色為主,給予圓角及陰影承托出層次感同時,體現上面內容部分。每個模塊的單元體具有統一的視覺。

          應用場景:列表,集合頁,入口

          此圖片來自于網絡

          6. 卡片式形式六

          大卡片式設計,表現為一塊特大的卡片式,上面會有標題,按鈕等信息,同樣表現出突出層次感,個性化設計的特質。體現出內容,一般背景有顏色上面卡片為白色,如下面背景為白色,那么卡片的形式也可色塊,在對比上有個反差,才能突出卡片的作用性。

          應用場景:提示,說明,優惠劵,劵,入口

          此圖片來自于網絡

          以上總結的幾種卡片的形式,在設計中可以根據情況而設計,卡片多樣化,布局多樣化,適合自己產品的才最重要,雖然在界面設計中常用的設計,但不要盲目的為了卡片而卡片套用設計,這樣起不到作用反而效果達不到理想程度。希望幾個卡片形式總結能給大家帶來一些靈感和啟發。

          同樣在這些卡片中會有一些基本的共同的特點

          共同的特點是

          1. 四個角都是圓角

          2. 根據潮流漸變色或白卡片

          3. 色塊下的陰影,色塊下的陰影更能體現出層次

          4. 卡片上面組成部分,標題,副標題,圖形,按鈕,圖片,頭像

          5. 字體大小,字體顏色的變化

          6. 一般卡片應用在會員,列表,說明,優惠劵,分類,類別,集合頁,歡迎頁等場景常見


          三、卡片正確設計知識

          為了講解文章,順叔臨時構思一個產品原型,而快速進行了簡單的設計,一個第一版,一個優化版,主要為了講解一下這個卡片設計一些問題,

          以下此圖為構思的原型圖

          經過分析原型圖之后開始進行設計,首先設計一個版本的,如果這樣卡片布局設計,這樣色彩搭配的情況下,會怎么樣呢,整體設計用了藍紫色為主色調,首先鋪藍紫色的色塊作為背景,然后上面放白色卡片,以至于卡片上詳細的內容,比如數字,圖形 能更好的豐富支撐卡片。同樣數據流也是比較重要的C位。也是比較重要的位置。接著根據原型圖下面有兩個卡片,通過扁平化設計,以色塊為主設計一個藍色,一個橙色的卡片,上面并有圖標,頭像,以及標題,兩個顏色的對比,更讓視覺有沖擊力,整體看這個設計并沒有什么,但有個問題在于單個模塊拿出來效果的確都不錯,但組成之后上面的卡片C位讓下面的兩個帶顏色的卡片搶了視覺,當打開這個界面的時候視覺落點在彩色卡片上,那么這個整體設計上就出現了問題,上面的數據,白色卡片其實是比較重要的,而且整個畫面都是卡片毫無設計上的變化,

          那么只能在這個基礎上在進行優化,其實大家在做設計的同時也這樣,在考慮功能模塊前提下,用戶體驗,也要考慮視覺體驗,那么視覺從哪方面來,色彩、層次、版式等等方面。那么能不能在進行一下優化呢,其實還是有空間在進行優化。以下圖為第一版

          設計第一版

          根據上面的設計在進行優化,同樣保留白色卡片部分元素,在卡片與卡片之間放一些顏色的圖標,這樣更好的給功能上快捷入口,也能給卡片設計增添了變化。使得整個畫面更靈活

          雖然白色卡片,但有一些色彩的點綴,也讓白色卡片活躍起來,把顏色的卡片改成白色卡片,從上到下的版式舒服多了,也沒有那么跳。整個風格更簡約,同時功能也更全面。

          調整后

          從原型圖,在到設計第一版,在到優化調整之后,證明一點,卡片不要因為卡片而套設計,反而會失去效果,考慮功能模塊,用戶體驗,視覺體驗也一定讓整體舒服。一直都說,繪畫中需要有主有次,設計中也一定要有主,有次的進行設計。這樣層級關系才能更清晰。

          但這些條件一定是從,體驗、色彩、布局、版式等方面進行對比和研究的。設計不要先著急做設計,前期的進行思考,邏輯清楚了,在進行設計的時候會更加的順暢??ㄆ皆O計,大家都在應用,希望這個文章能給大家帶來一點點知識點,那就不枉費我在熬夜寫這篇文章。

          不為別的,只是一個喜歡分享的肉團子。這篇文章就寫到這里,如果喜歡請給個贊吧。如內容有沒說到的地方,各位可以進行補充,以上兩個圖你稀罕哪個呢?


            • 文章來源:站酷   作者:張增順

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

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

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



          留白設計和UI設計準則

          博博

          接上一篇文章敘述留白設計準則以及UI設計的排版準則,希望在這個隔離的日子里,大家一起努力克服疫情,加油!






            • 文章來源:站酷   作者:赤鯨

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

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

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


          UI設計中色彩理論和實用的調色板指南

          博博

          顏色是感知的問題。每種顏色代表不同的定義波長,但是我們每個人對顏色的感知都取決于我們的感知能力。

          顏色是感知的問題。每種顏色代表不同的定義波長,但是我們每個人對顏色的感知都取決于我們的感知能力。此外,我們都有與顏色相關的不同文化或背景關聯。

          有很多很棒的文章和視頻,介紹了色彩理論和色輪,還有許多用于生成調色板的工具。但是有時您會在實踐中發現這些文章不太好用,顏色組合不完全匹配或所生成的調色板在您的項目環境中效果不佳。

          所以你會怎么做?您如何開始思考和查看顏色,使它們更易于選擇以及調整您的需求?

          諸如互補和單色,飽和度和亮度之類的色彩理論術語并沒有吸引他們。

          因此,我開始以不同的方式分解色彩,方法是從繪畫和室內設計等傳統視覺和圖形藝術中汲取靈感,并以對我們作為UI設計師所做的方式有意義的方式對其進行取景。

          匹配調色板并平衡配色方案

          也許您已經按照所有的色彩協調和顏色理論教程進行了準備,并生成了一個免費的調色板,但是您注意到這些顏色似乎不太匹配,也許它們看起來比較粗糙或不專業。

          創建良好的配色方案就是與色調,陰影和溫度匹配的平衡。要在設計應用程序中成功做到這一點,您需知道要拉動哪些杠桿。

          色彩理論提供了一些公式,可用于啟動調色板,這是理解調色板的重要基礎。但是創建漂亮的調色板不僅與這些公式有關,還與平衡色調,陰影和溫度有關。

          這些是我們可以推拉的“杠桿”,可以為我們的UI設計實現更加平衡和獨特的顏色組合。

          因此,首先,回顧一下這些杠桿的作用。

          色相是用于描述所見到的每種色調的通用術語。

          飽和度指的是我們正在查看的特定顏色的主要顏色系列。白色,黑色和灰色通常被稱為無彩色。

          明度也指顏色的明暗程度。色調相同的顏色,明暗可能不同。例如,絳紅色和粉紅色都含有紅色,但前者顯暗,后者顯亮。

          色溫-色溫更多地是關于我們如何感知所看到的色相。并且我們傾向于將它們分為暖色和冷色。

          暖色-通常是通過增加色調中的紅色或黃色來獲得的顏色。這些往往會喚起激情,舒適,活力和運動的感覺。他們使我們想起陽光和熱量。

          冷色-是增加藍色和綠色的顏色。這些趨向于喚起,清新,冬天,靜止,平靜。他們使我們想起冰,雪和水。

          色彩模型和色彩空間

          要獲得一些技術知識,您可能聽說過3種不同的顏色模型,這將有助于我們更好地理解光和顏色的協同作用。

          CMYK使用減法混色。它指的是光線反射物理白頁的方式。顏色的重疊導致黑色。由于頁面無法投射光線并向您發光,因此頁面必須具有反射光。將這些顏色混合在一起就可以掩蓋頁面的白色,從而減少了可以反射的光量。

          RGB稱為光的加法混合。它指的是數字屏幕向我們投射光的方式。您在全亮度下的顏色會導致我們看到白色的重疊。有點像被明亮的泛光燈所蒙蔽。

          HSB-代表色相,飽和度和明度

          HSB顏色模型為我們提供了放射狀的顏色,其中我們具有一定范圍的色相,飽和度和明度值。

          這就是我們的眼睛和大腦如何解釋顏色HSB就是我們的眼睛所看到的一切,而與它是從屏幕還是在紙上投射的光線無關。

          因此,出于為UI設計選擇顏色的目的,我們將使用HSB顏色模型。

          顏色屬性

          您經常會聽到兩種較大的顏色分組。暖色和冷色。

          暖色通常被認為是主動色,這意味著它們會引起更多關注。

          冷色通常被認為更被動且后退一些。

          根據色彩的豐富程度和它們如何平衡,您可以使柔和的暖色充當被動元素,而更鮮艷的冷色則扮演主動角色。

          現在,您了解了顏色如何在屏幕上顯示以及如何設置我們的設計應用程序。讓我們談談如何在我們的設計軟件中使用和推動這些杠桿,并平衡我們的配色方案和調色板。

          為了得出這些不同的顏色類別,我們將集中于推和拉色調,飽和度和亮度(HSB)的控制桿。

          在數字屏幕上,我發現有一個公式和安全范圍的飽和度和亮度,可以每次為每個類別創建一個完美的調色板。

          為簡化起見,我將主要顏色分為6種通常可以識別的主要顏色類別。這些反映了我們在日常生活中談論顏色時通常傾向于指代顏色的方式:

          1.寶石色調

          S:83-73,B:76-56

          這些顏色是飽和度很高的色調,以寶石命名,包括寶石藍,寶石紅,紫水晶紫色,檸檬黃和翠綠色。想一想紅色寶石項鏈或皇家紫色的魅力。這些顏色富麗堂皇,深沉,并賦予豪華感。

          2.粉彩

          S:14-21,B:89-96

          柔和的顏色屬于淺色系。粉色,淡紫色和淡藍色是常用的柔和色。這個家庭的顏色通常被描述為“舒緩”。我們通過降低飽和度和調整色彩來創建這些顏色。

          3.大地色調

          S:36-41,B:77-36

          這些是自然界中常見的顏色??梢酝ㄟ^將純色與白色,黑色或灰色相結合來創建它們。從廣義上講,這些是中性色。它們受到樹木,森林,海洋和天空的色調的影響,被用以模仿自然色彩。我們通過增加飽和度和調整色調來創建大地色調。

          4.中立

          S:1-10,B:99-70

          純中性色包括黑色,白色,米色和所有灰色,而接近中性色則包括棕色,棕褐色和深色。這些是通過使色彩去飽和來創建的。它們可以與以上任何類別配對以創造平衡。我們通過降低飽和度并調整色調,色調和陰影來創建中性色。

          5.熒光燈/霓虹燈

          S:100-63,B:100-82

          在物理世界中,這是由霓虹燈管或紫外線反應涂料的顏色創造的,但在數字世界中,我們可以通過將非常明亮和高度飽和的顏色應用于我們的設計來獲得相同的效果。我們通過增加亮度和色調來創建它們。

          6.陰影

          S:0-0,B:0-100

          兩種主要的陰影是黑色和白色,其他陰影也包括不同程度的灰色。

          UI顏色組合

          最佳的用戶界面設計結合使用一種顏色類別以及中性和陰影。

          您實際上只需要這些類別中的1或2種顏色即可設計參與整個用戶界面。

          我們為什么不這樣談論顏色

          作為數字設計師,我們傾向于避免給這些配色方案分類,因為術語似乎是為混合自然色彩的畫家,印刷設計師和室內設計師保留的。但是從實際的角度來看,當我們仍在學習色彩理論并使我們的眼睛習慣于選擇可以一起使用的色彩時,我發現以這種方式引用色彩在UI和數字屏幕設計中可以非常有用。

          這不是一門精確的科學,但是您會看到如何以這種方式思考顏色并掌握一些杠桿和數字,以指導您幫助用戶創建更令人愉悅和精致的調色板。

          理解色彩理論的基礎和原理很重要,特別是當涉及到實際應用時,它就顯得尤為重要。引用不同的學科并找到對我們有用的類比可以帶來很大的不同。

          作為UI / UX設計師,最重要的是,無論您如何去實現,您都能夠有效地使用顏色來傳達信息并為用戶創造最佳體驗。


            • 文章來源:站酷   作者:對啊設計君

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

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

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


          UI 設計:如何做到理性?

          博博

          有哪些理性,以及如何做到理性



          UI 設計,是用理性方法,來滿足需求,并帶來美學享受。


          本篇探討 UI 設計如何做到理性。全文共有三部分:有哪些理性,如何做到理性,止步于理性嗎。



          01 UI 設計:有哪些理性?


          UI 設計主要有四類理性:基本原則,基礎知識,風格設定,風格把控。四類理性有一個共同核心:活學活用



          1 基本原則


          共有四個基本原則:對齊,對比,親密,重復。



          先說對齊


          秩序產生美。對齊作為一種基本秩序,主要事關整齊美觀閱讀體驗。


          對齊一般分左對齊、右對齊和居中對齊。


          從閱讀體驗角度來講,左對齊通常勝過居中對齊,所以絕大部分文章和 UI 界面都是左對齊為主。


          從美感角度來講,居中對齊往往勝過左對齊,所以一些強調美感勝過強調閱讀效率、篇幅不長、同時需要細品的詩或歌往往采用居中對齊。



          從空間利用率角度來講,右對齊往往是左對齊的一種補充。比如微信的發現頁面,最重要的圖標和文字左對齊,次要的右箭頭和其它信息右對齊。


          UI 設計追求閱讀體驗、美感和高空間利用率,所以這三種對齊方式大部分時候都會同時出現。整體而言,是以左對齊為主,居中對齊和右對齊為輔。


          再說對比。


          嘈嘈切切錯雜彈,大珠小珠落玉盤。音樂講究韻律和節奏,設計也追求錯落有致的節奏感。這種節奏感,很大程度上靠對比實現


          好的對比可以帶來視覺張力,就是抓人眼球的吸引力,同時也能起到主次分明和視覺引導的作用,最終帶來良好的閱讀體驗。


          一定程度上,對比是無處不在的。只要存在不同,就存在對比。比如大小之間的對比,不同顏色之間的對比,文字與圖標/圖片之間的對比,不同對齊方式之間的對比,等等。


          一般而言,對比需要果斷:若不同,就徹底不同。因為一般情況下,充分的對比能帶來更好的視覺張力和更好的閱讀體驗。


          第三說親密。


          設計就是分類,張小龍曾如是說。分類中最重要的原則是親密,還有一個副產物是留白。


          性質相同或相似的元素,我們會讓它們看起來離的更近,關系更親密。親密成就分類,分類能化繁為簡。


          最后說下重復


          設計追求一致性,一致性主要靠重復來實現。被大量“重復”的元素,比如這篇文章里的字體大小和字體顏色,既保證了一致性,又提高了效率。


          2 基礎知識


          基礎知識主要包括:手繪、顏色、版式設計、字體設計、品牌設計、動效設計、插畫設計等專業知識。


          UI 設計師可能不用畫卡通人物或插畫,但一定會畫圖標和 logo,這些也會用到手繪。作為造型基本功,需要掌握一定手繪技能。


          顏色方面,最重要的是能夠很好感受和理解顏色傳達出來的感覺,也即顏色的“精神之美”,這塊主要依賴審美和練習。


          配色方面,推薦軟件里的 HSB(色相、飽和度和亮度) 模式,這種模式很好理解,也方便調色。另外還強烈推薦從照片中吸取顏色,因為照片往往會和“生活”、“自然”有一定關聯,“生活”和“自然”是非常重要的素材和靈感來源。從色卡中選擇顏色也是一個不錯的選擇。


          版式設計就像是選秀節目中練習生的舞臺表演,考驗的是唱跳、表情管理、舞臺魅力、臨場應變等綜合實力。


          “活學活用”環節,會結合例子分享版式設計。


          字體設計、品牌設計、動效設計、插畫設計等方面,個人經驗不多,就不分享了。文末會附一份推薦書單,囊括基本原則和部分基礎知識。


          3 風格設定


          風格設定,即上篇提到的“精確描述”,是在動手設計之前,先探索出合適的風格,并把它精確描述出來。


          好的開始是成功的一半。風格設定是一個開始,極其重要。如果風格設定只做到 60 分,稍微打點折扣的執行結果就是不及格。所以,如果要把設計做到 85 分,風格設定一般要做到 90 分。


          風格設定猶如在茫茫大海中行船,首要目標把握方向,核心訴求是精準。海上并無現成道路和導航可循,只能依靠繁瑣而嚴謹的推理和計算。


          風格設定的次要目標劃一個既清晰界定風格、又清晰指明“發揮范圍”的“圓圈”,核心訴求是周密。因為需要清楚知道“圓圈”以內代表什么,“圓圈”以外代表什么。


          在“精準”和“周密”上同時做到優良,風格設定才能做到優良。


          既精準又周密的風格設定,通常無法一蹴而就:“風格設定”階段一般只能做到七成,剩下三成需要在設計過程中繼續探索和打磨。下一大段會結合案例分享具體方法。


          4 風格把控


          風格把控有兩層含義,一是實現當初設定的風格,二是在實現的基礎上做到統一和規范。


          只要嚴格在“圓圈”里發揮,實現當初設定的風格并不難。那做到統一和規范難嗎?往難了說就是需要做大量瑣碎工作:以聯系的眼光看待所有設計元素,并把它們分類規整好,注意分類不宜過多,同時分類邏輯上不能出現明顯問題。往簡單了說就是大量復用已有的設計樣式。


          風格把控就是在劃定的“發揮范圍”內,利用設計知識和經驗,以規范的方式實現規劃好的風格。


          5 活學活用


          活學活用作為四類理性的共同核心,最典型的應用場景是版式設計。


          活學活用有兩個要點:正反結合,風格第一。



          所謂正反結合,是指設計知識既能正著用,也能反著用。最常見的例子是對齊原則,大部分時候是正著用,但如果想要營造活潑的感覺,也會反著用:故意打破對齊原則。


          除了對齊原則,其它設計知識,比如重復原則,也可以反著用。


          本文配圖就是一個例子:圖片左上角、右上角和右下角分別散布著裝飾元素(橫線、圓環)和 logo,在裝飾元素的出現次數上,沒有用重復原則。過年家里掛燈籠一般至少掛兩個,同一裝飾元素一般至少出現兩次,以達到一種和諧和較為熱鬧的裝飾效果。



          我在裝飾元素的出現次數上沒有用重復原則,而在出現位置(相似位置)、元素大?。ㄏ嗨拼笮。┖驮仡伾ㄏ嗨祁伾┥嫌昧酥貜驮瓌t,同樣達到了和諧效果。之所以沒在裝飾元素的出現次數上用重復原則,是想放一個隱喻在這里。


          所謂風格第一,是指設計風格永遠第一,設計知識永遠第二。知識服務風格,切不可重知識輕風格。


          《倚天屠龍記》中,張三豐教張無忌練習太極劍時,要他忘記劍招,只記劍意。某種程度上,版式設計也要將“劍意”放在第一位,“劍招”服務“劍意”。


          對比原則也有反著用的時候。有一條關于對比的知識:對比要果斷,若不同,就徹底不同。這條知識能解釋百事可樂 logo 里紅色與藍色的強烈對比,但解釋不了山本耀司旗下大部分服裝那千篇一律的黑色——單色,無對比。



          設計最重要的是感染力,感染力主要來自個性、態度、價值觀這些風格層面的東西,而非設計知識這些技法層面的東西。


          當一個設計,技法高超而風格不足時,感染力和魅力就會不足,這也是設計師經常會犯的錯誤,大家需要注意。



          02 UI 設計:如何做到理性?


          可以簡單分成三步:規劃,成形,細化。下面結合微信 Redesign 這個案例來說明。



          1 規劃:用“紅綠燈”法設定風格


          設定風格,用到的方法姑且稱之為“紅綠燈”法。“紅綠燈”法借鑒并改良了我在網上看到的一種“紅黃綠卡片法”(在紅、黃、綠三種顏色的卡片上寫下不同的設計關鍵詞),并和“情緒板”法有相似之處:都包含關鍵詞定位圖片參考兩部分。


          先說關鍵詞定位,共有兩步。


          第一步類似頭腦風暴,結合產品屬性、用戶屬性、市場情況、個人喜好等因素,把能想到的設計關鍵詞全部寫下來。合適的不合適的都要寫,只要想到了就寫下來,確保有二三十個。如果關鍵詞數量不夠,這個步驟可以多重復幾次,直到夠了為止。這一步設計師和需求方都要參與進來,在提供關鍵詞上雙方是平等關系。


          這個微信 Redesign 是個具有探索性質的小練習項目,基于微信 7.0,有兩個目的:首先保留原有交互體驗和品牌識別度,其次在視覺上更年輕、更流行。可以通俗理解成:一款微信“皮膚”,主要給年輕用戶和趕新潮的中老年用戶用。


          結合產品屬性(社交類、工具類、內容類)、用戶屬性(年輕用戶為主)、市場情況、個人喜好這些因素,這一步想到的關鍵詞如下圖所示。



          第二步是歸類,就是把第一步產生的所有關鍵詞歸成“紅黃綠”三類。如果關鍵詞不夠,還可以再補充。這一步依然是需求方和設計師共同參與,但需要設計師來主導。


          紅色關鍵詞代表不能踩的紅線:不能這樣做黃色關鍵詞代表黃燈警告:這樣做不太合適;綠色關鍵詞代表暢通無阻:應該這樣做


          需要注意的是,綠色關鍵詞最好控制在 3-4 個之間,如果超過 4 個,就需要分成主綠關鍵詞和次綠關鍵詞,主綠關鍵詞依然要控制在 3-4 個之間。這樣做有兩個考量,一是確保簡單和重點突出,二是也更容易實現。


          回到第一步的關鍵詞上來。設計中當然可以用“擬人”、“隱喻”等手法,所以“擬人”這個關鍵詞顯得意義不大,故刪去?!皽貪櫋焙汀坝H和”,“老少皆宜”和“大眾”在語義上都存在一定的重復,所以刪去后者。刪除這類不合適的關鍵詞后,剩余關鍵詞就按“紅綠燈”法歸類,歸類后情況如下。


          (微信 Redesign 之按“紅綠燈”法歸類后的設計關鍵詞)


          關鍵詞定位已就緒,再來找參考圖片。


          可供參考的圖片有兩大類:照片和 UI 界面。UI 界面也有兩類:線上作品(真實項目、練習作品等)和上線作品。


          做 UI 設計,參考什么樣的圖片?個人建議,做什么類型的設計,就重點參考什么類型的圖片。比如 UI 界面就重點參考 UI 界面,banner 就重點參考 banner。


          UI 界面的設計,個人喜歡重點參考知名產品的上線作品。單從視覺角度來說,上線作品的質量可能比不過一些線上練習作品。但是已經上線的知名產品的 UI 設計,其風格的形成往往都會經過很多推敲,會有很多比較成熟的設計思路在里面。


          參考別人的設計,最重要的是參考設計思路,其次才是參考表現形式。這種設計思路,有時候能從網上找到,但更多時候靠自己推測。


          微信 Redesign,根據“很多年輕人在用,且風格比較流行”這條主線,找來了 QQ、抖音、B 站、小紅書、陌陌、Soul、騰訊視頻、愛奇藝等產品的截圖。這些產品的截圖,看完一圈后,就會面臨一個問題:以圖標為例,這幾個產品的圖標,風格各異,但基本都具備“年輕”和“流行”的特點,那應該參考哪一個?



          這時就要求助關鍵詞定位。除了“年輕”和“流行”,主綠關鍵詞還有一個“輕微老少皆宜”。最符合“輕微老少皆宜”的是愛奇藝和騰訊視頻:很多老人和小孩也會用這兩個 App 看視頻,網上公開的數據也能佐證這一點,所以它們的設計一定會照顧中老年用戶的審美。


          最后,出于個人偏好,我選擇重點參考愛奇藝的圖標風格,具體而言就是:深淺雙色、較粗(1.5pt)描邊、圓潤風格。


          2 成形:按照規劃,實現風格


          紅黃綠三色關鍵詞及重點參考圖片就緒后,就可以動手設計。


          我一般會把界面設計粗略分成三大部分:版式風格、元素風格、元素大小,元素為圖標、圖片、按鈕等,然后去一一實現。


          先說版式風格。


          用的主要綠色關鍵詞是“更流行”和“更年輕”?!案餍小卑ǎ焊笞痔柕捻撁鏄祟}、盡可能用留白代替分割線和卡片的“無界”風格、圓形頭像、更多留白更多舒適、等等?!案贻p”包括:更圓潤的搜索框、輸入框和圖標、更年輕更具活力的配色、等等。


          再說元素風格之圖標風格。


          圖標主要參考愛奇藝 App:其一,底部導航和發現頁的圖標都是深淺雙色加較粗的描邊;其二,除了更圓潤以外,部分圖標還變 Q 了。


          最后說元素大小。


          以這個小項目為例,最主要的元素大小是圖標大小和字體大小,它們會影響整個設計的感覺。通常情況,元素越小,給人感覺越精致、越高端,此其一;其二,可能是年輕人和老年人視力存在差別的原因,越小的元素往往代表年輕人的審美,反之則代表老年人的審美。


          元素大小主要運用的綠色關鍵詞是“輕微老少皆宜”。也就是說,需要在年輕人和中老年人的審美中找到一個平衡,所以元素大小基本直接參考了微信 7.0 的設計,個別地方做了微調。


          最后,出來的效果如下圖所示。



          3 細化:打磨優化


          這份設計我發在了網上,部分網友留言說看著不夠好,不太舒服,有一個表達的比較具體——“雖然用了大面積留白,卻讓人感到緊迫...”。


          基于網友的留言,我仔細審視了這個設計,最后發現問題主要出在頁面(發現頁為例)左右兩側:留白過小。



          當初之所以這么設計,是想通過頁面左右兩側較少的留白制造一種內容將要撐破屏幕的感覺,從而營造一種活潑的感覺。注意,彼時“活潑”還沒出現在“黃色”關鍵詞里,上文兩張關于關鍵詞的圖都省略了中間探索和優化的過程。


          很多網友之所以沒有感受到活潑而只是覺得不太舒服,至少有兩個原因:第一,整個設計的基調是簡約、清爽,有一定的年輕感和流行感,但沒有太明顯的活潑感,硬往里面某個地方塞“活潑感”并不和諧,大家也難以感受到;第二,單純就“活潑感”而言,做的依然不到位,比如圖標與右側文字的留白,可以比圖標與左側邊界的留白大,方能更好彰顯活潑與活力。


          考慮到“輕微老少皆宜”這個綠色關鍵詞及微信主要是工具型和內容型產品,“活潑感”用在這里并不十分合適,于是放棄,并將“活潑”歸為“黃色”關鍵詞。此處留白的目的就回歸其本職工作:整體和諧與舒服。于是就把留白相應調大了。



          另外一個優化的點是“眼睛”的形狀:微信圖標、看一看圖標、表情圖標、朋友圈里將點贊和評論折疊起來的圖標都有一雙“眼睛”,這雙“眼睛”起初是豎著的橢圓形,很萌,也比較低齡化。為了盡可能的“輕微老少皆宜”,這里統一把“眼睛”由豎著的橢圓形改成了圓形,弱化了“萌”和“低齡化”的感覺。



          還有一塊是顏色上,拍攝視頻動態的圖標有用到藍紫色。這個紫色基本符合“更年輕”、“更流行”,但不太符合“輕微老少皆宜”,所以最后放棄了紫色,保留了藍色。



          遵循主綠關鍵詞里的“輕微老少皆宜”,其它優化的點有:微信圖標尖角處的圓角調小,刪除啟動頁與黑色"WeChat"字形成對比的綠色圓點。另外還有一些視覺層面美觀、和諧、舒適度的優化,比如顏色、留白、圓角大小、字體大小方面的微調。


          優化后的微信 Redesign,整體效果如下圖所示。



          凡事預則立,不預則廢。UI 設計如何做到理性最核心的是設計風格,規劃、成形和細化都緊密圍繞設計風格展開。


          最后,嘗試總結下“紅綠燈”法的優勢,主要有四點:精確、周密、穩妥、高效



          關于設計風格,傳統規劃方法一般只有三四個“綠色”關鍵詞。


          “紅綠燈”法擁有“紅燈”、“黃燈”和“綠燈”三種顏色的關鍵詞,從而確保大方向更準確。“紅綠燈”法會產生20個以上的紅黃綠關鍵詞,從而確保劃出來的“發揮范圍”更周密,極少有疏漏。


          在“成形”這個設計環節,一旦踩到“紅線”和“黃線”,規劃好的紅黃綠關鍵詞都會馬上發出警報,從而大大降低“違規踩線”行為的發生次數,確保設計執行環節的穩當可靠。


          “紅綠燈”法通俗易懂門檻低,需求方可以較為深度參與“規劃”環節。需求方在“規劃”環節的深度參與,理論上可以降低后期的返工和修改次數,從而確保整個設計過程的高效。同時理論上也能夠提高設計師和需求方雙方合作的愉快程度。



          03 UI 設計:止步于理性嗎?


          UI 設計,始于理性,但無法止步于理性,還需要超越理性。注意,這里的理性,僅指設計知識的相關理性。


          超越理性主要有兩點:直覺,其它知識。



          1 直覺


          直覺是指一種能夠快速感受和評估設計優劣的感覺。良好的直覺往往快而準。


          感知和評價別人的設計時,用到的幾乎全部是直覺。審視自己的設計時,也離不開直覺。


          在審視自己的 UI 設計時,直覺主要發揮兩個作用:第一,囿于知識儲備或表達能力,有些地方就是解釋不清,這個時候就要靠直覺去感受去判斷;第二,直覺往往會作為檢視設計的最后一道關卡,也是最重要的一道關卡。


          直覺來自哪里?


          個人觀察是,直覺往往和審美正相關。比如一個設計師,他掌握的設計知識有限,經驗有限,對自我的要求也不高,最終的作品往往不出彩。但如果他審美好的話,往往能夠分辨出不同設計方案之間孰優孰劣。


          如果你想就設計稿征求別人的意見,請去找那些審美好的人。


          2 其它知識


          其它知識是指設計知識以外的所有其它知識。比如 iPhone 上刪除應用前應用圖標的抖動,其靈感應該來自生活中的搖頭求饒或嚇得發抖,抖動的幅度和頻率則需要利用物理學和數學方面的知識。


          優秀的設計,一定會從生活中汲取大量靈感,并廣泛利用社會類、人文類和理工類學科的知識。就拿數學來說,在好的設計中,一定是個??停阂驗槟阈枰煌5陌从嬎闫?,從而計算不同設計元素之間的比例關系和各自的大小。


          汝欲學詩,功夫在詩外。遣詞造句這些文字技巧只能是寫詩的基礎,而非關鍵。寫詩的關鍵在于你對生活、對世事的積累和感悟,在于你的思想是否深刻,情懷是否充足。


          寫詩如此,做設計亦如此。設計知識只是做設計的基礎,而非關鍵。做設計的關鍵在于“其它知識”。“其它知識”非本文重點,就不展開了。



          結語


          UI 設計里的理性,主要是各類設計知識。理性的核心在于活學活用各類設計知識。


          理性嚴謹的做 UI 設計,可以簡單分成三步:規劃,成形,細化。好的開始是成功的一半,一個高質量的規劃顯得尤為必要。


          用“紅綠燈”法做規劃,并指導成形和細化工作,會更精準、周密、穩妥和高效。


          UI 設計,是七分理性,三分直覺。審美越好,直覺越準。


          優秀的 UI 設計,一定會從生活中汲取大量靈感,并廣泛利用設計以外學科的知識。








          推薦書單  


          [美]Robin Williams《寫給大家看的設計書》

          [日]佐佐木剛士《版式設計原理》

          [日]伊達千代《色彩設計的原理》

          [日]小林章《西文字體1、2》

          左佐《設計師的自我修養》

          左佐《治字百方》




          原文鏈接:https://mp.weixin.qq.com/s/yZVBzTYJxWQ7fk-tjXG8Yg


            • 文章來源:站酷   作者:SnowDesign

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

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

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



          界面設計中的那些版式-圖版篇

          博博

          這篇主要說一下版面和圖形使用,對高手來說可能有些老生常談,但對移動端界面設計或許會有點參考價值,用幾分鐘看看吧。


            作者:王鐸(Micu設計)


            這篇主要說一下版面和圖形使用,對高手來說可能有些老生常談,但對移動端界面設計或許會有點參考價值,用幾分鐘看看吧。

             

            界面美不美,除了構圖之外,另一個重要手段的就是如何處理留白,也可以理解成版率。留白就是為了凸顯層次、突出內容。

            手持設備屏幕較小,決定了信息顯示是有限的。用戶有效接受信息并不與界面內提供的信息量成正比,有的時候提供的越多,用戶反而真正接受的越少。妄想滿屏都是信息是不可能的。用戶越來越受不了滿屏的信息了。

            讓用戶接受該接受的有效信息,是關鍵。

             

            在設計界面的時候,因為內容和頁面都比較多,為了保證頁面與頁面的統一性,首先需要設定頁面內容四周的留白。在設定頁面的間距后相應的內容圖標,圖片等的安排就確定下來了。用這樣的方法能使調整出來的頁面更為條理化。

             

             

            紅色色的部分就是內容。在頁面中一般會有導航的存在,那么內容區的版面是從導航下面計算的。

            界面四周增加留白。這樣的界面很容易集中用戶的視線到少數的內容上去,突出了焦點,整體給人一種典雅高級的感覺。

             

             

             


            反之,縮小留白或者不留白,頁面會顯得更豐富更充滿活力。而圖片的展示空間會增加,沖擊感增強,讓界面更顯得富更有張力。

            根據頁面的內容不同和功能點,適當的調整界面周邊的留白非常重要。一般圖片本身比較有意境,可以直接采用“出血”的方式,不留白或者少留白。

             

             

             

             

            下面介紹一些版面的小規律、小技巧。

             

            1.取其精華,一塊顏色也能定天下!


             

            提取主要的信息,通過對整個頁面的顏色進行調整,從而提高版面使用率。將一個或多個功能點作為主信息,提到首頁中進行設計,從達到想要的視覺效果。這樣處理后的界面設計不僅能顯得大氣有張力,而且展現出來的信息聚合度高。

             

            在缺少圖像素材的情況下,如何讓界面顯得有張力,整體感強,呈現出來的版面率高。

             

             

            單色背景留白,凸顯主要信息。要求圖標或者文字,相對簡潔,能夠很好地和背景色融為一體。再通過線條和規則的圖形來分割留白區域,增加層次感。

            做好這些的前提是,設計師要明確主要信息,以及它們之間的關系。 

             

             

            結合產品特點巧妙的運用大色塊,將變化的信息用顏色區分出來。讓用戶最直觀的感知信息的變化。

             

             

             

             

            2.多色塊靈活分割,加強內容使用率



            圖片素材少,還可以采用多色塊進行分割,讓界面顯得不那么單調。

            加強內容使用率可以通過色塊(臨近色或是互補色)的延伸或是圖像的重復來組織頁面版式。將圖片和色塊進行統一化排版布局,整體基調能使頁面豐富化。圖片與相同大小的色塊可以保持界面的統一性與簡潔性,色調的一致的統一性和連續性使頁面更為整體,這樣看起來的頁面就像一張圖片一樣有張力。并且這種方式讓用戶感覺點擊的區域也會增加,從而操作也變得便捷起來。

             

             

             

            3.構圖不拘一格,找到最合適的內容版率。


             

            橫向和縱向分割,使界面顯得整齊、穩定,而斜向分割讓界面沖擊感強。

            使用不同的構圖方式,穿插性地將少量的圖片整合在構圖的形狀中,能讓界面變得活躍而富有活躍性。這樣的表現方式還能將產品的氣質融入進去,淋漓盡致地展現。有節奏感的設計更為取巧地加強了版式率。在界面設計中,圖文的穿插可以引導用戶的視線,讓原本簡單的內容變得有趣。在層次上,也可以區分內容的主次性,讓閱讀更加的輕松。

             

             

             

             

             

            4.簡約化桌面或主頁,讓界面越近越美


             

            常用方式:圖標、加大文案字號、序號、數字等來達到加強版式率的運用,提高視覺上的豐富性。

             

            圖標表達

             

            人們越來越認同扁平化,一方面是因為扁平化的圖標看上去清新簡潔,用戶理解快。另一方面,與圖標搭配的背景更加單純,要么留白,要么炫簡,盡可能減少給用戶在視覺上干擾。好的扁平化圖標不是簡單地刪減細節,而是著重凸顯有效的信息。

             

            圖標是最為直接的表達方式,簡單明確的圖形,能讓用戶通過對圖標的認識快速找到想要的功能和需求點。圖標與文案的搭配有效的降低了閱讀時候的疲勞感。從而加強了界面內容的節奏。運用圖標的設計條理清晰,功能明確。

             

             

             

             

            信息化圖標能給產品增色。有趣的圖標設計不僅能很好的將功能點進行區分,也能好的將軟件的特性和品牌展現出來。

            把圖形融入到界面中,可讓內容更為豐富,層次更加的分明。

             

             

             


            5.突出重點文案,調整版面率,讓信息更清晰。

             

            調整文字大小將調整版式的使用率,使原本空的界面內容顯示的更為飽滿,用戶閱讀起立更為直接。使用較大的字號進行加強頁面使用率能讓頁面顯得更為信息。突出重要的引導文案,加強了軟件的情景感和帶入感??焖僖龑Я擞脩魧δ艿睦斫?,從而準確的使用。

             

            在頁面中我們可以強調重點數據或功能詞等來區分界面中的層次感。讓用戶的視線更為集中。

             

             

            6.串聯圖片,讓它們講故事,視圖化版面。

             

            這種設計方法更多的是將文案用圖形或插圖展現出來。在數據頁面和引導頁中最為常見。

            一段文案一副插圖的引導頁更為有特色,給用戶的情懷感更強。這種設計手法也是最容易體現產品特質和吸引眼球的。圖案的易讀性高,能在極其短暫的時間內快速傳達給用戶信息。用圖像來講故事,是設計中最根本的表現方法,也更是最為受歡迎的表達方式。

             

             

             

             

             

             

             

            圖在界面中的運用

             

            三種方式:摳,邊界關系,殘缺

             

            1.切摳弄,制造純色留白!



            在處理圖片素材的時候,常常會碰到圖片背景雜亂,產品不夠突出的問題。在設計之前我們可以對素材先進行處理,將產品直接摳出來。利用這種方式可以找到產品的形狀,越明確的形狀越能反映用戶對產品的認知度。產品的獨特性能快速明確的表達給用戶,用戶從潛意識第一時間的判斷到產品的類型和使用特性。

            下面是一個曲奇餅干的網站,將主餅干的勾出來,進行層次感的區分。在產品介紹中采用了側面的實物摳圖,體現出了曲奇餅干最為真實的厚度。運用碎落的餅干塊虛化拉開產品的層次。深色的背景與餅干對比強烈,直接凸顯了實物的形狀。讓用戶一目了然,食欲大增。從而增了用戶的購買欲望。

             

             

            在很多的電商APP中也常采用摳圖,去除多余雜亂的信息,利用產品的形狀直接體現不同商品的特點。這樣的界面用戶閱讀起來輕松愉悅。

             

             

             

            2.建立邊界,再打破邊界,破出重圍

             

            如果需要展示的信息較多,采用分割區域的方法,可以使界面顯得整齊干凈。而當信息較少時,設計師可以大膽選用“局部出血”的方式,建立邊界,再突破它,增加層次感和沖擊力,以凸顯主題。

            一定要記得設定好的內容范圍是為了讓頁面顯得整體化,而不僅僅是擺放和拼圖。

             

            在網頁設計中有時候會見到這種方式,其實在手機、平板等UI設計中我們完全可以套用。

            運用圖片的穿插來區分背景和產品或形象的層次感,處理完的界面更加富有生命力。放大需要突出的主形象,把它作為第一焦點展現在用戶的眼前,有種強烈的“面對面”感受。

             

            在APP中采用將圖片局部突出出來,能拉開信息的層次,將需要突出的圖片信息第一時間展示給用戶。一方面可以方便和引導用戶點擊,另一方面在上下滾動的長副瀑布流里,適當地打破平衡,可以豐富頁面的節奏感。

             

             

             

             

            在ICON的設計中我們也常用到破圖的方法。在統一的圓角矩形中,將表達寓意的圖形局部超出,使圖標更為有空間感和靈活性。

            采用這種方式設計的圖標空間感強,層次感強烈,能使產品形象顯得更為突出。

             

             

             

             

             

            在字體中也經常運用到破圖的方法,讓字體更為生動。在破字的過程中也能引發出不同的創意點。

            大美青海字體設計我把數字9破出了方塊。而在優車尚品字體的設計中,我通過品字的破圖找到了車的聯想,讓整個字體設計的更為貼切靈動。

             

             

            3.沖出畫面,只保留局部,讓產品再大一點!


             

            有時候,我們拿到素材,在處理后發現,圖片比較平常,用戶一眼就知道是什么。這個時候,可以考慮保留局部的方式,營造殘缺美,增加時尚感。不要小看用戶的的腦補能力,當然,這種方案還是要與客戶或者產品經理及時溝通,殘缺美不是所有人動能接受的。

             

            我們將圖片進行放大,找出產品特點。選擇能撐起整個頁面構圖的位置,切除不必要的圖形,讓圖片沖出畫面!這樣處理后,頁面顯得非常富有張力,激發了用戶想看到產品整個形象的欲望,起到產品預熱的效果。

             

             

             

             

            在WATCH的預熱官網中,設計師將圖片放大,裁取有特點的部位進行展示,引導了用戶點擊觀看產品的整體形象,激發了用戶更多的去了解產品的特性。

            從版面角度看,局部放大裁切圖片,增加了留白,增加了版式率,讓整個頁面顯得飽滿,微距的效果使用戶與產品更貼切。

             

            這一篇主要理順了一下版面和圖形使用知識,并不全面,大家還是以欣賞為主??赐炅四苡袀€留白、破圖的印象就不算白看。

            設計大方向上的東西終于絮叨得差不多了,我知道其實大家都懂,就是不知道從何下手而已,下一篇來點小方向的實用東西,歡迎大家留言。

            文章來源:站酷   作者:micu設計

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

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

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


          “手把手教你設計”—12個最佳手機APP界面設計教程

          seo達人

          如何使用Photoshop來設計手機UI界面

          1. How To Set Up Photoshop For UI Design

          如果你是Photoshop的新手,又在做UI設計,這個教程教你如何使用常用的Photoshop設置來達到更好的效果。本文是以iPhone為實例告訴你怎么在UI設計中使用Photoshop,完全是初學者的教程。

           

          2. How to Design an iPhone App in Photoshop

          這篇文章將為我們介紹使用Adobe Photoshop為iPhone設計一個簡單的3頁目錄列表應用程序。并且將一步步地指導你完成這些步驟,還涵蓋了使用Photoshop設計iPhone應用程序的所有基本原則。

           

          3. Design an App Landing Page in Photoshop

          在這個教程中,我們可以看到一個應用程序著陸頁的詳細設計過程。設計師使用Tuts Android應用程序進行演示,強調其功能和優勢,利用多個CTA來完善整個著陸頁的設計。

           

          4. How To Design a Mobile App Signup Screen in Adobe Photoshop

          如果你想要設計一個像Facebook或者Instagram這樣成功的登錄界面設計,那么這個完全是你必看的基礎教程,視頻中教你如何選擇顏色,設計按鈕以及詳細的步驟來展示登錄界面的設計過程。視頻雖然是四年前的,但是里面的設計依舊不過時。

           

          如何使用Sketch來設計手機UI界面

          1. A Step-by-Step GUIde for Starting a New App Design Project in Sketch

          開始一個新的設計項目是很難的,無論你是自由設計師,還是在知名的產品公司工作,時常會感到迷茫。本文將一步步的教你如何使用Sketch開始一項新的APP設計項目。

           

          2. Food App UI ? Sketchapp Tutorial / Sketch 4 Tutorial

          視頻主要是介紹如何使用Sketch制作一個美食類APP 菜單欄UI設計,簡單易懂。

           

          3. Sketch 3 for iOS App Design Step by Step

          Sketch 3是一款優秀的矢量設計和圖形程序,很適合用于設計iOS應用程序。在這個視頻中,設計師使用Sketch 3來設計一個iPhone APP用戶界面。

          From Idea To Reality: Designing An App With Sketch And Xcode 》這篇文章是進階版的APP 設計教程,從理論到具體的例子講解,非常受益。

           

          4. Sketch App Tutorial – Build a music app landing page in Sketch

          Sketch 作為當下主流的設計工具,似乎有超越Photoshop的趨勢。本視頻介紹的是如何使用Sketch來制作一個音樂APP登錄頁設計,可以說是手把手的教程,每一步都非常的詳細細致,非常適合初學者。

          看了前面的音樂類APP登錄界面的教程, 你是否也想設計出一個屬于自己的音樂APP呢?接下來我將介紹如何通過結合Sketch和原型設計工具設計一款音樂類的APP(Prototype an music app with prototyping tool)

           

          TIMING

          這款原型音樂類的APP在Mockplus設計大賽中斬獲頭籌,設計師通過采用Sketch以及Mockplus的結合,做出了高保真原型。這個APP主要體現一種復古的視覺效果,磁帶轉動的效果是這次視覺上的設計重點。

           

          必讀的手機界面UI設計好文

          1. The 10 principles of mobile interface design

          計算機和手機是人們日常工作和生活必備的通訊工具。但在許多方面,手機往往更加強大,手機更加的私人化,與我們的聯系更緊密。鑒于移動手機和計算設備之間的許多差異,移動設計與桌面設計的設計大不相同。這篇文章詳細的向我們介紹了移動界面設計的基本原則,幫助設計師們開發移動應用程序的獨特力量。

           

          2. UI Design Do’s and Don’ts

          iOS良好的優化了用戶面設計,并提供給用戶優質且具有吸引力的用戶體驗。在開始你的iOS設計之前,一定要清楚Apple官網的關于iOS常見的設計原則,來在增強手機應用的可用性和吸引力。更多關于優秀的iOS界面設計,請閱讀《iOS人機界面指南》。

           

          3. How to use colors in UI Design

          顏色可以說在UI設計中至關重要。用的好,那就成功了一半,用不好,可能導致整個應用失敗。在你的配色方案中,最好只使用三種主色跳,使用的顏色越多。越難實現平衡。這篇文章不但提到基礎的用色知識加上實例解釋,還有常用的工具介紹。

           

          4. 10 Best APP UI Design for Your Inspiration

          每位UI設計師都夢想著做出最出色的界面(UI)設計, 能夠脫穎而出的手機界面設計則少之又少。設計師們在設計UI界面時,往往會參考來自不同設計師的設計,這篇文章列出了2017年最出色的的10個手機應用界面設計范例,給設計師們謀福利。

           

          總結

          移動設計不斷地在發展,如果你想跟上這個時代,你需要不斷閱讀和觀看高質量的教程或文章。在本文中,我收集12個最佳教程的示例來教初學者如何學習手機UI界面設計,希望你們能從中受益。

           

          原文地址:Mockplus

          作者:jongde

           轉載請注明:學UI網》“手把手教你設計”—12個最佳手機APP界面設計教程


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

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

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

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

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



          10個最新優秀手機應用界面設計實例

          seo達人


          1). YONO.MP3 mobile app – 音樂軟件

          *設計師:Anton Shmatko, Green Shark Studio, Pavel Khenkin

          *軟件介紹:YONO.MP3是一款即可欣賞音樂, 也可收聽廣播節目, 了解最新時訊和趣事的手機端音樂軟件。它會是你閑暇時搜索和分享歌曲,歌手和專輯的理想工具。

          *亮點:該款軟件采用了一個極具特色的配色方案 — 所有界面整體使用黑紅兩種顏色的對比, 經典而不失大氣。 而局部漸變色的使用, 也讓其功能和按鈕更加突出,極具層次感。而且, 軟件圖片, 按鈕和圖標的層級疊加, 也使整個界面更加的時尚柔和??傊?,軟件界面設計整體簡潔漂亮而不失易用性。

           

          2). Watering Tracker App – 生活類軟件

          *設計師:Tubik

          *軟件介紹:Watering Tracker app, 顧名思義,就是一款可以追蹤盆栽或植物的水分情況,及時提醒用戶澆水的生活類手機應用。

          *亮點:首先,這種能夠監測植物水分情況,通知用戶澆水的創意,新穎且有趣。其次,界面背景和局部添加的綠色植物圖片使整個界面更加的直觀舒適,帶給用戶好心情。 當然,作為植物監測的工具,同時也設置了顯示各株植物水分,濕度,光照之類細節信息的功能區,即點即可了解到植物的具體生長情況,簡單易操作。而且,配色方面,黑色背景搭配白色和綠色圖片及按鈕,符合整個植物主題的同時,也更易于用戶接受和使用。

           

          3). Listen – 音樂軟件

          *設計師:CD UXT

          *軟件介紹:Listen是一款致力于為喜愛不同音樂風格的用戶提供獨特且愉悅體驗的音樂軟件。整個界面設計簡潔清晰,用戶可以簡單的通過不同頻道(例如最新歌曲,電臺,主體和專輯等)和不同場景(例如駕車,運動,工作和約會等)快速的搜尋到最喜愛的歌曲。而且,軟件還特別為用戶提供了根據不同心情播放不同音樂列表的功能,更具個性。總之,喜歡閑暇時沉浸在自己的音樂世界的你,它會是你最佳的選擇。

          *亮點:軟件整體采用經典的藍色背景搭配白色字體和同色系圖片,更加柔和舒適。一系列插畫風格 的場景和頻道對應圖片,也使整個界面設計更加美觀有趣。結合明亮陰影的圖標和按鈕讓軟件對應功能更加凸顯的同時, 更能易于用戶識別使用。 針對不同部件添加的靈活交互,也能夠使用戶具有更加流暢且愉悅的體驗??傊?,它是一款以用戶愉悅體驗為基礎而設計的軟件原型,值得嘗試。(點擊這里查看原型詳情

           

          4). NightOwl Coffee – 咖啡預定軟件

          *設計師:Queble Solutions

          *軟件介紹:NightOwl Coffee是一款能夠幫助用戶根據自己的需要快速訂購各式咖啡的手機應用軟件。

          *亮點:軟件整體采用了獨具特設的插畫風:主頁添加的由明亮顏色和各種幾何元素呈現的卡通咖啡機,可愛且切合主題。純色的背景搭配上灰色插畫以及黃色圖標和按鈕,使整個軟件界面更加干凈整潔,易于用戶使用。

           

          5). Roomframes app – 管理型軟件

          *設計師:Adrain Rudzik

          *軟件介紹:Roomframe app是一款適用于iOS手機端的應用軟件,能夠幫助用戶記錄并珍藏他們所旅行過的地方的相關記憶,尤其是他們旅行中所居住過的房間的珍貴記憶。所以,從這方面來講,它是一款生活管理型手機應用。

          *亮點:軟件多處使用了框架設計,方便用戶根據不同的旅店,工作區和相關新增地點,添加對應的日期,圖片和描述。其簡單的白色背景,使用戶信息更加明顯,也易于用戶隨時回顧或與家人朋友分享這些難忘的回憶。

           

          6). iOS App Slide Car – 生活類軟件

          *設計師:Melany Roa

          *軟件介紹:iOS App Slider Car是一款專門針對iOS手機研發的應用軟件,能夠幫助用戶分類搜索各式汽車信息,并實現在線交易的一種手機端應用。同時,它也是一款能夠幫助用戶結交不同汽車愛好者的社交工具。

          *亮點:簡單純色的背景,使用戶專注于汽車圖片,價格,描述和所有者等信息。搜索界面添加各種搜索參數,用戶簡單點擊即可實現汽車信息搜索??傊?,整個界面簡單,整潔而實用。

           

          7). Karoline – 購物軟件

          *設計師:Varduhi Adami

          *軟件介紹:Karoline是一款手機端服裝購物軟件,提供了各類服裝的詳細信息和購買渠道。

          *亮點:軟件整體的粉色系配色,柔和甜美,對女性購買者極具吸引力。所有界面以服裝圖片為主,更易于用戶根據喜好挑選。而且,添加的簡單且易識別的圖標和按鈕,方便用戶搜索和查詢相關服裝細節。軟件界面豐富,例如主頁,我的賬號,我的訂單,我的購物車,要請朋友,設置,購買等,能夠滿足用戶購買時各方面的需求。所以,如果你有通過手機在線購買服裝的打算,它會是不是錯的嘗試。

           

          8).Space – 管理類軟件

          *設計師:Doeun Shin

          *軟件介紹:Space是一款能夠幫助用戶更加有效的管理日常生活的手機端應用。主要提供了兩項特色服務:早上,自動結合用戶的日常習慣,提供有用的日程管理信息和建議,例如交通和天氣情況等; 晚上,通過自動分析用戶語音日記,提供符合用戶心情的主體和提示音等等。

          *亮點:該軟件以插畫風為基礎,添加了各式動畫按鈕及圖片,直觀生動。藍色主題,漂亮舒適,無論早上還是晚上使用,用戶都不會反感。而且,軟件本身添加多樣的功能性界面,例如語音日記,心情日歷,日常服務,節日簡介等等,簡單全面??傊且豢顦O具吸引力的管理軟件。

           

          9).QuickBee – 廣告類軟件

          *設計師:Monish Mohanan

          *軟件介紹:QuickBee是一款廣告分類管理軟件,提供了生活中各個方面的信息,例如汽車,房地產,求職和教育等風方面面信息。使用者只需創建賬號,即可搜尋所需生活信息,了解流行趨勢,瀏覽各類特色廣告。

          *亮點:軟件設計簡潔,顏色搭配極佳。彩色按鈕呈現多樣的生活分類,整潔美觀。各式框架呈現流行趨勢和特色廣告,簡潔有序。矢量圖標簡單易識別。添加多種界面,滿足用戶各方面的需求。

           

          10).Wallet – 理財類軟件

          *設計師: uixNinja

          *軟件介紹:Wallet一款能夠幫助使用者理財的移動端軟件。

          *亮點:軟件使用黑色,紅色和紫色三種顏色的對比和漸變,極具特色,漂亮時尚。簡易圖標和多色幾何圖形,是軟件界面更加簡潔使用,令人印象深刻。

           

          結語

          這些就是我們所搜集的10款最新的優秀手機端軟件UI設計作品。 希望他們不僅能給你新的設計帶來靈感,同時也能幫助你把握和預計2018年手機應用UI設計的發展趨勢。

           

          原文地址:Mockplus

          作者:jongde

           轉載請注明:學UI網》10個最新優秀手機應用界面設計實例


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

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

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

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

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



          語音用戶界面設計 - 對話式體驗設計原則

          博博

          文章包括三部分:1.智能語音對話系統;2.了解 VUI 相關知識;3.語音用戶界面基本設計原則。

          最近在閱讀關于智能語音方面的書籍,將最近零零碎碎的筆記重新整理了一番,希望能讓讀者更加快捷、高效的認識智能語音方面的基礎知識點。



          智能語音對話系統


          語音交互界面是近年來最重要的趨勢之一,它不僅可以依托于智能手機而存在,而且可以和智能家居、車載導航、智能電視、智能音響等一系列產品結合到一起。越來越多的人更加頻繁地使用 Siri、Google Assistant、Cortana、小愛同學等。越來越多的應用也都已經涉及到智能語音技術。





          1、語音和語言有何區別?


          我們首先需要了解「語音」和「語言」的區別。


          語音是語言的信號載體,語音是人的發音器官發出的,承載一定的語言意義,而語言才承載人類的智慧。通俗的講,語音是天生就存在的,嬰兒剛出生的哭喊聲也算是語音。它是人的發音器官發出具有一定社會意義的聲音。其物理基礎主要有音高、音強、音長、音色四要素構成。而語言則是需要學習不斷進化的。在智能語音中,我們需要考慮的是如何確保在復雜的現實環境下,把干擾信息過濾,獲取到準確的信息。




          2、語音界面之間的關聯



          喚醒:Amazon Echo 和 Google Home 之類的語音驅動設備不斷地在等待喚醒詞(“Alexa ...”或“OK,Google ...”)從而進入喚醒狀態。


          反饋:一旦喚醒,設備會將隨后接收到的音頻發送到云端的AI平臺。 該平臺使用自動語音識別(ASR)和自然語言理解(NLU)的組合來識別用戶的意圖并將其發送到支持應用程序。 


          回復:應用程序處理請求并通過文本進行響應(如果支持則提供可視化信息)。該平臺將文本轉換為語音并通過設備播放。




          3、對話系統概述


          對話系統:能夠與人進行連貫對話的計算機系統,可以采用文本、語音、圖形、觸覺、手勢及其他方式與人進行交互,常以語音交互為主。



          而如今的智能設備能夠“理解你所說的話并且采取行動”,是兩個重要技術結合的結果:一個是自動語音識別(ASR),另一個是自然語言理解(NLU)。


          自動語音識別(ASR) — 通過聲學模型和語言模型,將人的語音識別為文本的技術

          自然語言理解(NLU)— 對用戶輸入的文本進行語義理解,包括用戶意圖識別和語義槽填充


          對話狀態跟蹤(DST) — 根據所有對話歷史信息推斷當前對話狀態St和用戶目標

          對話策略學習(DPL) — 基于當前狀態生成下一步操作

          自然語言生成(NLG) — 獲取結果文本,主要依據模板或深度生成的模型生成用戶可以理解的自然語言文本

          從文本到語音(TTS) — 結果播放給用戶聽,將自然語言文本轉化成語言輸出




          4、語音交互設計需要遵循什么原則?


          遵循合作原則:「聽者」和「說話者」為了能夠順利交談,必須互相合作。Paul Grice 提出了這個觀點,并將其分為以下4個準則。


          質的準則:說真實信息,做不到的話不要說。

          舉例:對用戶說:“有什么可以幫您的嗎?”,而實際上整個 VUI 系統僅僅能提供查詢話費余額。


          量的準則:保持對話交流簡潔,減少認知負荷。

          解釋:刪除多余的措辭。比如“請您注意聽,因為我們的選項可能已經變了”。


          相關準則:所說的話需與當前對話有關,不干擾當前任務進行。

          解釋:比如用戶想知道天氣,你給他推薦旅游的地方。


          方式準則:說話需清晰、明了,不要拐彎抹角。

          解釋:不要使用讓用戶難以理解的「專業術語」。







          了解 VUI 相關知識


          語音交互界面(VUI)指的是為用戶提供可進行語音交互的計算機平臺,它能夠實現自動化的服務并且提供完整的相關流程。而設計 VUI 的時候,設計師需要側重于用戶的語音交互過程,并設計出相應的語音應用系統。由于 VUI 是面向用戶的交互界面,因此滿足用戶的實際需求是至關重要的。




          1、語音用戶界面 VUI 簡史


          20世紀50年代:貝爾實驗室建立了一個單人語音數字識別系統。


          20世紀60、70年代:語音數字系統的這項研究仍在不斷拓展可識別的詞匯,并且致力于實現“連續語音”的識別。


          20世紀80年代:技術進步讓語音識別更具實用性,使日常語音的識別成為可能。


          20世紀90年代:誕生了第一個可行的非特定人的語音識別系統。簡稱 IVR


          21世紀初期,IVR 系統成為了主流,任何人都可以通過一個普通的固定電話和語音進行股票詢價、機票預定、銀行轉賬、處方藥品預定、本地電影排片查詢以及收聽交通信息等。




          2、那什么是 IVR 系統?


          交互模式的語音應答,簡稱為 IVR。我們后續簡稱為:交互式語音應答(IVR)系統


          它可以通過電話線路理解人們的話并且執行認為,一般都廣泛的應用在運營的客服方面,即使是現在三大運營上的機器客服還是采用了這種語音應答的方式。但是通過電話撥號的方式開始語音的問答還存在很多的缺點,例如只能應用在單輪任務的問答,交互方式比較單一,不能進行中途打斷等缺點。


          IVR,即語音增值業務,是移動運營商由2002年開始啟動的業務。移動的 IVR 分為兩大品牌:音信互動和娛音在線,聯通的 IVR 品牌為聯通。





          3、IVR 系統設計與移動設備


          21世紀初,IVR 系統已逐漸普及。起初“按鍵+語音”的混合形式(請按“1”或者說“1”),是很常見的模式,比如10086的查詢功能。人們創造了 IVR 系統,希望它可以自動處理一些事物,這樣客戶就不會總是需要找一個真人來解決問題了。相比與真人客服交談,很多用戶實際上更喜歡使用 IVR 系統,因為他們可以花很長時間反復咨詢信息而不會覺得他們是在“打擾”一個人類客服。


          移動 VUI 設計需要注意:


          1、確定它是否需要一個視覺化的呈現,比如一個虛擬角色。


          2、確定你的 VUI 在什么時候允許用戶說話?可以被打斷嗎?是否需要按鍵功能?




          4、VUI 的優勢是什么?



          速度快:語音輸入的方式比手動輸入快很多,同樣的時間可以輸出更多的信息。


          釋放雙手:釋放雙手與機器進行交互,比如駕駛狀態下,通過語音輸入完成用戶需求,安全和便利。


          直覺性:說話更自然,更容易??梢灾苯油ㄟ^語音輸入的方式來表達你的意愿。


          同理心:語音包含了語氣、音量、語調和語速,且傳遞了大量的感知信息,不僅僅是文字那么簡單。




          5、哪些場景不適合使用 VUI ?


          公眾場所:開放的環境辦公,比如:咖啡館、圖書館等。環境影響因素較大,不利于用戶語音的錄入和接收。


          不適應對計算機說話:并不是每個人都喜歡對計算機大聲說話,即使是在私人空間。


          更喜歡打字:許多人習慣每天在手機上花幾小時,大部分的時間都是在打字。


          隱私安全:比如身份證、銀行密碼等。GUI 比 VUI 更加適合高效安全輸入。




          6、哪些場景適合使用 VUI?


          使用場景需要騰出雙手,比如車載導航、智能音響。


          作為家庭的控制中心,打造智能家具居控制的切入點。


          語音記錄病歷,不管對醫生來說還是患者來說,都是提高看病效率的很好助手。


          幫助用戶簡單記錄、查詢、照顧用戶的作息時間等。




          7、VUI 設計師的工作內容


          VUI 設計師思考的是在系統和終端用戶間,從開始到結束的整個對話過程。他們思考正在解決的問題以及用戶需要什么來達成他們的目的。VUI 設計師在項目中扮演著非常重要的角色。通常會參與項目全程的工作,并與團隊合作完成在技術、體驗、設計上的優化。



          如果 VUI 需要與后端系統進行交互,他們要考慮需要處理的請求。如果流程中有人的因素,比如客服需要交接,那么設計師需要考慮如何進行交接,以及如何培訓客服。







          語音用戶界面基本設計原則



          1、對話式用戶界面


          對話式設計定義:思考如何與 VUI 系統進行一輪以上的交互。


          因此,需要設計一輪以上的對話,并思考用戶接下來可能會做什么。不要強迫用戶展開新一輪對話,而是去嘗試了解用戶的意圖并允許用戶繼續交談,同時有必要為用戶近期所說的話保留歷史記錄。





          2、多模態界面


          與 IVR 系統不同的是,在移動設備上我們可以增加一個可視化組件。


          比如在向用戶傳達信息、確認信息,以及告訴用戶什么時候輪到他們說話等。(比如:百度地圖的小度,他會告訴用戶什么時候可以說話,目前所處的狀態,說完之后給予的反饋)


          如果有一個可視化組件,則會讓移動設備增強優勢。允許用戶同時使用語音和屏幕進行交互。(手機上虛擬助手,有些雖然以語音交互為主,但是在用戶的智能手機上也會有一個配套的APP)。





          3、設定用戶期望


          優秀的對話式設計不僅僅是精心制作的友好提示。Google 交互設計師 Margaret Urban 建議:如果你不能理解答案,就不提問。


          “當某個人成功完成了一次語音交互,伴隨著腦內咖(endorphin)的升高,用戶會獲得一種成就感和滿足感。此時正是一個絕佳的時機來告訴用戶”你做的很棒,要不要再試試這個?”


          是否讓我們想到了網頁登陸驗證的時候,需要完成一塊拼圖,但是你再慢他也告訴你超越全球96%以上的人。


          “如果你已經設計了一個設置鬧鐘的功能,但是你沒有提供用戶取消設置的方式,這就像給人一條浴巾但是沒給他香皂一樣。如果你設置了可以完成某項任務的語氣,請務必考慮與之相關的任務。”





          4、確定策略時需注意的幾點


          輸入確認:必須確保用戶感覺到自己是被理解的,同時有助于讓用戶知道,什么時候 VUI 不理解他們所說的話。


          1、確認錯誤的后果是什么?比如:預定錯誤的航班?制定錯誤的任務?播放錯誤的歌曲?


          2、系統將如何反饋?比如:會有音頻提示嗎?是否有視覺反饋嗎?比如Amazon Echo上的光環。


          3、是否擁有屏幕?比如:車載導航、手機屏幕、智能手表。


          4、選擇合適的確認形式?比如:明確確認、含蓄確認、混合式的確認。




          5、確認策略的兩種方案


          顯性確認:重要信息,需強制用戶確認信息。


          隱性確認:讓用戶知道他的話接收到了,但不需要他們確認。




          6、確認信息的方式




          三級置信度:


          系統將在一定的閾值內,以明確的形式確認信息,拒絕較低置信度的信息,并以隱性確認來確認置信度超過80%閥值的信息。


          1、80%以上,使用隱性確認。如果是誤識別代價高的話,考慮采取顯性確認。

          2、45%-80%,使用顯性確認,以明確的形式確認信息。

          3、45%以下的,拒絕確認信息。


          舉例:用戶:幫我再買一份口香糖。

          VUI:(置信度大于80%,使用隱性確認)好的,已經為您再購買一份口香糖。

          (置信度45%~79%,使用顯性確認)您是想再多買一份口香糖,是嗎?

          (置信度小于45%)對不起,我沒有聽清您講的話,您想買什么?



          隱性確認:


          1、只使用隱性確認,不要求用戶進行操作。

          2、將「答案」和連同「原始的問題的一部分」一同回復,讓用戶知道系統識別到的是哪個問題。

          3、當置信度高的時候,也可以不用連同問題,這樣更自然流暢。



          非語言式確認:


          1、僅需行動反饋,而不需要口頭響應。

          2、通過視覺確認,比如小米智能家居,可以通過語音交互打開燈光、電視、窗簾等。

               a、如果沒有延遲,沒必要再對其回復。

               b、如果有3-5秒延遲,需進行回復,讓用戶知道并不是設備沒有聽到她的聲音。

          3、使用一個“聲音標識”,即簡短的、有識別度的聲音。這樣有助于幫助用戶快速知道他們已經到了哪一步。



          通用確認:


          1、在某些對話式系統中,最好不要詢問用戶具體說了些什么 - 哪怕是隱性確認。

          2、通用確認可以讓用戶分享更豐富的體驗,因為這類反饋能適應用戶輸入的各種信息,并讓對話繼續進行。通常人與人之間的對話,也不會句句必回復,也會有 “嗯” “哦 ”“啊” “然后呢”等。 



          視覺確認:


          1、確認一個項目清單,通過屏幕顯示進行溝通會更加有效。人的記憶有限,通常用戶一次性不能記住超過大約7個聽覺項目。

          2、用來確認用戶的選擇。用戶可以通過說話或按下按鈕來回復。而 GUI 的反饋指令更加明確。




          7、判斷你的 VUI 適合哪種類型


          目前大多數的 VUI 系統都是“命令 - 控制”模式,這意味著當用戶想要說話時,必須給出明確的指示。


          1、用戶可以隨時向系統詢問 / 發出命令嗎?


          2、是否參與一個有明確開始和結束的封閉式對話?




          8、命令-控制模式



          喚醒系統方式:按鍵通話(車載導航、Siri等)、直接進行關鍵詞呼叫(“OK Google”“小度”等喚醒詞)。


          喚醒系統反饋:系統檢測到用戶說話完成,通常會使用某種非語言的音效進行提示,然后做出相應處理(比如:“?!钡囊宦暬蛘咭曈X反饋:聲波線、點狀動效、設備逐漸發光等)。


          系統聆聽時間:用戶說出喚醒詞或按下按鈕后,系統保持聆聽狀態的時長,根據經驗來看,10秒 是個不錯的起始時間段。



          喚醒響應時間與反饋方式


          喚醒響應時間與喚醒反饋方式有關,不同喚醒反饋方式下,最佳響應時間不同:


          1、當喚醒反饋為"燈光"反饋時,喚醒響應速度越快越好,在200ms時,用戶響應舒適度最高(對響應時間評價為剛剛好的用戶比例),73%的用戶對速度滿意。


          2、當喚醒反饋為"燈光+音效"時,喚醒響應速度的舒適時間為300ms左右,76%的用戶對速度滿意。


          3、當喚醒反饋為"燈光+人聲"時,喚醒響應速度的舒適時間為500ms左右,74%的用戶對速度滿意。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗



          喚醒等待時間體驗感


          用戶請求及反饋階段響應時間對等待體驗的影響:


          1、1250ms以內是用戶認為響應速度較優的區間,其中650ms為最佳體驗值。在450ms時,少量用戶覺得響應速度太快了,用戶會感覺到緊迫感和壓力,難以接受。


          2、在1450ms時,有53%的用戶開始感覺響應有延時,但仍能夠接受。


          3、從2150ms開始,有20%的用戶認為音箱響應太慢,不能夠接受。我們認為20%的用戶不滿意,已經不足以被稱為一個優秀的產品。


          數據來源:百度人工智能交互設計院智能音響時間測試實驗




          9、對話模式


          1、不要強迫他們不斷地去表明他們將要開始說話,自然地對話技巧進行話輪轉換。


          2、通過更精細的設計,使 VUI 系統可以處理一些常見的微妙表達方式。(用戶處理完畢說“謝謝”,你可以設置系統忽略這種情況,或回復“不用客氣”,而不是提示或者報錯。)


          3、不要問你都無法理解的反問句。


          4、打破話輪轉換的情況,用戶在系統說完之前就進行提問。


          5、在命令 - 控制模式和對話模式之間進行切換。喚醒之后進行自然的對話。




          10、對話式標識


          使 VUI 更加人性化、更具吸引力,對話式標識是讓用戶了解交談進展以及進展情況的重要方式,當系統在對話中使用了一些基本的對話禮儀后,用戶的參與度會更高,并且會以同樣的方式進行回復。



          反面案例:

          虛擬助理:你昨晚你睡了幾小時?

          用戶:大約7個小時。

          虛擬助理:你昨天吃了幾份水果和蔬菜?

          用戶:大概有4份。

          虛擬助理:你昨晚吃藥了嗎?

          用戶:吃藥。

          虛擬助理:再見。


          正確案例:

          虛擬助理:我會問你幾個有關你身體健康的問題。第一個問題,昨晚你睡了幾小時?

          用戶:大約7個小時。

          虛擬助理:不錯。你昨天吃了幾份水果和蔬菜?

          用戶:大概有4份。

          虛擬助理:了解了。最后一個問題,你昨晚吃藥了嗎?

          用戶:吃藥。

          虛擬助理:好的,暫時就這些了,我明天還會再問你的,回見。




          11、異常處理


          “當你與人類交談時,永遠不會出現不可恢復的錯誤狀態?!?

          — ABI JONES, Google 設計主管


          “你偶爾因為犯錯和不知道某些事情導致評分降低造成的影響,比你每次做對一件事情重要百倍?!?nbsp;

          — 英特爾語音助手部經理 Pilar Manchon


          如果處理的得很好,錯誤情況就不會影響用戶,你可以讓用戶回到正常流程,并順利完成任務。但如果處理不好,用戶不僅這次無法完成任務,他們以后都可能再也不用你的產品了。


          一個好的設計師應該知道,你不能只設計正常的情況, 你還要對出錯的情況做出設計。這對于 VUI 設計來說尤為重要,因為出錯情況是家常便飯。



          未檢測到語音 / 檢測到語音,但沒有識別


          1、什么情況下可以明確說出來?

               a、你的系統只使用語音

               b、用戶沒有其他的回復方式

               c、必須要用戶回復后,系統才能繼續進行任務 / 對話


          2、什么情況下可以什么都不做?

               a、用戶可以通過其他方式進行下一步操作(比如通過按鍵選擇)

               b、就算什么也不做,也不會中斷對話

               c、系統沒有理解時,用視覺信息提示告訴用戶,比如:提示列表等

               d、利用虛擬表情形象反饋,疑問、微笑等動作表達



          其他異常處理


          1、當出現:語音被正確識別,但系統無法處理

               a、程序對關鍵屬性理解不明,寫了錯誤的回復

               b、沒有針對一些情況的回復

          解決:對用戶可能會說到的所有情況做更完善的預測,通過數據收集來避免此問題


          2、當出現:部分語音識別錯誤

               a、什么也不去處理,因為這不是你想要的結果

               b、匹配錯誤的行為

          解決:可以用 N-Best 列表來智能匹配最有可能的識別結果


          3、增強錯誤提示

               a、當需要用戶說話的時候,使用這種增強錯誤提示策略

               b、必要的情況下,進階錯誤行為提示可以更為詳細,并提供更多的幫助

               c、如果你正在設計一個可以提供真人輔助的系統,可以為錯誤數量設置一個閾值,當達到該閾值時,將用戶轉移給人工助手  




          12、新手和專家用戶


          如果你的用戶會定期使用你的系統,那么在設計中就需包含不同的策略。


          “務必確保你的目標不是簡單的訓練你的用戶,應當適應用戶的行為,而不是用已有的命令讓用戶感到厭煩?!?

          — Google 交互設計師 Margaret Urban


          我們在 VUI 設計上該如何更好的交互設計?


          1、減少冗長指令以及其他引導提示。通過計算 APP 使用次數和頻率來確認是否切換模式。


          2、縮短解釋性提示。但是請務必使用“對話式標識”。


          3、啟動效應。



          什么是啟動效應?


          指某人受到某種特定的刺激后(例如一個詞語或者圖像)會影響他們對之后刺激的反應。首先讓用戶預先知道你會問他們幾個確定數量的問題,為后面會發生的事情提供了暗示,用戶就會知道如何去準備。比如以下情況:


          1、當給人們呈現一個還沒完成的草圖,隨著這個草圖越來越完整,人們就越來越辨認出這張圖畫的是什么。之后,再給他們呈現其他還沒完成的草圖時,他們會更早辨認出這張圖畫的是什么;


          2、如果當給人們呈現一組漢字,假如里面含有 “河” 這個字,隨后讓他們寫出部首是 “氵” 的字時,這些人回答 “河” 的幾率會更大。



          談談自己對新手和專家用戶的理解


          01、專家型用戶:代表老用戶且愿意探索你的產品或服務,有著很大的包容度。并會積極提出各種改進的建議和享受產品帶來的驚喜感。


          02、新手:什么叫新手,就是剛剛下載你的產品,準備使用的用戶,對產品功能都還處于陌生摸索的階段。他們不會因為你的技術而使用你的產品,使用你的產品目的是完成某項任務。他們有興趣使用更高級更復雜的產品,但卻不愿意接觸全新的東西,要想讓他們認可,那么產品就必須足夠簡單。




          13、持續跟蹤上下文


          持續跟蹤信息并不容易,但如果不跟蹤這些信息,你的 APP 就只能做單輪的對話行為。


          指代:用兩個不同的詞語指同一個東西。比如: “他”  “哪些”





          14、幫助和其他通用部分


          我們在設計 IVR 系統時,我們會確保每個狀態都包含一組通用組件:重復、主菜單、幫助、操作和再見。





          15、延遲


          產生原因:糟糕的連續性能、系統處理進程、數據庫訪問


          處理方式:告知用戶關于延遲的情況(比如:“請稍等,正在查找相關記錄”)、非語音和視覺的提示(比如:延遲提示音以及加載狀態)、可視化效果(比如:加載中的動態圖標)


          處理細節:延遲的時長可能為0~10秒,在沒有延遲的時候最好也插入幾秒的延遲。因為如果在系統說“請稍等”之后,緊接著就繼續對話的話,會給用戶帶來異樣的感受。很多設備針對喚醒詞采用了本地化識別的方式,這樣喚醒的會更快。




          16、消除歧義


          問題來源:用戶只會提供執行命令所需的部分信息,而沒有提供所有的細節。


          舉例:用戶可能會詢問某地的天氣,而很多地方都有叫這個名字的地點,諸如“湖南路”那邊的天氣怎么樣。


          解決方案:


          1、依靠任何已知的信息來確定答案,而不是再次詢問用戶。


          2、根據上下文線索進行判斷。


          3、反問用戶進行確認,確保系統對用戶同一個問題的各種各樣的回復形式都有良好的適應性。


          4、指令不明確。比如“給胡歌打電話,撥打工作電話還是家庭電話?”,系統以隱性的形式對名字進行了確認,系統對這個名字有很高的置信度,并且僅有一個胡歌。


          5、用戶回答的信息超初了你的 VUI 系統可以處理的范圍時,你可能需要縮小范圍消除歧義。




          17、設計文檔


          我們需要制作:示例對話(sample dialogs)和會話流(dialog flow)文檔外其他一些情況。例如:在設計過程中,你還需要創建提示列表、完善對話每個狀態指定完整的語法規則等等。





          18、無障礙設計


          “一開始,我就很討厭屏幕閱讀器的工作方式。為什么它會被設計成這樣?當以視覺的方式來展示信息沒有任何意義時,屏幕閱讀器只是簡單地將文字轉換成音頻。所有那些應用花在創造完美用戶體驗的時候和精力此時都變得沒有任何意義,甚至有的給盲人用戶帶來了更糟的體驗。”    — 克里斯·莫里(Chris Maury)





          19、典型 VUI 項目交付項內容


          示例對話:系統和用戶之間可能產生交互行為的預設對話,對話看起來就像電影劇本一樣,包括兩個主要角色之間來回往復對話。


          流程圖:展示下一個狀態分支的所有方式,不一定要羅列所有的交互或示例對話,也可以是功能的分組、文本的分組等。


          提示列表:如果沒有屏幕可以使用配音演員或語音合成來播放提示列表。


          產品原型:如果這是一個多模態產品,有屏幕、支持觸摸交互。




          參考文獻:

          《語音用戶界面設計:對話式體驗設計原則》-【美】Cathy Pearl(凱瑟 彼爾)

          語音交互入門:從概念,原理到如何設計VUI產品 - 杜松

          AI時代的語音設計經驗漫談 - 少夫白杰

          語音用戶界面設計 - 對話式體驗設計原則 - walle_x






          文章來源:站酷   作者:Sabaku_no_Gaara

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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