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

          首頁

          未來情感化界面設計

          博博

          情感化設計在我們的決策過程中起著至關重要的作用



          情感化設計在我們的決策過程中起著至關重要的作用,因為加入情感化的設計可以改變與產品交互的人的整體現實。


          人類是一種情緒驅動的物種,我們選擇某些產品并不是因為它們有意義,而是因為我們認為它們會讓我們感受到不一樣的感覺。也正因如此,在未來的界面將在產品設計的基礎上使用情感的概念,人們使用的經驗將基于智商(IQ)和情商(EQ)。


          本文試圖展望未來,看看我們將在未來十年內設計哪些接口。我們將仔細研究三種情感化界面設計的互動:


          • 語音

          • 增強現實(AR)

          • 虛擬現實(VR)


          未來情感化界面的實際例子


          界面如何?即使我們還沒有回答這個問題,我們也可以討論接口可能具有哪些特性。在我看來,我確信我們最終將擺脫充滿菜單,面板,按鈕的接口,并轉向更“自然的界面”,也就是情感化的界面。未來的界面不會被鎖定在物理屏幕上,而是會集合五種感官的力量。因此,他們需要較少的學習曲線,理想情況下,根本沒有學習曲線。


          情商情緒在商業中的重要性


          除了使體驗更自然并減少學習曲線之外,為情感設計還為產品創造者帶來了另一個好處:它提高了用戶對產品的采用率??梢岳萌祟悓η榫w的行動能力來創造更好的用戶參與度。


          真實的語音界面


          使用語音作為主要界面的產品正變得越來越流行。我們中的許多人使用Amazon Echo和Apple Siri進行日?;顒?,例如設置鬧鐘或預約。但是,目前市場上可用的大多數語音交互系統仍然具有自然的局限性:它們不會考慮用戶的情緒。因此,當用戶與Google Now等產品進行互動時,他們對與機器進行通信具有強烈的溝通感 - 而不是真正的人。系統可預測地響應,并且他們的響應是腳本化的,與這樣的系統進行有意義的對話是不可能的。


          但是目前市場上有一些完全不同的系統,其中一個是Xiaoice,一個社交聊天機器人應用程序。這個應用程序的核心是情感計算框架,該應用程序的基礎是,首先與用戶建立情感聯系。Xiaoice可以動態識別情緒,并在與相關響應的長時間對話中吸引用戶。結果,當用戶與Xiaoice交互時,就像是與真人交談一樣。


          Xiaoice的局限在于它是一個基于文本的聊天應用程序。很明顯,你可以通過基于語音的交互來實現更強大的效果(人聲具有不同的特征,例如可以傳達強大的情感譜的音調)。


          我們中的許多人已經在電影“她”(2013)中看到了基于語音的互動的力量。Theodore愛上了Samantha(一個復雜的操作系統)。這也使我們相信,未來基于語音的系統的主要目的之一將是用戶的虛擬伴侶。這部電影最有趣的事情是西奧多沒有薩曼莎的視覺形象,他只有她的聲音。要建立這種親密關系,必須產生反映一致性格的回應。這將使系統既可預測又值得信賴。


          技術離Samantha這樣的系統還有很長的路要走,但我相信語音優先的多模式接口將是語音接口發展的下一章。這樣的接口將使用語音作為主要交互方式,并在創建和建立連接感的上下文中提供附加信息。


          為Brain.ai設計的語音界面示例(圖片來源:Gleb Kuznetsov)


          AR體驗的演變


          增強現實(AR)被定義為現實世界之上的數字覆蓋,并將我們周圍的對象轉換為交互式數字體驗。我們的環境變得更加“智能”,用戶對手指尖上的“有形”物體產生幻覺,從而在用戶和產品(或內容)之間建立了更深層次的聯系。


          使用AR重新構想現有概念


          AR的獨特之處在于它為我們提供了與數字內容進行物理交互的非凡能力。它允許我們看到以前無法看到的東西,這有助于我們更多地了解我們周圍的環境。此AR屬性可幫助設計人員使用熟悉的概念創建新的關卡體驗。


          例如,通過使用移動AR,可以創建新級別的飛行體驗,允許乘客查看有關其班級或當前航班進度的詳細信息:


          AR在空中客車A380的飛行體驗中。(圖片來源:Gleb Kuznetsov)


          AR幫助我們找到通過空間的方式,并一目了然地獲得所需的信息。例如,AR可用于為您當前的位置創建豐富的上下文提示。被稱為技術SLAM(小號 imultaneous 大號 ocalization 甲 ND 中號 apping)非常適合此。SLAM允許實時映射環境,并且還可以將多媒體內容放入環境中。


          為用戶提供價值的機會很多。例如,用戶可以將他們的設備指向建筑物,并在其屏幕上了解更多信息。它可以顯著減少工作量,并通過允許導航和訪問實現輕松的情感體驗。


          在上下文中提供其他信息(圖片來源:Gleb Kuznetsov)


          我們周圍的環境(例如墻壁或地板)可以成為交互場景,過去僅限于我們的智能手機和計算機。


          你在下面看到的概念正是如此; 它使用物理對象(白墻)作為通常使用數字設備傳送的內容的畫布:


          交互式墻的概念 - 在現實世界之上的數字覆蓋。(圖片來源:Gleb Kuznetsov)


          避免信息過載


          我們中的許多人都看到了名為“超現實”的視頻。在這段視頻中,物理和數字世界已合并,用戶被大量信息所淹沒。



          技術允許我們同時顯示幾個不同的對象。當它被誤用時,很容易造成過載。


          信息過載是一個嚴重的問題,對用戶體驗產生負面影響,避免它將成為AR設計的目標之一。精心設計的應用程序將使用AI的強大功能過濾掉與用戶無關的元素。


          高級個性化


          當系統實時地根據用戶的需求和期望來管理內容或功能時,就會發生數字體驗的個性化。許多現代移動應用程序和網站使用個性化概念來提供相關內容。例如,當您訪問Netflix時,您看到的電影列表會根據您的興趣進行個性化。


          AR眼鏡允許創建新的個性化水平,即“高級”個性化水平。由于系統“看到”用戶看到的內容,因此可以利用此信息提出相關建議或在上下文中提供其他信息。想象一下,你很快就會戴上AR眼鏡,轉移到你視網膜的信息將根據你的需要量身定制。



          從增強現實走向虛擬現實,創造沉浸式體驗


          AR體驗具有自然的局限性。作為用戶,我們在內容和內容之間有明確的界限; 這條線將一個世界(AR)與另一個世界(現實世界)分開。這條線引起了AR世界顯然不真實的感覺。


          您當然可能知道如何解決這個限制,即使用虛擬現實(VR)。VR并不是一種新的媒介,但只是在過去的幾年里,技術已經達到了允許設計師創造身臨其境體驗的程度。


          沉浸式VR體驗消除了現實世界與數字之間的障礙。當你戴上VR耳機時,你的大腦很難處理你收到的信息是否真實。關于VR體驗如何在最近的將來看起來的想法在電影“Ready Player One”中有很好的解釋:



          以下是設計人員在創建沉浸式虛擬環境時需要記住的內容:


          1.寫一個故事


          有意義的VR有一個強大的故事的核心。這就是為什么在你開始設計VR環境之前,你需要為用戶旅程寫一個敘述。一個稱為“故事板”的強大工具可以幫助您。使用故事板,可以創建故事并檢查所有可能的結果。當您檢查故事時,您將看到何時以及如何使用視覺和音頻提示來創建身臨其境的體驗。


          2.與角色建立更深層次的連接


          為了讓用戶相信VR中的所有內容都是真實的,我們需要創建與用戶所扮演的角色的連接。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這種表示應該是實際的手 - 而不僅僅是一個操縱的復制品??紤]不同的因素(如性別或膚色)至關重要,因為它會使交互更加真實。


          用戶可以看到他或她的手,看他們看起來像一個角色。(來源:leapmotion)


          也可以將現實生活中的一些對象帶到VR環境中以創建此連接。例如,一面鏡子。當用戶查看鏡像并在反射中看到他們的角色時,它可以在用戶和虛擬角色之間實現更真實的交互。


          虛擬現實用戶會查看虛擬鏡像,并將自己視為VR環境中的角色。致謝:businesswire。


          3.使用手勢代替菜單


          在設計沉浸式VR體驗時,我們不能依賴傳統的菜單和按鈕。為什么?因為通過顯示菜單來打破沉浸感相對容易。用戶會知道他們周圍的一切都不真實。設計師不需要使用傳統菜單,而是需要依賴手勢。設計界仍然在定義使用手勢的通用語言,參與這項活動是有趣和令人興奮的運動。棘手的部分是讓用戶熟悉并可預測手勢。


          Hovercast VR菜單試圖將現有的交互概念重用于VR體驗。不幸的是,這個概念可以打破沉浸感。新媒體需要新的互動模式。


          4.與VR環境中的元素交互


          要創建一個感覺真實的環境,我們需要讓用戶能夠與該現實中的對象進行交互。理想情況下,環境中的所有對象都可以以允許用戶觸摸和檢查它們的方式進行設計。這些物體將充當刺激,并將幫助您創造更加身臨其境的體驗。觸摸對于探索環境非常重要; 嬰兒在頭幾天獲得的最重要信息是通過觸摸獲得的。


          5.VR


          VR中分享情感有一個真正的機會,成為一個新的社會體驗水平。但為了實現它,我們需要解決一個重要問題,即將非語言線索帶入交互中。


          當我們與其他人互動時,我們獲得的信息的重要部分來自肢體語言。驚喜,厭惡,憤怒 - 所有這些情緒都在我們的面部表情中,在面對面的互動中,我們從眼睛區域推斷信息。當人們在VR環境中進行交互以創建更真實的交互時,提供此信息非常重要。


          好消息是頭戴式設備(HMD)將很快涵蓋情感識別。幾乎任何人與人之間的互動都將受益于VR中的面部表情。


          在VR空間分享情感(來源:MITReview的 Rachel Metz )


          6.為VR環境設計聲音和音樂適合


          音頻是沉浸式體驗的重要組成部分。如果不為環境設計聲音,就不可能創造出真正身臨其境的體驗。聲音既可以用作背景元素(即風的環境聲音),也可以用作方向性的。在后一種情況下,聲音可以用作提示 - 通過播放方向性(聲音來自哪里)和距離(可以將用戶的注意力集中在特定元素上)。


          在為VR設計音頻時,制作聲音3D至關重要。2D聲音不能很好地用于VR,因為它使一切都太平。3D聲音是您可以在周圍的各個方向聽到的聲音 - 前方,后方,上方和下方 - 遍布整個地方。您不需要專門的耳機來體驗3D聲音; 可以使用HMD的標準立體聲揚聲器來創建它。


          頭部跟蹤是良好聲音設計的另一個重要方面。讓聲音以逼真的方式表現至關重要。這就是為什么當用戶移動他的頭部時,聲音應該根據頭部運動而改變。


          7.預防暈車


          動是VR的主要痛點之一,這是一種在視覺感知運動和前庭系統的運動感之間存在分歧的情況,而讓用戶在體驗VR時保持舒適至關重要。


          有兩種流行的理論導致VR中的暈動?。?


          • “感覺沖突”理論:根據這一理論,暈動病的發生是由于預期的運動和實際經歷的運動之間的感覺上的不一致。

          • “眼動”理論:在“ VR書:虛擬現實的以人為本設計 ”一書中,杰森杰拉德提到暈動病的發生是因為保持場景圖像在視網膜上穩定所需的不自然的眼球運動。


          以下是一些提示,可以幫助您防止用戶接觸到病箱:


          • 身體運動應與視覺運動相匹配。有時即使是小的視覺抖動也會對體驗產生巨大的負面影響。

          • 讓用戶在移動場景之間休息(這在VR體驗非常動態時尤為重要)。

          • 減少虛擬旋轉。


          結論


          當我們考慮產品設計的現代狀態時,很明顯我們只是處于冰山一角,因為我們僅限于平面屏幕。


          我們正在目睹人機交互(HCI)的根本轉變 - 重新思考數字體驗的整體概念。在接下來的十年中,設計師將打破玻璃(我們今天所知的移動設備時代)并轉向未來的接口 - 復雜的語音接口,先進的AR和真正的沉浸式VR。當談到創造一種新的體驗時,必須要明白我們唯一的邊界是我們的大腦告訴我們它必須始終如一。


          如果您想了解更多的前瞻信息和權威專家普修的專業性建議,就留言聯系我們吧!


          來源:Gleb:Designing Emotional Interfaces Of The Future

          https://www.smashingmagazine.com/2019/01/designing-emotional-interfaces-future/


          <p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
              <img src="https://img.zcool.cn/community/0186295d26b093a801214837432998.jpg" style="margin:22px auto 0px;padding:0px;outline:none;box-sizing:inherit;display:inline-block;vertical-align:top;max-width:100%;" /> 
          </p>
          <p style="margin-top:0px;margin-bottom:0px;padding:0px;outline:none;box-sizing:inherit;color:#666666;position:relative;font-size:16px;line-height:32px;text-align:center;">
              用戶調研 丨 HMI設計 丨 UE/UI設計 丨 HMI培訓 丨 HMI評測 丨 體驗咨詢
          </p>


          作者:Pursuer設計

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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


          原文鏈接:https://mp.weixin.qq.com/s/wOCLrT2bdBe_wx4usB8pvQ

          大數據可視化界面設計總結

          博博

          項目可以簡單得理解為是氣象災害等級地圖展示系統,主要展示了圖表、表格、災害等級五色圖分布地圖


          設計需求

          1、逐步確認

          項目的需求分析是通過客觀的業務數據逐步展開,逐步確定的。首先根據常用的業務邏輯來把需要展示的內容做一個排序,比如:餅狀圖、柱狀圖、趨勢圖等,決定可視化圖表與數據的結合。

          2、從表格到一整張圖

          由于產品經理角色空缺,項目并沒有原型線框圖。所以為了項目有效開展,首先將數據展示的維度列出一個表格(內容標題、橫縱坐標、有效信息等等),進行合理化的分析, 其次將現有的數據內容,結合表格中的橫縱坐標,套在一個可視化的板式中,做出一個初步的原型設計。


          設計過程 

          1、設計風格

          按照傳統大屏的設計配色,深藍色體現了豐富的科技感,倉儲式儀表盤的布局模式,體現了數據可視化的大氣。由于業務對象的原因,摒棄了太過花俏、復雜的邊框跟元素。


          2、設計交互

          交互的要點承接了業務需求的關系,整個大屏界面除了數據展示,還多了控制地圖展示的下拉界面、查看災情發生時間維度的控制軸以及播放動畫的按鈕等,是一個組合可交互的大屏展示,并不是只刷新數據那么簡單。


          3、投入產品思維

          由于沒有產品經理的空缺,設計承擔了大部分產品思路,主要體現在重點內容布局,頁面合理性邏輯性的一些考量。好在頁面只有幾張,不然整體的業務邏輯分析起來也增加了不少的思考時間。


          4、改稿的心理素質

          數據展示的內容與客戶期望存在一定的差異,當客戶沒有需求提出時,就要出不同的方案來驗證客戶的需求,從最初的版本到開發,中間經歷了7-8次改稿,很虐吧……

          總結:

          1、視覺與原型

          從追求完美的角度出發,設計流程上應該有產品原型的體現,但是往往業務對接人員僅提供需求文字本身的情況下,設計師也要具備一定的產品能力,把視覺稿當成原型稿來做。


          2、同質化與調研

          大屏展示可視化一直都是層出不窮,怎樣做到既能滿足業務需求又要有獨特感以及設計感,可以歸結到項目開始的設計定位上,風格定位得越仔細,調研得越多,那么對設計亮點的融入會起到很大幫助!


          作者:沐嵐之城

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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


          iOS人機界面設計指南 #2 啟動&啟動頁

          博博

          翻譯iOS人機界面設計指南。譯文內容有刪改,并增加了個人注解和案例補充說明, 僅供參考, 歡迎交流~

          目錄


          一、設計理念 (Design Themes)   

          二、設計原則 (Design Principles) 

          [點我]以上部分見《iOS人機界面設計指南 #1》

          三、應用框架(App Architecture)


              啟動 (Launching)

                  -提供一個啟動頁

                  -考慮屏幕方向

                  -不要提前詢問設置信息

                  -不要顯示授權協議和免責聲明

                  -重啟時恢復先前狀態

                  -盡量不要讓用戶重啟

                  -不要頻繁地讓用戶給你的App評分


              啟動頁(Launching Screen)

                  -設計一個與您的應用的首頁幾乎相同的啟動頁

                  -避免在啟動頁上包含文本

                  -弱化啟動頁

                  -不要做品牌展示

                  

                  (原指南將“啟動頁”放到視覺設計中, 因與本節關聯較大, 因此譯者整合到在此處)



          -------------------------------------


          啟動 (Launching)


          啟動體驗很大程度影響用戶對APP的感受。 無論使用什么設備,無論自從上次打開APP過了多久,啟動體驗都應該是快速,無縫銜接的。


          提供一個啟動頁

          應用啟動時, 顯示啟動頁,然后迅速變為應用的首頁。 啟動頁的作用是在加載時給用戶一種印象——該APP響應迅速. 為確保從啟動頁無縫過渡,請將啟動頁設計成與首頁相似的、不會吸引關注的簡單頁面。


          考慮屏幕方向

          如果您的應用同時支持縱向和橫向模式,則應使用設備的當前方向啟動。 如果您的應用僅以一種方向運行,則應始終以該方向啟動,并在必要時讓人們旋轉設備。 除非有令人信服的理由,否則無論設備向左還是向右旋轉,處于橫向模式的應用程序都應正確定位自己的方向。


          不要提前詢問設置信息

          人們期望應用程序能夠正常運行。 為大多數用戶設計您的應用程序,讓少數需要不同配置的用戶調整設置以滿足他們的需求。 盡可能從設備設置和默認設置,或通過同步服務(例如iCloud)獲取設置信息。 如果您必須詢問設置信息,請提示人們在首次打開應用程序時提供該信息,并讓他們稍后在應用程序設置中對其進行修改。


          不要顯示授權協議和免責聲明

          在App Store顯示授權協議和免責聲明,以便人們可以在下載應用之前閱讀它們。 如果您必須在應用程序中包含這些內容,請注意不要破壞用戶體驗.


          重啟時恢復先前狀態

          避免讓用戶手動返回之前的位置。保存和恢復APP的狀態,讓用戶可以從他們上次的地方繼續。


          盡量不要讓用戶重啟

          重啟需要花費時間,并且會讓你的APP顯得不可靠且難用。如果你的APP有內存或其他問題使其難以運行,你需要解決這些技術問題。除非是手機系統原因. 


          不要頻繁地讓用戶給你的App評分

          安裝后或在用戶使用你的APP時過于頻繁地彈出評分提示是很煩人的,你收到的有用反饋可能會反而因此減少。為了鼓勵用戶給出合理的反饋,你應該給用戶一些時間讓他們對你的應用形成自己的看法。并始終提供一種選擇退出評分提示的方法,永遠不要強迫用戶對你的應用進行評分。


          -------------------------------------


          啟動頁(Launching Screen)


          當你的APP啟動時,啟動頁會立即出現,并很快被應用程序的首頁取代,給人一種APP響應迅速的印象。啟動頁不是一個藝術表達的機會。它只是為了增強你的APP快速啟動和立即準備使用的感覺。每個APP必須提供一個啟動頁。




          不要在啟動頁面上使用靜態圖像。 如果您需要了解各種屏幕尺寸的尺寸以幫助您進行設計布局,請參見設備屏幕尺寸和方向。在iOS 14及更高版本中,啟動屏幕限制為25 MB。



          設計一個與您的應用的首頁幾乎相同的啟動頁


          如果您添加的元素在應用程序完成啟動時看起來有所不同,則人們可能會在應用程序的啟動屏幕和第一個屏幕之間遇到不愉快的閃爍。 還要確保您的啟動屏幕與設備的當前外觀模式(淺色/深色)匹配.




          避免在啟動頁上包含文本

          由于啟動頁中的內容不會更改,因此任何顯示的文本都不會本地化。


          弱化啟動頁

          人們重視是否讓他們快速訪問內容并執行任務。 設計類似于應用程序界面的啟動頁會給用戶帶來“應用程序立即啟動了”的錯覺。 快速的啟動時間,結合這種設計方法, 會使您的應用程序響應迅速。對于游戲,啟動頁應正常過渡到游戲顯示的首頁。


          不要做品牌展示

          啟動頁不是品牌機會。不要設計得看起來像品牌刊登頁或“關于”窗口。 除非品牌標志或其他品牌元素在應用首頁也固定出現,否則請勿包含徽標或其他品牌元素。 如果您的游戲或其他沉浸式應用在過渡到第一個屏幕之前顯示純色,則可以創建僅顯示該純色的啟動屏幕。


          //然而事實是, 幾乎所有應用都會在啟動頁展示品牌logo. 只有apple官方的應用將“快速響應”的思路堅持到底. 我的看法是, 可以適當融入一些品牌元素, 但依然要考慮與首頁過渡, 避免閃爍感和等待焦慮,  盡量簡單、不引起注意, 從而帶來“快速響應”的啟動體驗. 



          ----------------------------------------


          下篇預告       

           3.2 新手教程 (Onboarding) & 加載(Loading)


          作者:子胖

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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


          原文鏈接:https://developer.apple.com/design/human-interface-guidelines/ios/app-architecture/launching/

          突破瓶頸之——界面設計

          博博

          界面設計設計文章



          作者:凌度_Lee

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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


          APP-IOS與Android界面設計與切圖

          博博

          【APP設計】:1、界面設計、;2、切圖;3、標注


          做一全套的APP設計,流程是:


          1、界面設計:設計IOS界面;設計Android界面。

          2、切圖:切IOS的2倍圖和3倍圖;切Android的hdpi,xhdpi,xxhdpi這三個尺寸的圖。

          3、標注:以px為單位標注IOS界面的尺寸;以dp為單位標andriod的尺寸。



          ----------------------------------------------------------------------



          IOS端_界面設計


          ————————


          一、界面設計:


          1、【界面分類:IOS有 iphone5/5s/5c、 iphone6\6 plus、iphone7\7 plus、iphone8\8 plus、iphoneX等分辨率。

          2、【設計方法】: 以iphone8為標準進行界面設計,讓開發進行適配。即750px*1334px以基準(72像素\英寸)。

          3、【設計標準】:750*1334界面——狀態欄40px; 導航欄88px;標簽欄98px;工具欄88px;文字最大34px; 最小18px;常用28px。





          ————————




          二、切圖:(所有開發寫不出來的都得切,如icon, 默認頭像,背景圖等)



          1、切圖尺寸】:IOS 只用切【二倍圖】和【三倍圖】。注意:有些button, 需要更改顏色,切一個“被點擊的狀態”(如btn-xxx-pressed@2x,btn-xxxx-pressed@3x)。

          2、切圖命名】:如btn-xxxx@2x,btn-xxx@3x(按紐); img-xxx@2x,img-xxxx@3x(圖像); bg-xxx@2x,bg-xxx@3x(背景圖)

          3、方法一】:photoshop圖層-右鍵-導出為...】

           設置大小(@1x+@2x);設置好icon的畫布尺寸(如導航欄上的幾個icon的畫布尺寸應保持一致)

          4fbe596ed93ea8012193a33bdfab.jpg

          0520596ed941a8012193a3b2faea.jpg

               

                 


          【方法二】:sketch-選中icon-右下角-make exportable

          (如需切相同尺寸的icon,需建立相同尺寸的畫布,并選擇整個畫布整體導出)



          ————————



          三、標注: 


          1、【標注內容】:顏色\長寬\字號\距離;

          2、【標注單位】:IOS的標注以px為單位進行標注。(注意:數字最好為偶數)

          3、【標注軟件一】: 標注神器-parker/markman,標注前請在“設置”里將單位改為px; 

           




          標注軟件二(強烈推薦)】:zeplin軟件——無需標注,只需將界面導入zeplin,開發直接訪問zeplin,即可查看所有的尺寸、間距、色值、字體、字號等。

          下載地址:https://zeplin.io/,軟件圖標和界面如下:


          671c596eed16a8012193a3cb6800.jpg

                                                    

                                     





          Android設計:



          ————————



          一、界面設計:


          1、【界面分類】:Android的尺寸非常多,非常雜??偟恼f來,就分為這幾種模式:idpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi。

          2、【設計方法】:以xhdpi為基準進行界面設計,讓開發進行適配。即以720px*1280px為標準(72像素\英寸)。

          3、【設計標準】: 720px*1280px界面——狀態欄50px, 導航欄96px,標簽欄96px,工具欄96px,實體鍵96px;文字最大36px;最小18px;常用28px。




          ————————




          二、切圖:


          1、【分類】:Android 的切圖需要切三個尺寸的:hdpi, xhdpi, xxhdpi。

          2、【方法一】:切圖神器-cutterman,也可以一鍵切出hdpi, xhdpi, xxhdpi三個尺寸的圖, 而且還可以切出“點九圖”。  

              【法二】:photoshop、sketch、illustrator皆可直接導出icon。


          ————————


          三、標注:


          1、【單位】:Android的標注以dp為單位。(parker里, 在“設置”里將單位改為dp)

          2、【標注軟件】:同上,推薦zeplin軟件(建立文件夾時需選擇安卓版本)








          ----------------------------------------------------------------------




          補充 _ 2019/4/10:


          目前流行的是以【一倍圖】的分辨率來進行設計,也就是sketch、PS、AI上給的分辨率:

          iPhone 8的分辨率是750*1334,而sketch、PS、AI上iPhone 8給的分辨率是375*667.


          意思是設計平臺鼓勵設計師用一倍圖來設計,一方面是因為開發環境是以一倍圖的環境來開發的,因此一倍圖的設計稿無需開發再進行換算。


          另一方面是icon導出時:@2x就是iPhone 8的尺寸、@3x就是plus的尺寸。利于icon尺寸的整數換算。


          所以推薦大家用【一倍圖】的分辨率來設計。icon切圖分別導出2倍圖和3倍圖供開發使用。(而且sketch提供的IOS控件也是1倍圖的尺寸啊~~)


          作者:Hmyu

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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

          網頁界面設計——界面分辨率 取其之道 舍其雞肋

          博博

          主要針對以下幾點展開討論及總結:
          1、界面尺寸
          2、界面布局
          3、界面背景
          4、界面黃金比例
          5、總結




          作者:鄭每每

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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

          聊聊手機界面設計哪點事(出圖篇)

          博博

            




          作者:神之一招

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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

          To B端界面設計要點

          博博

          To B端界面設計要點精彩分析,希望能幫到在B類產品項目中的你:)

          寫在前面

           

          B端產品和C端產品作為兩種很不一樣的產品形態一直服務著廣大的用戶。它們各有各的作用,有很多B端產品還是一個非常龐大的系統工程,甚至有很多的公司就是專注于開發B端產品,我從業以來曾經參與過很多的(兩位數)B端產品項目,有的是從0到1的開發,也有的是在原基礎上更新優化,下面就從我個人的設計經驗整理出一些觀點。

           

          什么是B端和C端產品


          概念:B端面向商家和公司,組織;C端面向普通的大眾用戶; 

          B端是指:business--泛指生意,商業,公司和組織; To B即是面向商家和公司,組織,是給專職專業的用戶使用的產品,例如微信公眾平臺給制定的公眾號持有人使用,某公司的指揮調度系統,某停車管理系統,以及相關的后臺管理系統等。C端是指:consumer--消費者,顧客,用戶,是指被設計為能給普通大眾使用的產品;To C即是面向普通的老百姓用戶,例如微博,QQ,微信,新聞客戶端,淘寶等;

            

          幾乎男女老少都會使用的微信


          面向專職崗位人員使用的后臺管理系統


          兩者的不同點


          C端產品追求極致的體驗,;B端產品追求簡約、高效的完成工作 

          C端產品是為了滿足用戶某一主要的、固定 的核心需求,因此設計的目標是圍繞著這個核心需求,簡單直接解決用戶的需求,追求的是極致的用戶體驗,因為對C端產品而言,產品不好用,體驗不好,用戶就流失了,也就沒有盈利的可能了。

          B端產品的目標是幫助用戶把大量的復雜的工作,整理歸納,使得他們能高效便捷的完成工作,追求的是產品的簡約實用,提高效率,能很好的處理工作,有時候為了達成業務目標,甚至不惜犧牲部分用戶體驗。


          To B端界面的設計應該要重點注意什么


          很多新手設計師在接到新的需求的時候會沒有頭緒,不知道如何開展工作,在不了解業務的前提下很多時候被產品牽著鼻子走。那么問題來了,是拿到產品給過來的原型之后就開始設計了嗎?又或者沒有原型只有一些簡單的描述,又該如何開展呢。以下是我的幾個建議


          1,要了解業務

          因為B類產品不同于C類產品,并不是大多數人日常都會很普及用到的,所以就需要設計師主動的去了解行業,了解業務需求,不同的行業有不同流程和規則,甚至是一些特殊的需求;啟動用戶群體調研和用戶使用場景調研,有條件的可以開展用戶問卷調研甚至面對面訪談,整理出用戶的使用流程,調研后要求設計師自己能非常清楚這個產品的作用、用戶人群、和在特定的使用場景下的使用目標、和不同情境下的操作流程等。

           

          2,交互流程設計

          B端產品往往包含了比較復雜的業務,那在復雜的業務背景下如何通過設計來提高用戶的工作效率,這就對設計師有比較高的要求。在交互流程上要整理出一些操作路徑,要考慮它們的層級關系,先后順序,行業習慣等。通過操作體驗給用戶留下明確的印象,可以降低用戶的學習成本,提高產品的易用性。

           

          To B端界面的視覺設計


          ①、界面布局,分固定的和自適應的分辨率兩種,一般來說自適應的布局比較適合操作和展示內容比較多的系統,固定的寬度的分辨率的布局一般多用1200px以適應適配更多低分辨率的顯示器,現在的大屏幕設備非常普及了,很多系統轉為以1400px的寬度來設計,至于用哪一種的布局要取決于產品的功能了。

          界面布局視覺上的區分;當我們設計一個系統的主頁到時候,B端產品通常會分為很多功能模塊,即便產品經理會提供原型給UI設計師,他們有時候往往會在原型按照他們的想法來布局,這時候設計師需要主動地去了解業務去弄清楚各個模塊的主次之分。通過調研后,整理歸類任務模塊,按照業務流程和規則來區分模塊優先級。(圖例)

          ②、顏色,B端系統的界面顏色也非常考究,按照系統的功能特性來定,一般常規的系統界面都是以白色底色配以一種主色調的顏色來搭配的;第二深色的底色界面,深色界面能起到一種很好的襯托界面內容(如大量文字,數據,圖形,視頻等)的作用,深色界面再附以一些點線面和光的元素就能營造出一種炫酷的科技感。三是現在流行漸變色,漸變色和純色會給人一種繽紛,輕松愉悅,有活力的年輕的感覺,所以大家在設計不同的B端系統界面的時候要考慮產品的功能性質來選擇用顏色。

          ③、導航,導航可以解決用戶在訪問頁面時:在哪里,去哪里,怎樣去的問題。一般導航會有「側欄導航」和「頂部導航」2 種類型。一:側欄導航:可將導航欄固定在左側,提高導航可見性,方便頁面之間切換;頂部可放置常用工具,如搜索條、幫助按鈕、通知按鈕等。適用于復雜的、功能多的中后臺的管理型、工具型網站。二:頂部導航,順應了從上至下的正常瀏覽順序,方便瀏覽信息;頂部寬度限制了導航的數量和文本長度

          ④、按鈕,通常B端產品分為較多的功能模塊,也對應有很多不同的按鈕,在設計按鈕的時候,我們第一要分清楚哪些按鈕對應哪些功能,在設計上要做出區分。

          ⑤、表格,表格的設計遵循簡潔和易讀性為主,表里面的文字內容是主要的設計重點,例如信息層次的明確、對齊的原則等。


          ⑥、彈窗,不僅有操作反饋的作用,同時又是一個承載更多的操作功能的容器,彈窗的設計要有規范性,組件化。


          視覺設計方面除了常規的設計流程,我想說的是綜合考慮和相關的系統銜接,體驗的一致,視覺風格的統一和品牌的建設。

           

          設計師還能做些什么


          雖然設計師和產品經理以及開發已經溝通過相關的業務需求,但設計師一定要懂得切換角度來看待問題,一方面設計師的視角相對注重視覺上和交互上的設計細節;第二我們也要懂得站在開發和產品的角度考慮,哪些效果能不能實現,也是需要我們和開發同事密切配合的;另一方面要更加注重代入用戶的角度來思考,這樣才能做出合理適用的設計,甚至能挖掘新的需求,提出一些很好的建議,給產品和項目帶來加分和利好。


          總結


          因為B端產品業務需求,用戶目標,使用場景和用戶群體都不相同,所以設計師接到B端產品的設計需求時一定要先了解清楚業務,做好前期調研,其次要多站在用戶的角度來看待和設計產品。其實C端和B端產品,它們都要求要簡單實用和有效準確,都是為了更好的滿足用戶的需求,解決用戶的痛點。做好了以上這些關鍵點,無論遇到多么復雜的B端產品,我相信所有問題都會迎刃而解。



          作者: chrisHCZ

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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

          界面設計丨Banner設計的一些思考

          博博

          從版式,字體,顏色,背景,點綴進行剖析

          前段時間一直在做運營類設計,banner在其中占了較大比重,為此就想寫一篇階段性總結。其中部分觀點參考了相關視頻教程和文章,設計新手一枚,如有不足還請大家海涵。


          banner由以下五部分組成:版式,字體,顏色,背景,點綴。我就針對這幾點做些具體分析。


          關于版式

          大家發現沒有,大體上banner版式可分為兩種:1、圖文左右排版   2、文字居中    

          在工作中我接觸圖文左右排版的機會較多,因此今天著重分析下。


          圖文左右排版

          當banner中需要包含具體的素材,如某位大咖,某件產品時,一般會選擇左右排版。并且圖文比例約為6:4(接近0.618的黃金比例)。


          關于為何文字部分要大于圖片部分,我做了如下分析:如果banner中只有某位大咖、某件產品,而沒有文字襯托,用戶就不會知道banner想表達的什么。

          如下圖,banner中只有一位拉大提琴的中年外國男子,人們會猜測這男子的個人專輯發布了?他是誰?所以,通過圖片用戶只能對信息有個大致了解。


          相反,如果把banner中圖片部分遮去,而只保留文字部分。人們能夠獲取的關鍵詞有:5首電影歌曲、回憶過往的。因此即使沒有配圖,文字也能將信息精準地帶給用戶,文字所占比例應當比圖片多些。這也就解釋了為何大部分左右排版的banner都是文字占比大于圖片。

          undefined



          banner中有些文字放左邊,有些放右邊,這有什么區別呢?

          下圖中第一個banner是關于歐美電影歌曲的,右側可布局拉琴的男子,也可配電影片段,還可放正在播音的留聲機。第二張banner同樣如此。

          下面兩圖均是圖左字右的banner,第一張《首席醫官》,特指這本書。

          第二章奧運冠軍陳一冰求婚——除了他沒別人了。

          說了這么多,總結出圖右字左和圖左字右的區別了嗎?圖片在右,配圖內容比較模糊;圖片在左,配圖內容比較清晰。由于人們習慣的閱讀順序是從左到右,左邊放什么意味著用戶會先看到什么。當圖片信息清晰時圖片放左,先用特定配圖吸引用戶目光,再加以具體的文字闡述就更正常不過了。而如果把含義不清的配圖放左左邊,用戶得看到右邊的文字部分才能獲得banner想傳遞的內容,這會導致用戶接收信息時間增加。


          2、文字居中    

          在工作中我沒怎么接觸過文字居中的排版方式,因此很抱歉沒法做太多的剖析。印象中電商比較喜歡此類排版,也許是文字放在正中的位子,底下可以放許多產品?


          版式中大小標題的比例

          發現沒?大小標題比例約為2:1。其實這和一級標題,二級標題是同個道理,我們在設計banner時總希望用戶能把banner上的文字看全,但又不希望大小標題混在一起主次不清,因此在排版合理,用戶能看清字的綜合考慮下,大小標題比例約為2:1。(其實小標題太小運營們也會懟的)



          關于字體

          banner中常用的字體有三種:襯線體(serif)、非襯線體(sans-serif)、書法體(cursive)



          都說字體有各自的性格,襯線體筆畫有粗細之分,它模仿的是中國古代字體和古代碑文上的字體,因此襯線體能給人古典,文藝的感覺,適合用于文藝氣息或與女子的相關設計。

          非襯線體筆畫簡潔,筆畫較粗,體現現代,簡約的特性,適合用于蒼勁有力,與男子相關的設計。

          書法體源自中國古代,能體現中國文化和揮灑墨水的豪氣,適用于文藝主題和金戈鐵馬般的豪邁主題。

          ps:商用字體需要注意版權?。?!這點很重要



          關于顏色

          在生活中,色彩心理學對人們對顏色的認知有很大的影響。


          黑色:黑色是一種代表品質、權威、穩重、時尚的色彩,同時也含有冷漠、悲傷、防御的消極情感。


          白色:傳遞一種簡單、純真、高雅、精致、信任、開放、干凈、暢快、樸素的情感。


          灰色:代表睿智、老實、執著、嚴肅、壓抑的色彩。


          紅色:傳遞喜慶、自信、斗志、權威、性感的情感。


          綠色:是自然界中最常見的顏色,代表生命力、青春、希望、寧靜、和平、舒適、安全的情感。


          藍色:是三原色中的一種,代表永恒、靈性、清新、自由、放松、舒適、寧靜、商務。


          紫色:是一種代表優雅、浪漫、高貴、時尚、神秘、夢幻、靈性、創造性的顏色。


          黃色:代表陽光、青春、活力、時尚、尊貴、年輕輕快、輝煌、希望的顏色。


          因此在設計中選擇主色調也要遵從如上:point_up_2:。


          例如活潑年輕的內容可選擇純度較高的藍綠色、綠色等作為主色調。

          文藝類內容則適合飽和度不高,偏向白色這類能讓人平靜的色彩。

          關于顏色的搭配,我一般會在花瓣上找些主題相近的banner作參考。

          此外推薦幾個配色網站:

          https://coolors.co/browser/latest/1

          https://color.adobe.com

          https://uigradients.com



          關于點綴

          大約有3種。橢圓點綴,圓角矩形點綴,實物點綴。圓形圓角矩形點綴可適當加些漸變和陰影。

          為了不讓實物點綴太過搶眼,可以適當做些弱化,比如降低透明度或是做些模糊處理。

          關于背景

          大約有3種。

          純色背景,實物背景,材質背景。根據畫面的需要可以選擇合適的底圖。

          總結:看了這么多手癢癢了嗎?此時此刻,打開ps做個banner練練手唄~~~~


          作者: 夜夜yue

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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


          Shneiderman的八大黃金法則——完美界面設計秘訣

          博博

          從Mac和PC,從移動設備到虛擬現實,以及未來可能出現的任何互動科技,只要涉及到人與界面之間的交互設計,Shneiderman的八大黃金

          f67f5947cdf2a8012193a389f7e5.jpg


          如果你想設計出卓越,高效和流暢的用戶界面,就請參考Ben Shneiderman的“界面設計的八大黃金法則” 。蘋果,谷歌和微軟設計的產品都反映了Shneiderman的法則,這些行業巨頭制定的用戶界面指南都包含Shneiderman黃金法則中的特征,而這些公司的熱門界面設計則是法則的視覺體現。本文將告訴你如何整合8大黃金法則來改進你的工作。


          界面設計的八大黃金法則


          Ben Shneiderman(生于1947年8月21日)是美國馬里蘭大學人機交互實驗室的計算機科學家和教授。他的工作可以媲美Don Norman和Jakob Nielsen。Shneiderman在其熱門書“設計用戶界面:有效的人機交互策略(Designing the User Interface: Strategies for Effective Human-Computer Interaction)”中介紹了界面設計的八個黃金法則:


          • 一致性


          當你在設計類似的功能和操作時,可以利用熟悉的圖標,顏色,菜單的層次結構,行為召喚,用戶流程圖來實現一致性。規范信息表現的方式可以減少用戶認知負擔,用戶體驗易懂流暢。一致性通過幫助用戶快速熟悉產品的數字化環境從而更輕松地實現其目標。


          • 常用用戶使用快捷操作


          隨著使用次數的增加,用戶需要有更快的完成任務的方法。例如,Windows和Mac為用戶提供了用于復制和粘貼的鍵盤快捷方式,隨著用戶更有經驗,他們可以更快速,輕松地瀏覽和操作用戶界面。


          • 提供有用信息的反饋


          用戶每完成一個操作,需要系統給出反饋,然后用戶才能感知并進入下一步操作。反饋有很多類型,例如聲音提示,觸摸感,語言提示,以及各種類型的組合。對于用戶的每一個動作,應該在合理的時間內提供適當的,人性化的反饋。如設計多頁問卷時應該告訴用戶進行到哪個步驟,要保證讓用戶在盡量少受干擾的情況下得到最有價值的信息。


          62525947ce14a8012193a31dda20.jpg

          作者/版權持有人:Google,Inc.    版權條款和許可:合理使用


          Windows Media Player設計師應該牢記Ben Shneiderman的第三個黃金法則:提供有用信息的反饋。體驗不佳的錯誤消息通常會只顯示錯誤代碼,對用戶來說這毫無意義。作為一名好的設計師,你應該始終給用戶以可讀和有意義的反饋。


          • 設計流程需要設計一個完結


          不要讓你的用戶猜來猜去,告訴他們其操作會引導他們到哪個步驟。例如,用戶在完成在線購買后看到“謝謝購買”消息提示和支付憑證后會感到滿足和安心。


          • 提供簡潔的錯誤操作的解決方案


          用戶不喜歡被告知其操作錯誤。設計時應該盡量考慮如何減少用戶犯錯誤的機會,但如果用戶操作時發生不可避免的錯誤,不能只報錯而不提供解決方案,請確保為用戶提供簡單,直觀的分步說明,以引導他們輕松快速地解決問題。例如,用戶在填寫在線表單時忘記填寫某個輸入框時,可以標記這個輸入框以提醒用戶。


          • 允許撤銷操作


          設計人員應為用戶提供明顯的方式來讓用戶恢復之前的操作,無論是單次動作,數據輸入還是整個動作序列后都應允許進行返回操作,正如Shneiderman在他的書中所說:


          “這個功能減輕了焦慮,因為用戶知道即便操作失誤,之前的操作也可以被撤銷,鼓勵用戶去大膽放手探索。”


          • 給用戶掌控感


          設計時應考慮如何讓用戶主動去使用,而不是被動接受,要讓用戶感覺他們對數字空間中一系列操作了如指掌,在設計時按照他們預期的方式來獲得他們的信任。


          • 減少短時記憶負擔 


          人的記憶力是有限的,我們的短時記憶每次最多只能記住五個東西。因此,界面設計應當盡可能簡潔,保持適當的信息層次結構,讓用戶去再認信息而不是去回憶。再認信息總是比回憶更容易,因為再認通過感知線索讓相關信息重現。例如,我們經常發現選擇題比簡答題更容易,因為選擇題只需要我們對正確答案再認,而不是從我們的記憶中提取。被彭博商業周刊稱為“世界上最具影響力的設計師之一”的Jakob Nielsen發明了幾種可用性研究方法,包括啟發式評估。信息再認而非回憶就是Nielsen界面設計10種可用性啟發式原則之一。


          了解蘋果的設計如何整合Shneiderman的8大黃金法則


          蘋果整合Shneiderman的八項黃金法設計出成功的產品,他們從Mac到移動設備設計都取得了巨大的成功,他們以產品設計的一致性,直觀而美麗為榮。蘋果的iOS人機界面指南也告訴我們他們的設計團隊如何應用Shneiderman的設計原則。


          1.  一致性


          “一致性”和“感知的穩定性”在Mac OS的設計中體現得淋漓盡致。不管是80年代的版本,還是現在的版本,Mac OS菜單欄設計都包含一致的圖形元素。


          7ad45947ce40a8012193a354848a.jpg

          作者/版權持有人:StockSnap.io    版權條款和許可:CC0


          c7165947ce52a8012193a32ce01b.jpg

          作者/版權持有人:StockSnap.io    版權條款和許可證:CC0


          隨著時間的推移,Mac OS的外觀有很大變化,Mac OS菜單欄設計都保持一致。


          2.  快捷操作


          如前所述,Mac允許用戶使用各種鍵盤快捷鍵,使用頻率高的包括復制和粘貼(Command-X和Command-V)以及截圖(Command-Shift-3)。


          343f5947ce68a8012193a316b2ce.jpg

          作者/版權持有人:StockSnap.io    版權條款和許可證:CC0


          Mac允許用戶鍵盤快捷方式操作實現通常需要鼠標、觸控板或其他輸入設備才能完成的操作。


          3.  有用信息反饋


          當用戶點擊Mac桌面上的文件時,該文件會“突出顯示”,這是視覺反饋的一個很好的示例。另外,當用戶拖動桌面上的文件夾時,他們可以看到在按住鼠標時,文件夾顯示被移動的狀態。


          c75f5947ce7da8012193a39ff8f0.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          56f45947ce8ca8012193a3703cff.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          4.  操作流程的設計


          當用戶將軟件安裝到Mac OS時,提示信息的屏幕顯示用戶當前的安裝步驟。


          81935947cea0a8012193a3e02c72.jpg

          作者/版權持有人:Google,Inc.    版權條款和許可:合理使用


          5.  錯誤操作的解決方案


          在軟件安裝過程中,如果發生錯誤,用戶將收到友好的提示信息。提供復雜的解決方案,或用戶難以理解的解決方案,或只報錯不提供解決方案,都是極大影響用戶體驗,使用戶沮喪的關鍵原因。根據錯誤操作的嚴重程度,區分何時使用小的,不會影響用戶操作的提醒,以及何時使用大的,侵入式提醒。但當錯誤操作發生時,請謹慎選擇正確的語氣和正確的語言提醒用戶操作錯誤。


          4be55947ceb2a8012193a3975133.jpg

          作者/版權持有人:Google,Inc.    版權條款和許可:合理使用


          Mac OS通過顯示一個溫和的提示消息向用戶解釋出現了什么錯誤操作及其原因。另外,解釋這是由于自己的安全偏好選擇,進一步向用戶保證,告訴他們一切在掌控范圍內。



          b14b5947cec4a8012193a377376a.jpg

          作者/版權持有人:Manutencaonet Blogspot     版權條款和許可:CC BY 3.0


          Windows系統中這個非常不友好的提示信息使用“fatal(后果嚴重的)”和“terminated(被終止)”字樣。這樣的負面的,不友好的言語肯定會嚇倒大多數用戶!


          6.  允許撤銷操作


          當用戶在安裝過程中提供信息時發生錯誤,允許他們重新回到上一步,而不必重新開始。



          b6ba5947ced6a8012193a36254cf.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          7.  給用戶掌控感


          讓用戶有權選擇是繼續運行程序還是退出程序,Mac的活動監視器允許用戶在程序意外崩潰時“強制退出”。


          1c765947cee9a8012193a3b3fb7c.jpg

          作者/版權持有人:Euphemia Wong    版權條款和許可:合理使用


          8.  減少短時記憶負荷


          由于人類短時記憶每次只能記住5個東西,所以蘋果iPhone屏幕底部的主菜單區域中只能放置4個及以下的應用程序圖標,這個設計不僅涉及對記憶負荷的考慮,還考慮了不同版本一致性問題。


          e2e95947cf00a8012193a3ebc1a0.jpg

          作者/版權持有人:Brian Voo    版權條款和許可:合理使用


          a7c65947cf2ca8012193a30aa178.jpg

          作者/版權持有人:Pixabay    版權條款和許可證:CC0


          工作表:如何將Shneiderman的8項黃金法則應用于你的界面設計


          作為設計師,你的工作是創建直觀,精美和流暢的用戶界面設計,讓用戶感到輕松和滿意。下面這個工作表可以幫你把上述這些規則應用于你的設計中。


          73f65947cf85a8012193a32d7543.jpg

          工作表的PDF格式下載鏈接: https://pan.baidu.com/s/1nvp1EKp    密碼: mjq7


          從Mac和PC到移動設備甚至是虛擬現實,以及將來可能出現的任何互動科技,只要你的設計涉及到人與界面之間的交互,這八大規則在設計過程中至關重要,不容忽視,現在就用這個工作表學習如何將它應用到你的設計中吧。


          作者: oftodesign

          轉載請注明:站酷

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

          魏華的微信.png

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

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

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

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


          日歷

          鏈接

          個人資料

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

          存檔

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