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

          首頁

          設計語言 - 側邊導航欄/分頁

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

           

          不管是做設計(感性)還是設計規范(理性),都是仁者見仁智者見智的,都很主觀。我是想闡述出自己的想法供大家參考,文章中的數值也不是固定標準,還是希望大家根據不同的項目需求,去解決不同的實際問題。



          目錄


          1.下拉菜單

             1.1 了解側邊導航欄

             1.2 繪制矩形框 

             1.3 文本行高

             1.4 層級劃分

             1.5 確定距離


          2.分頁

             2.1 了解分頁

             2.2 繪制普通分頁

             2.3 繪制首末分頁

             2.4 繪制跳轉分頁


          3.步驟條

             3.1 了解步驟條

             3.2 繪制步驟條




          1.1 了解側邊導航欄


          側邊導航欄就是固定在側邊或從側邊劃出的導航欄,一般應用在企業網站的觸發型導航欄上,或后臺頁面/系統的左側功能性導航欄上。側邊導航欄的方向是根據業務需求來做調整的,方向在那邊就往哪邊對齊。我們先了解一下側邊導航欄的樣式。

          undefined設計師的對設計的理解和審美決定了周圍要留多少的空白。



          1.2 繪制矩形框


          矩形框的高度可以隨著屏幕高度的變化而變化,所以不需要考慮。那只定義矩形框的寬度就行了,寬度分別是:小(240px)、中(280px)、大(280px)。當我們決定采用哪種尺寸后,就要定義矩形框與內容之間的距離了。下圖所示的例子是以中等尺寸來做參考的。

          undefined



          1.3 文本行高


          當我們繪制好矩形框,就要往里填內容了。文本行高上一章已經講過了,就不多說了。文字的行高是由鼠標狀態(Hover)的高度來確定的,Hover的高度有多高,文字的行高就有多高。但要注意的是,側邊導航欄的文本左右多留一下白,不能使導航欄看上去太緊湊,給人感覺太壓抑,就會顯得不是很美觀了。

          undefined



          1.4 層級劃分


          因為側邊導航欄中有樹形結構,一個主級別可以分散為多個子級別,所以就需要劃分一下層級。劃分層級的方法也有很多,可以改變字號、改變顏色、改變字形、改變距離,那我用的方法是改變距離。采用哪種方法還是要看具體需求,像那種需要想突出層級且對比強烈的需求,可以采用改變字號和改變字形(加粗)。下圖中顏色越深層級越高,另外要注意的是,大類也有層次,越往上層級越高。

          undefined



          1.5 確定距離


          當我們把矩形框繪制好,文本也填進去后,就要確定每一個層級的距離了,我們要做出1>2>3的感覺出來,細微調整每個層級的間距,使它們的差異突顯出來。確定距離指的是每個層級左側的距離,這就像樓梯一樣,在上層的樓梯往往優先級是最高的。層級1(收藏夾)與層級2(藝術類)之間多留了4px的空白,目的是為了突顯主級別與子級別之間的差異,稍微強化了一下主級別。

          undefined

          來看一下最終效果吧。



          2.1 了解分頁


          側邊導航的講完后來講講分頁,分頁有三種樣式:普通分頁、首末分頁、跳轉分頁,名字是隨便起的,能理解什么意思就行了,來讓我們了解一下它的樣式。

          undefined



          2.2 繪制普通分頁


          接下來我們學著畫一下它。我把所有的分頁分為三種尺寸(大中?。謩e是32px(?。?6(中)、40(大),每一個小按鈕的曲率分別是4px(小)、6px(中)、8px(大)。每個小按鈕之間的間隔我用的是4px,也可以用8px,4px雖然更容易誤觸,但視覺效果要比8px好很多。

          undefined當然了以上數值也不是絕對的。尺寸、曲率和間隔都是需要根據項目需求與設計師自身審美來決定的。



          2.3 繪制首末分頁


          首末分頁就是在普通分頁的基礎上加兩個按鈕,分別是“跳轉到首頁”和“跳轉到末頁”。只要注意把“數字按鈕(分頁)”與跳轉首末頁按鈕”按優先級分隔就可以了,要把控好這首末按鈕與數字按鈕之間的距離,距離過短容易誤觸,距離過長會破壞整體性。

          undefined



          2.4 繪制跳轉分頁


          跳轉分頁是在首末分頁的基礎上加上“總頁數”與“跳轉至指定頁數”這兩個功能。跳轉分頁前端顯示總頁數,后端顯示跳轉至指定頁數。所有按鈕模塊的間隔都成倍遞減,這樣不同分頁的功能,區分就會更明顯一些,而且它們之間也有隱性的關聯。

          將分頁組件與其他組件組合起來看一下最終效果。圖片壓縮效果不是很好,要與實際效果(原始比例)差很多。



          3.1 了解步驟條


          步驟條相對比較簡單,這里穿插一下講了吧。步驟條的樣式比較多,但他們的繪制方法都大同小異,我只單拿出一個來講,就不一一的進行講解了。

          undefined



          3.2 繪制步驟條


          步驟條其實不難繪制的,注意對象和元素之間的距離就可以了。留的距離也要講究一些,要勻稱不能出現左面留太多而右面留太少的情況,具有關聯性的部分距離差異不能太大。另外就要考慮視覺平衡性的問題,不能一味的采用水平或垂直居中。只要熟練把控好距離,知道什么需求下留多少的白,那繪制不同樣式的步驟條,也會顯得游刃有余,做出的東西也更自然舒服體驗也更好。

          做設計要精益求精,把每一個像素點都要考慮到并合理運用它們。

          藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          設計心法 談談事理學-認識論

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          目錄


          引言

          一、對設計的認識

          二、設計觀念

          三、設計原則

          四、設計思維


          引言


          前段時間在學習python語言的時候,我了解到在程序界有一種叫做“算法”的存在,其實“算法”就像武俠片里面的內功心法,內功心法越好就能激發越強的武功招式。在程序編寫時大部分的程序語言都可以使用“算法”來優化程序的流暢度。比如,當大量用戶同時使用程序時,“算法”就可以合理配置服務器資源防止服務器的崩潰。在設計的過程中其實也存在這樣的通用心法,事理學的認識論其實就有點類似于“算法”,所以這一期我的分享題目叫《設計心法》。


          一、對設計的認識

           

          ·內部因素與外部因素:

           

          設計中我們可以將設計問題化分為外因(人,時,地,事)與內因(技術,工藝,材料等),在上一期文章中我們談到設計可以定義為:人有目的創造活動,往往現代生活中設計的目的不是唯一的,這就好比佩戴手表時我們可能不僅僅是為了查看時間,還可能是為了在潛水時防止手表被泡壞。因此,物“應該是什么樣”表現的是對不同人與環境的適應,就如同生物多樣性表現了對環境的適應一樣。

          Image title


          除卻外部的環境因素,我們還要考慮的制作產物時所需要技術、工藝、材料、形態、結構。內部的因素其實代表了一種可能性,是一種可變通的元素組合。比如同樣是防水手表,我們可以采用耐浸泡的材料,也可以運用防水工藝。(ps:在《事理學論綱》中內部因素沒有成本,但是小胖認為成本其實也算是設計中應該考慮到的內在因素,所以在這里我也將其歸納了進來。)

          Image title


          總的來說外部因素代表了限定性,而內部因素代表了可能性。設計的過程中應當了解外部的需求與限定,然后組織內部結構。在內外因素之間找出一個契合點,設計就發生在這個契合點上。

           Image title

          ·目標與目標系統

           

          窗簾、太陽鏡、電焊面罩、等等這些看似風馬牛不相及的物品,卻有著共同的目標—— 遮擋強烈的光。在實際設計過程中目標往往是抽像的,而目標系統是具體的。目標系統既包含特定的外部因素的限制也包含內部因素的選擇。

           Image title

          同樣是手表,同樣是為了看時間,從技術到外觀在使用因素的限制下,也就決定了其品種的千差萬別。建立目標系統是對實現目標的外部因素限制的研究過程,也是從外部角度觀察、分析、歸納實現目標條件的認知過程、敘述過程。設計師應將抽象的目標轉化為目標系統,完善的目標系統才是優秀設計的創意源泉。

           Image title

          ·“使用”的意義

           Image title

          在“使用”物品的過程其實包含兩個方面,一是使用者——人的動作:二是被使用者——物的動作。人的動作是人生理結構和生存需要指示下的延伸,在動作的引導下人的大腦對外界的刺激作出反應,留下印象,形成經驗,儲存信息,成為意識。當再次遇到類似的問題是,人會逐漸總結經驗并形成知識的遷移。物的動作是人使用過程中人的動作在物上的反應,這就包括器物的變形、移動、或是其他信息(比如聲音,燈光等等)。

           

          在人使用物的過程中,為了使物更加符合人意志,自然要對物進行改進,使物更加適合人的生理結構和需求目標。比如在原始社會原始人類為了更有效地的獲取獵物,在原有的石頭上進行敲擊加工使之更加符合使用習慣。在“使用”中人和物不斷磨合,這一過程實則就是產品迭代的過程。“使用”的意義在于它是一種積極的思維方法,是一種能啟發創造的設計起點。Image title

           

          ·方式與合理

          Image title

          方式在設計中不是指的具體的某一個動作,而是使用時產生的一系列動作,人的行為與各動作相對應的物與物組成的環境組成了一個特定的社會現象,我們稱為“方式”。物是動作對象,環境是行為條件。同樣,動作使物有用行為使環境具備社會意義。

           

          合理是指合乎客觀規律,合乎時代觀念,合乎社會準則,合乎人類理想。合理是人類經驗、教訓的總結,是認識的升華、沉淀;是道德、行為、情操的法庭;也是在歷史的基礎上對未來的規劃。當人在追求欲望的過程中,合理更像是一種約束人類行為的標準,通過合理的約束來引導人類的行為方向。

           

          綜上合理的使用方式其實是設計的原則,通過合理的評估系統和反饋可以制約不合理的設計行為,在的設計活動中,以“創造合理的生存方式”作為第一原則才能促進人類往更好的方向發展

           

          二、設計的觀念

           

          ·設計生態觀

           

          自然界的生態系統是一個封閉的、可以自給自足的系統。在此系統中沒有開始也沒有結束,任何一環的在生態環境中都扮演著至關重要的角色。反觀現代設計生態卻并不存在這樣的循環。

           Image title

          現代經濟學被認為是研究人類需求與稀缺資源之間關系的學科。經濟學中的生產者(企業)將有限的資源整合變成可盈利的“商品”,而消費者是在有限收入下實現“效用最大化”的行為個體。消費者購買行為發生后進入“使用”階段,直至使用的物品失去使用價值?!拔铩睆馁Y源直到被銷毀經歷了四個階段,這四個階段分別是產品、商品、用品、廢品。

          Image title


          現代市場經濟下人的物質需求被極大滿足,市場經濟的增長依賴消費增長,反觀人類的自然資源總體上卻在急劇減少。設計者除了的滿足生產者、消費者、使用者的需求之外,還應該思考如何將“廢品”分解利用形成設計生態閉環。

           

          ·設計美學觀

          Image title

          人類文明的發展大致經歷了三個階段,這三個階段即古典主義、現代主義、和后現代主義。這三種文明的美學觀也可稱之為再現主義、表現主義和共生美學。這三種美學觀點的發展是相互交錯的,只是主體上有區別。

           

          當代設計和藝術是以思考、感召、聯想的手法,以同觀眾、使用者共同創造為目的,以多種美學觀重疊、并行、綜合為基礎的共生美學觀為審美取向。技術與藝術共生,技術與各種美學觀共生,這就是當代設計——后現代主義的美學特征。

           

          三、設計原則

           Image title

          ·有限理性原則

           

          在藝術的創作中美可以被分為很多種,梵高的油畫是美的,米開朗基羅的雕像也是美的。其實任何事物,任何美都是相對的,在不同的時代背景和使用場景下我們對于美的定義都不同。

           

          類比設計,衡量設計的標準不是對與錯,而是相對滿意與不滿意。設計應該遵循“有限理性”的原則,即設計的目的并不是尋找“最優解”,而是“滿意解”?!白顑灮碚摗敝贿m合作為設計中的一種技術方法使用,而且只有當目標屬性十分明確,可以用數量化衡量時才可運用。

           

          ·適應性原則

           

          上文說過設計就發生在內部因素和外部因素的“關系”中,而這其中的“關系”其實就是適應的過程,設計還可以理解為是以一定的目的、一定的方式來達到與客觀條件內部關系相適應的人為適應系統。設計的內部因素、外部因素和設計目的是設計過程中應當遵守的具體內容。

           

          多數時候外部因素在適應系統中是人們行為方式的主要決定因素。系統的復雜行為主要是其所處外部的復雜性的表現,而內部因素少量限定屬性的制約,這才是完整的適應性系統。

           

          四、設計思維

           

          設計思維實際上是圍繞著“問題”來展開的。所謂“問題”是指設計各要素交織在一起時,所產生的關系矛盾。好的設計一定是“問題”的良好協調統一體。研究“問題”的方法通常是通過觀察問題——分析問題——歸納聯想——評價修正的模式來鞏固的。

          Image title


          觀察問題其實是在用戶調研中最常用的方法,定性調研中研究人員常常會使用觀察法來記錄用戶的行為,之后用研人員會使用“五問分析法”來抽象出用戶的真實需求。其實在事理學中也提出了類似的觀點。


            觀察法的幾個原則:


            1. 目標明確——從現象到本質(五問分析法)

            2. 忠實于對象——感官+體驗

            3. 擴延、比較——搜尋同類比較共性

            4. 由表及里、去粗取精——總體到局部再到整體

           Image title

          需求分析中有一塊人物畫像的部分,其中情景分析和故事板就是分析人物使用產品的外因和內因,撰寫故事版時不妨按照以下路徑來展開。

           

            分析問題中應當結合設計中的基本路徑來分析:


            1. 尋找“物”存在的外在限制——人、環境、時間、條件等制約。

            2. 析出“物”的內因與外因的邏輯“關系”——尋找現象依據

            3. 比較相似“物”的內、外因的關系——透析共性基礎上的個性

           

          具體的歸納、聯想和創造都應該明確設計“目的”,結合實際中遇到的外部因素來具體創意創造。最后我們通過建立評價體系,優化設計產物在設計生態中的體驗和循環。

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

          設計師必須學會的卡片式設計!

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

           微信圖片_20190318164322.jpg微信圖片_20190318164342.jpg微信圖片_20190318164344.jpg微信圖片_20190318164347.jpg微信圖片_20190318164350.jpg微信圖片_20190318164352.jpg微信圖片_20190318164355.jpg微信圖片_20190318164359.jpg微信圖片_20190318164402.jpg微信圖片_20190318164404.jpg微信圖片_20190318164407.jpg微信圖片_20190318164410.jpg微信圖片_20190318164413.jpg微信圖片_20190318164416.jpg微信圖片_20190318164419.jpg微信圖片_20190318164421.jpg微信圖片_20190318164424.jpg微信圖片_20190318164427.jpg微信圖片_20190318164429.jpg微信圖片_20190318164432.jpg

           

          藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          好看的天氣類界面,您不能錯過!

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          天氣類界面欣賞!微信圖片_20190311090105.jpg微信圖片_20190311090130.jpg微信圖片_20190311090159.jpg微信圖片_20190311090202.jpg微信圖片_20190311090127.jpg微信圖片_20190311090134.jpg微信圖片_20190311090137.jpg微信圖片_20190311090141.jpg微信圖片_20190311090144.jpg微信圖片_20190311090147.jpg微信圖片_20190311090150.jpg微信圖片_20190311090153.jpg微信圖片_20190311090156.jpg微信圖片_20190311090207.jpg微信圖片_20190311090209.jpg微信圖片_20190311090212.jpg微信圖片_20190311090215.jpg微信圖片_20190311090217.jpg微信圖片_20190311090221.jpg微信圖片_20190311090224.jpg微信圖片_20190311090227.jpg微信圖片_20190311090230.jpg微信圖片_20190311090235.jpg微信圖片_20190311090243.jpg微信圖片_20190311090255.jpg微信圖片_20190311090311.jpg微信圖片_20190311090316.jpg微信圖片_20190311090320.jpg微信圖片_20190311090326.jpg微信圖片_20190311090328.jpg微信圖片_20190311090332.jpg微信圖片_20190311090334.jpg微信圖片_20190311090337.jpg微信圖片_20190311090240.jpg微信圖片_20190311090246.jpg微信圖片_20190311090248.jpg微信圖片_20190311090252.jpg微信圖片_20190311090302.jpg微信圖片_20190311090306.jpg微信圖片_20190311090309.jpg

           

          藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          字體用的好,感覺不會少!

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里


          在設計中,字體的樣式往往起到輔助文案傳遞的作用,所以如何在不同的設計風格中用好字體尤為重要。字體如果用得好,在設計中常常會給讀者所需要的感覺,這里我們例舉幾種常見的感覺:


          目錄

          1.「注」入重量感

          2.「空」出高級感

          3.「圓」有親近感

          4.「裝」出華麗感

          5.「質」換畫面感

          6.「寫」出文藝感

          Image title

          一.「注」入重量感

          突出重量感是大多數設計師常用的技巧,在設計中,為了提高文案或者標題的視覺層級,很多設計師往往會從字體的重量感進行思考,給字體注入內容往往能加大字體視覺重量,字體的重量感也就是版面中的“存在感”,“存在感”一旦提高,視覺層級也伴隨著提高。


          一般我們在突出字體重量感的方法上常常會選擇線條較粗的字體、加大描邊或者設計成立體字來突出“重量”,甚至可以縮小字體間距,營造緊張的感覺,使文字更具“重量"。另外在顏色上,黑色物品相對于淺色物品在視覺上顯得更重,這一點在字體上也同樣適用的。

          Image title

          二.「空」出高級感

          字體的高級感一般體現在品等產品的設計上,利用大量的留白,在字體的顏色上盡量選擇近乎無彩色如灰色,做到簡潔大方、少即是多。而在字體類型的選擇上,襯線體往往比非襯線體更具有格調,宋體往往比黑體更加高雅,利用傳統字體也能給讀者一種信賴感。


          看到這里也許有人會說:“從用戶體驗角度思考應該使用非襯線體,因為其更易讀、字形更簡潔。”而在《設計師要懂心理學》一書中表明研究發現:常規的襯線體和非襯線體兩者在理解難易度、閱讀速度和使用傾向并無差異。

          Image title

          三.「圓」有親近感

          字體所展示出的親近感主要體現在于字體端角的圓滑上,先從生活常見的例子講起,在人類的常識里尖銳的物品往往會給人冰冷、危險和難以靠近的感覺,而圓滑的東西往往讓人有親近感,更利于吸引讀者接近。這里最形象的例子要數按鈕和圖標的演變,按鈕和圖標的設計從直角到圓角的演變,其中不乏也有以上原因。


          在突出親近感時,圓角類型的字體所表達的感覺如果還不夠強烈,這里不妨可以選用較粗的線條字體再加上暖色系的顏色,這樣親近感就更加強烈了。

          Image title

          四.「裝」出華麗感

          一般文字是用于閱讀,而為了博人眼球,設計師也慢慢讓文字字體有了裝飾,利用線條的不規則粗細來突出文字的“美”,從而體現出華麗感,華麗感較強的字體大多數用于女性品牌的產品,裝飾性高的文字,不僅引人注目的效果,還能強調了產品的“貴”。要注意的是修飾性的文字不利于閱讀,不適合大量文字,容易視覺疲勞。

          Image title

          五.「質」換畫面感

          材質感的字體往往用在游戲的設計上比較多,將武器或游戲場景等有質感的東西貼在字體上,間接展示游戲場景、風格等。因此,運用材質的字體往往更具有畫面感,從而影響讀者視覺對大腦的影響,產生了身臨其境的感覺,于是在腦海中留下對產品認知。


          質感的字體往往容易讓人感覺到“力量”,這也和第一點注入內容說法一樣。

          Image title

          六.「寫」出文藝感

          手寫的字體,會讓讀者感覺到手的溫暖與膚觸的溫柔,這里被利用到的應該算淘寶商家的感謝信了,利用牛皮紙加上手寫字體,可謂是為了好評誠意滿滿。


          手寫的字體還常常與手繪貼圖一起出現在手帳本,或可愛優雅、或呆萌粗線條;另外,你或許還能在文藝菜單上看到它,樸實無華卻清晰溫暖,文藝感十足。

          Image title

          后言 

          沒有最好的字體,只有合適的字體,字體的難度并不在于設計和選擇上,而是在于你選擇或設計的字體給讀者的感覺是否符合產品所想表達的亦或是讀者所需要的。


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

           

          頁面跳轉方式,如何設計更合理?

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          常見的頁面跳轉方式有直接跳轉、左右跳轉、上下跳轉等,再設計時需要考慮好其中的關聯性,給出最符合用戶心理預期的過渡方式,從而做出最合適的設計。

          頁面跳轉在APP中屬于最常見,也是最基礎的一個交互細節點。

          我們常見的跳轉方式:直接跳轉、左右跳轉、上下跳轉、翻轉、聯動;其它酷炫的效果我們看過很多,但是現實中能做到的又有幾個呢?

          先講一下:視覺順序

          首先我們看一下,我們的視覺順序「閱讀順序」是:左→右,上→下。因此延伸出目前APP最常見的兩種頁面跳轉方式:左右跳轉,上下跳轉。

          直接跳轉

          最原始、最簡單的跳轉方式,web端常見,在APP中出現較少,標簽切換常見,這個比較簡單,沒什么講的。

          常用于快速開發,Android中常用。

          實現難度:無;

          維護成本:無。

          左右跳轉

          最常見的跳轉方式。(ios原生效果)

          實現難度:簡單 ;

          維護成本:低;

          運用場景:夫級→子級→子子級,依次類推。

          常用場景:

          1. 對應功能的展開:常以導航形式的存在,如美團首頁的美食、電影、住店等分流入口。
          2. 對于內容的展開:如聊天列表>聊天窗;文章列表>到文章詳情。
          3. 對于活動廣告的展開:banner圖廣告、彈窗廣告等,比較常見。

          這里有個細節要注意,就是我們的返回鍵在左上角,也就養成了用戶一種習慣,左上角的鍵,與點擊之后的效果,往往就應該是頁面從右側退出的樣子,與進入時反向的效果。

          這也是為什么大部分APP不會把入口按鈕放在左上角的原因。

          那么左上角這個位置,除了給返回鍵當做固有的位置外。還常常用于抽屜式導航,因為抽屜式導航的方向,與返回時的移動方向是一致的。常見抽屜式導航APP如:滴滴打車、摩拜單車等。

          上下跳轉

          相對于左右跳轉,上下跳轉就比較難理解了。

          實現難度:簡單 ;

          維護成本:低。

          這種跳轉方式也很常見,但是大部分人不清楚什么時候用,這里我們簡單分析下。

          運用場景:

          1. 對當前頁面創建新的條目時;

          2. 獨立啟動的一個子內容。(如小程序:微信/支付寶等)

          比如我們在微信聊天頁,發起一個聊天的時候:

          還有我們新添加群人員時,新建筆記本時,新建地址時等。

          我們用微信聊天頁面在舉例:點擊+號離的內容時:圖片、拍照、位置、紅包、收藏等,都是采用下到上的方式呈現,因為這些創建都是對當前聊天窗口一次性產生內容。(大家可以去感受一下這些細節)

          下面我們看下百度的設置>地址管理>添加地址左右>左右>上下。

          翻轉

          實現難度:中等;

          維護成本:低;

          運用場景:完全切換內容,換到一個全新的內容集合里。

          常見的有平安好醫生中間的按鈕,一級大姨媽APP中間的商城。

          聯動性

          實現難度:高 ;

          維護成本:高;

          運用場景:元素之間從上級到下級關聯性強。

          如APP store 每日推薦到介紹頁。類似的還有Behance APP的作品展示。國內APP很少有這種聯動效果,因為一旦頁面結構改變,整個效果基本無法復用。

          類似于這種強聯動,我們會在很多概念設計稿中看到,但是在實際的APP是很少見到的。因為開發成本/維護成本都很高。

          搜索頁面打開

          這里強調一下搜索頁面。搜索頁面的進入往往有兩種形式。一直是icon做入口,另一種是搜索框做入口。

          icon做入口:更像是上下級關系,常用左右跳轉來實現。比如:抖音。

          搜索框做入口:點擊就給與獲取光標的感知,所已做好做簡單的聯動過渡效果。比如:微信、云音樂。

          其它方式

          關于其它方式,基本上只有極個別的APP中可以看到。

          其它的方式,要結合實際的情況來考究。一定要注意關聯性。比如微信新出的浮動展開效果,因為元素要浮動,為了更加貼合所以有了收縮的效果。

          結語

          形式上其實就是上下左右內外??紤]好之間的關聯性,給出最符合用戶心理預期的過渡方式,就可以幫助我們找到最合適的設計。

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

          為人設計,請說人話

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          UXRen

          打造有價值產品的首要規則是,它應該對某些人有真正的使用價值。也就是說,一個真實的人(或許多個人)會因為你的工作而解決了某些問題或實現了某些需求。

          這個道理是顯而易見的,但是,如果你去聽一聽這些產品設計們的日常用語,就會發現,在日常生活中,我們不常這樣說。

          反而,在語言交流中,設計師經常會“走捷徑”。有時會直接使用行業語言或專家術語來提高表達度,但大多數情況都是為了避免廢話。

          舉例來講:

          • 我們要如何增加用戶對這種功能的使用?
          • 為什么這兩方面看起來不夠統一?
          • 這里的點擊率這么低,可能我們太過強調了。
          • 我感覺這里干擾信息太多了,要怎么解決這個問題?
          • 這個設計需要更多“呼吸空間(留白)”。
          • 我們應該將這點設計地更簡潔一些。
          • 這一指標需要提升,現在的曲線走向并不理想。

          想象一下,當用戶聽這些話時,他們能相信我們的最終目的是為他們創造價值嗎?

          當然,我們在使用語言捷徑時,其實是在把我們腦海中的各個點連接起來,這種基于對內容的理解,在腦海中將一個概念與另一個概念聯系起來的思考方式——就像是火車在有序的系統中飛馳而過,直到停留在人們期待的站臺上一樣。

          但在實際交流中,有可能出現兩種完全預料不到的結果:

          第一種情況是,當與一個認知和你不太一致的人交流時,你認為重要的事情,對方有可能完不理解為什么這樣。

          比如說,作為一個設計師,當我說“為什么這些東西不一致”的時候,我自己的邏輯是這樣的:

          不夠一致=> 這些東西雖然看起來很像,但當點擊的時候,可能有人會選A,也有人會選B=>這就會使用戶困惑,并且影響他們從我們構建的內容中獲得最大的價值。

          其他精通設計語言的人,一般而言都會跟我一樣的思考問題。比如,讓東西“簡潔”其實是指讓它專注于最重要的點,以便人們能一眼就知道如何使用它。讓界面“可以呼吸”則是指讓人們在閱讀或者瀏覽時能更輕松愉悅。

          但如果你并沒有建立這些認知連接,你可能會不解:一致性、簡潔性和可呼吸空間為什么這么重要呢,這些價值觀看起來是不是有點隨意?而且這些疑惑有可能是對的,為了一致性而保持一致也許并沒有必要。如果這世上沒有人會對兩個看起來相似但反應不同的事物感到困惑的話(假設開發成本投入不算很大的話),那么這不會是一個問題。

          許多工程師和產品經理跟我講過,關于“一致性”的討論經常意見很難統一,但當我說“目標是讓用戶感覺沒有困惑”時,爭議就不存在了。

          使用“語言捷徑”的第二個意想不到的后果是,我們有可能會忽視真正的最終目標。你看待問題的方式和角度會更多地從公司出發而不是用戶真正面臨的問題。

          舉個例子,我們要如何提高這一功能的使用率?這可能并不是任何一個你的用戶會關心的問題,在討論這一問題的時候,你有可能會開始從公司角度思考解決方案,比如讓功能更顯眼,不斷提醒用戶這一功能的存在等。

          但其實這些做法只有在強調的功能的確很重要的時候,才會起作用。但如果這一功能的使用率本來就低,那么更有可能說明這一功能對用戶而言沒那么重要。如果你沒有真正以人為中心來思考問題,很難發現這一點。

          歸根結底,雖然語言只是一個小的方面,但我相信它是非常重要的。多關注一點在工作時使用的談話方式,如果你是為人設計的,那么請用人們更熟悉的語言。

          舉例來講:

          • 我們要如何增加用戶對這個功能的使用?=> 是什么讓這個功能對人們更有價值?
          • 為什么這兩方面不夠統一?=> 讓我們確保,用戶不會因為這兩個看起來相似但有不一樣功能的東西而感到困惑。
          • 點擊率真的很低,可能是因為強調得不夠。=> 人們可能會意識不到這個功能的存在,因為這實在太容易被忽略了。
          • 我們發現很多用戶流失,我們該怎么辦?=> 那些試用過我們產品的用戶不會再回購,為什么會這樣呢?
          • 這個設計需要更多的呼吸空間。=> 用戶閱讀瀏覽信息的體驗應該更輕松、愉悅。
          • 我們應該將這點設計地更簡潔一些。=> 用戶應該能在第一眼就注意到最重要的信息,并知道他們應該做什么。不該用過多的選擇給用戶壓力。
          • 這一指標需要提升,現在的曲線看起來并不理想。=> 我們的產品還沒能讓用戶覺得足夠有用,從而進一步回購,所以我們應該提升我們所提供的價值。
          • 藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務。


          百度行業首發《2019.AI人機交互趨勢研究報告》

          濤濤

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

          人工智能已經成為新一輪科技革命和產業變革的核心驅動力,正在對世界經濟、社會進步和人類生活產生極其深刻的影響。其中,普羅大眾對人工智能感知最為深切的當屬人機交互。語音交互、人臉識別等人工智能技術已經化為應用產品走進了我們的生活。近日,百度人工智能交互設計院發布了一份聚焦于未來3年內的AI人機交互趨勢研究報告(以下簡稱“《報告》”)。


          該報告是百度人工智能交互設計院基于過去一年多對AI領域前沿技術、產品和設計的深入研究和洞察,結合產業界和學術界的經驗探析而來。AI賦能的人機交互革新了大眾的生活形態,未來,AI加持的人機交互模式又會呈現出什么樣的態勢呢?


          《報告》從“人機交互介質”、“交互對象”、“AI應用場景”、“人機關系”等方面總結了AI人機交互的八大趨勢。


          趨勢一:語音交互技術進步,更趨向人類自然對話體驗


          研究公司Ovum預測稱,到2021年,地球上的語音助手的數量會和人類一樣多,人們會越來越傾向于向語音助手尋求情感上的幫助。在AI人機交互中,語音交互技術在用戶終端上的覆蓋最為廣泛。


          以智能音箱為例,有數據顯示,2018年全球智能音箱市場同比增長200%。其中,中國智能音箱市場增速達到罕見的5370%。谷歌、亞馬遜、蘋果等全球巨頭企業均加速了用語音交互技術開啟大眾智能生活的步伐。截止2018年12月31日,搭載百度對話式人工智能操作系統DuerOS的智能設備激活量也已超2億。


          目前,語音交互技術已經加速在智能家居、手機、車載、智能穿戴、機器人等行業的滲透和落地?!秷蟾妗分赋觯磥黼S著語音技術的不斷完善,語音交互的自然度將進一步提升,并愈加趨向人類自然對話的體驗。具體表現為:語音交互將從機械的單輪對話進階到更流暢的多輪對話;合成語音更自然、真實,接近真人水平;語音交互具備聽覺選擇能力,提升多人對話體驗;語音交互將支持多種方言,并針對細分群體進行差異化設計。



          趨勢二:人臉、手勢等通道更多出現在產品中,多通道融合交互成為主流交互形式


          媒介學家雷吉斯·德布雷(Régis Debray)曾提出:“技術能實現不同區域里不同文化的人之間的連接”。隨著技術的發展,人與人之間的連接早已不成問題。當前,AI技術更是拓展了人與智能體交互的通道。除語音交互外,計算機視覺技術的發展已使得智能體實現了通過識別人臉、指紋、面部表情、肢體動作等人體信息,而更加快捷多元地與人類進行交互。但是不同的交互通道在有其獨特優勢和場景適用性外,也有一定的局限性。


          《報告》認為,未來,人與智能體的交互將融合語音、人臉、手勢、生理信號等多種方式,為人類打開更多的交互空間和應用場景。具體表現為:人臉檢測及識別聚集更細維度的面部特征,拓展更多的交互空間和場景;空中手勢交互將成為新熱點;觸控、語音、手勢、人臉最有可能成為多通道融合的主流通道;生理信號、觸覺、嗅覺等也將成為輔助通道融入多通道交互中。



          趨勢三:智能體開始擁有明確的人設


          近期,明星“人設”崩塌已成大家茶余飯后的熱門話題。但是你想過,智能體也將擁有明確的“人設”么?《報告》認為,未來,用戶可以更加明顯地感知到智能體鮮活的“人設”。


          所謂智能體的“人設”是指,用戶在與智能體的互動過程中,根據感知到的綜合特征推斷出一種具有一致性的角色形象,一般由性格(如外向、善良等)、關系(如助手、朋友等)和基本屬性(如性別、年齡等)構成?!秷蟾妗分赋?,目前,智能體人設的設計和表達主要聚焦在語音(如音色、語調等)和語言層面(如表達方式),并且通常局限在部分場景、部分話術上,缺少一致性和全局感。


          《報告》提出,未來,智能體人設將從語音、產品外觀、虛擬形象等多維度進行設計,甚至聘用編劇設計具有統一形象特點的話術,利用混合現實(MR)、全息投影等技術將人設具象化,讓用戶在不同場景下均感受到智能體一致、明顯的人設特征。換句話說,未來,智能體的人設會具有很明顯的特征,但不會輕易崩塌。


          此外,《報告》還認為,打造用戶喜愛的人設也將成為企業在市場競爭中形成差異化、吸引更多用戶的重要方式。



          趨勢四:智能體在被動交互外,開始出現主動交互行為


          技術的發展雖然革新了我們的生活方式,但是長久以來,人機交互一直延續著人類“輸入”,機器“反饋”的循環模式,人類始終是主動的,機器始終是被動的。


          《報告》認為,人工智能賦予了機器情境感知和自主認知能力,使我們有機會構建機器主動服務于人的交互模型。智能體出現主動交互行為的具體表現為:主動交互越來越“貼心”;主動交互在“家”和“車”的場景下率先商用落地;主動交互將提升公共場景下人機協同的效率。



          趨勢五:智能體開始擁有情感判斷及反饋智能


          2014年在北美上映的動畫片《超能陸戰隊》中的機器人大白,以對主人公關懷備至的暖萌形象收獲了大批影迷的喜愛。觀影后的每個人都希望自己能夠擁有一臺如大白一樣忠心耿耿又溫柔體貼的機器人。令人欣喜的是,具有情感判斷和應對能力的智能體正逐漸成為現實。


          過去20年,在人機交互中,機器基于表情、文本等方式的的情感識別能力已有很大的提升。目前市面上出現的如情感陪護機器人、智能音箱、智能汽車等已經初步具備一些情感識別能力,可以根據不同的場景、對象,進行適當的情感交互。


          《報告》指出,未來,情感計算技術的提升及硬件升級將賦予智能體在“視”“聽”等方面更強的情感識別能力;同時智能體對于人類思維理解、情景理解能力也將更加完善,情感交互能力將更智能、更體貼。



          趨勢六:AI對特定人群的關懷得到快速發展和應用


          人機交互的發展為兒童、老人、殘障人士等群體更便捷地利用機器獲得服務,提供了充分可能。當前市面上已經出現大量針對兒童教育的AI產品。搭載DuerOS的小度智能音箱也針對以兒童為中心的家庭語音互動需求,特別開發了兒童語音識別引擎,并定制兒童語音播報音色及對話邏輯,陪伴兒童一起成長。在養老領域,為老人提供陪聊、提醒等陪護服務的智能產品也被AI企業提上了日程。此外,少數AI產品也開始專注殘障、病患等更加細分的人群,如2018年11月,百度推出了AI眼底篩查一體機,幫助患者快速篩查眼底疾病,為基層醫療帶去了極大的便利。


          《報告》提出,未來,AI對人類的關懷將得到快速發展和應用,覆蓋更加細分的人群和更深入的場景。為兒童,AI將從易于交互到提供心智陪伴的服務;為老人,AI將縮小他們與科技的鴻溝,助推他們開啟品質生活;為感官殘障人士,AI將幫助他們重獲對世界的立體感知;為特殊疾病人群,AI將提供預測、診斷和康復服務。



          趨勢七:智能設備互聯互通,多場景銜接


          以BAT為首的互聯網企業,在2018年紛紛調整組織架構,轉向To B。巨頭重提產業互聯網戰略成為當前市場新現象。此現象背后,正是AI、5G、云計算等新興技術的發展與升級。2018年的政府工作報告,進一步強調了“產業升級的人工智能應用”?!爱a業化”和“應用化”成為未來幾年人工智能的兩大發展方向。


          《報告》指出,隨著AI技術的進一步成熟和落地,及其與大數據、IoT的結合,AI將從單品智能、獨立場景到互聯智能,場景融合進階。智能設備將互聯互通,場景將進一步融合,實現多場景銜接;VR/AR將促進線上和線下、虛擬和現實的聯結,未來,VR會加速拓展到更多的產業和實體,AR中的現實與虛擬將從簡單疊加到有機融合,實現用戶可以源自自然意識進行人機互動。



          趨勢八:人機開始走向深度協同,信任構建成為首要突破點


          2018年6月,百度研究院發布并開源“神經條件隨機場”的AI算法。該算法擁有強大的腫瘤病理切片檢測能力,可以大幅提升醫生閱讀病理切皮的效率和準確率。人機協同即,通過人工智能增強人類智能,讓人工智能成為人類智能的自然延伸和擴展。


          目前,人機協同已在工業領域初步實現,而隨著智能體從工業生產領域向商業服務、社會服務和家居服務領域拓展,人機將走向深度協同。《報告》認為,人機深度協同可以最大化發揮雙方優勢,實現合作共贏。


          而人們對AI的信任,是智能體全面進入人類工作和生活,實現真正人機協同的前提。即,信任構建成為了實現人機深度協同的首要突破點。與此同時,AI倫理道德將更加細化,成為所有從業者需遵守的行業準繩。AI行業的發展在帶給大眾便利生活之時,避免算法歧視、保護人類隱私、尊重人類價值等也變成了從業者們亟需重視的問題。


          最后,《報告》指出,AI時代的人因工程是一個真正的系統工程。而每個人機交互行業的從業者都需要擁有AI思維。最重要的是,中國的人機交互設計和研究者們將首次和發達國家站在同一起跑線上,我們有機會去定義這些體驗標準,而不再是追隨或遵守。


          AI時代大門緩緩開啟,屬于中國和中國企業引領世界前沿的新時機已到來。

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

          車子炫酷交互界面欣賞!

          用心設計

          如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

           

          分享車內交互界面設計

          微信圖片_20190227183134.gif微信圖片_20190227183144.gif微信圖片_20190227183157.jpg微信圖片_20190227183202.jpg微信圖片_20190227183206.jpg微信圖片_20190227183209.jpg微信圖片_20190227183231.jpg微信圖片_20190227183229.jpg微信圖片_20190227183226.jpg微信圖片_20190227183222.jpg微信圖片_20190227183218.jpg微信圖片_20190227183214.jpg微信圖片_20190227183211.jpg微信圖片_20190227183234.jpg微信圖片_20190227183237.jpg微信圖片_20190227183239.jpg微信圖片_20190227183242.jpg微信圖片_20190227183244.jpg微信圖片_20190227183246.jpg微信圖片_20190227183249.jpg

           

           

          藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計

          日歷

          鏈接

          個人資料

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

          存檔

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