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

          首頁

          案例錦囊|交互設計中「情感化」設計優秀案例(二)

          seo達人


          1.  本能層 —— 感官刺激

          對于本能層,設計師需要在符合功能需求的前提下,盡可能的給用戶帶來聽覺、視覺、觸覺的感官刺激,極力去促成用戶與產品的 “一見鐘情”。

           

          案例 1  App Store 的卡片推薦做的很有新意,比如:把吉祥物(品牌形象)是小熊的工具收集到了一起,并取名為:熊幫手。

          圖片

           

          案例 2  微博長按點贊按鈕,可以選擇不同的點贊狀態。圖標還是動態的,很有趣。

          圖片

           

          案例 3  淘寶雙十一預熱,首頁的 icon 變成了 “今晚 20 點雙 11 搶預售”的字樣,烘托氛圍又打了廣告。

          圖片

           

          案例 4  微信撥打語音的界面,在等待好友接聽的過程中,可以看到好友朋友圈的圖片,緩解用戶等待時的無聊,也為即將進行的語音聊天提供了話題。

          圖片

           

          2. 行為層 —— 細節引導

          對于行為層,設計師需對用戶的行為進行預判和引導,利用細節處理打動用戶,讓用戶對產品產生信任感和依賴感。

           

          案例 1  :當蘋果公司發現用戶最近在官方渠道購買了新的 iPhone ,老 iPhone 的設置頁面就會給出提示,讓用戶為新的 iPhone 做好數據遷移準備。

          圖片

           

          案例 2  iOS 系統后臺在看縮略效果時,會將用戶的敏感、私密的信息的 App 頁面進行模糊處理,保護用戶的隱私安全。

          圖片

           

          案例 3  :在屏幕很暗的情況下,打開微信支付二維碼,屏幕會瞬間亮起,便于商家掃碼付款。

          圖片

           

          案例 4  貨拉拉在展示搬家車輛詳細信息時,使用了剖面圖,并模擬了不同搬家場景下的家具內容,讓用戶更好估算車輛空間。

          圖片

           

          3. 反思層 —— 認知共鳴

          對于反思層,設計師要調動用戶最深層的記憶和感知,將視覺效果、產品功能和用戶認知緊密結合,形成用戶對于產品和品牌的深刻認知。

           

          案例 1  FigJam 是一款來自 Figma 的多人協作在線白板工具,可以進行頭腦風暴、繪制流程、多人協同標記等。里面也有很多人性化的小功能,比如:當兩個人同時長按 “H” 鍵時,就會出現 highfive(擊掌的動效),非常適合當設計師達成共識時使用:

          圖片

           

          案例 2  小睡眠 App 發現學生時代的我們經常會在枯燥的課堂上睡覺,所以準備了各種課堂講解、校長發言、領導開會的聲音作為催眠、助眠的音樂,讓人會心一笑。

          圖片

           

          案例 3  餓了么在異常天氣下通過在界面上增加天氣的元素,讓用戶看到外賣小哥的辛苦,使用視覺和內容共情,喚起用戶的同理心,降低用戶因外賣遲到而做的投訴和差評。

          圖片

           

          案例 4  QQ音樂上線了寵物功能,一共有五個品種的寵物讓用戶可以選擇領取,多聽歌能喂飽寵物,然后送它出去參加演唱會或者和好友進行互動。

          圖片

           

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

          作者:元堯

          轉載請注明:學UI網》案例錦囊|交互設計中「情感化」設計優秀案例(二)

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

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

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

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


          設計的「七宗罪」

          seo達人

          一、差不多主義

          差不多主義:凡事都覺得差不多就行了,不是特別注重設計細節。

          如果每個部門都是“差不多主義”,我來給你算一下最終實現的產品會變成什么樣(我們就按還原度80%來算)。產品 → 交互 80%,交互 → UI 80%,UI → 研發 80%,最后則:80% x 80% x 80%=51.2%,最后實現的只有預期的 50% 左右,這個產品還怎么用?

          圖片

          每個設計師都要成為“處女座”像素眼,如果你只是為了想快速完成工作而搞出粗制濫造的設計,你的價值也很難體現出來。而且現在互聯網已經發展的比較成熟,很多產品差異化并沒有很大,如果你連細節都處理不好,要你何用?要在有限的時間內做出更精細的產品,打造完美產品,拒絕粗制濫造。

          而且近幾年很多公司對【產品體驗】越來越重視,比如我司就把前端部門改名為體驗技術部,旨在全員打造高質量、優體驗、重設計的產品。研發都注重體驗了,你再“差不多”就真的差多了~

          同時,有的設計師不善言辭,在對接需求或設計澄清的時候不會堅持自己的想法,有時候就算自己是對的,也會在其他人強勢的情況下敗下陣來。所以作為設計師一定要敢于力爭,強大的溝通能力也是職場晉升的一個重要表現。

           

          二、拿來主義

          抄襲:你直接叫我名得了。

          開始之前我們要區分一下抄襲和借鑒的含義。我專門查了下詞典,根據《現代漢語詞典》的解釋:抄襲是把別人的文章、作品私自照抄作為自己的去發表,并且實質性相似;借鑒是與別的人或事相對照,以便取長補短或吸取教訓。區別在于前者是“照樣抄錄”,后者是“參考仿照”。

          把借鑒當做尋找靈感對任何設計師來說都是一個自然的過程。

          學過美術的都知道,畫畫前期都是需要臨摹的,這個就是借鑒、學習的過程,如果你拿臨摹的畫去商用,那肯定會被打~

          我們經常做的競品調研就是借鑒的過程,去了解競對都有哪些值得學習的地方,哪些地方做的不好不適合我們,我們可以創新的。

          不要直接把競對的產品拿過來抄,一些初級產品經理就會經常這么干,看競對有什么,他們就抄;競對是怎么處理了,他們就怎么處理。永遠跟不上市場的腳步,別人都產品化了你才開始搞,吃屎都趕不上熱的~

          圖片

          設計真的很辛苦,我們可以把別人的作品作為“日常練習”,去從中學習原作者是如何思考、設計的。如果你拿他做除學習外的任何其他用途,都是不允許的。

          其實設計已經發展到了幾乎不可能 100% 原創的時代,我們就是要把所學所見混在一起,創造出一些新的設計。解決方案永遠不止一個,思維夠活躍,就有千萬種可能。

          圖片

          在數字時代,你拿別人的設計搞事情,是藏不住的,我平時發一些“曝光抄襲類”文章的時候,瀏覽量比平時都要高很多,大家對抄襲還是很關注的。

          平時我在面試的時候,如果你是“拿來主義”,一眼就會被看穿的,不要問我怎么看出來的,看多了你也就能一眼望穿了。

          借鑒總是好的!但不要復制TA的風格或元素,試著創造你自己的風格和想法,這樣才是好的借鑒形式。

           

          三、不拒先生:從來不拒絕需求

          這種“職場好人”性格其實是非??膳碌?。不是所有的需求都是合理的,也不是所有的需求你都能做。但只要你接下了,你就要負責到底。

          新手容易犯的一個錯誤就是:不會評估工作量,leader 給你工作的時候他會有個時間預期,但有時候也不是完全準確的,你要自己評估在這個時間內是否可以完成,完不成的話就要 say no,重新規劃時間。

          還有一個比較容易犯的錯是:leader 給你任務,你為了凸顯自己工作效率高,來幾個需求接幾個需求,完不成的話就自己硬扛著熬夜加班加點,雖然說這樣可以多接觸需求快速成長,但長此以往,如果有個需求加班加點都搞不出來,你又承諾了沒問題,最后沒完成導致研發延期了,只能你背鍋。

          要適當的合理安排需求,不要工作一年,加出來三年工作經驗,你這是卷誰呢?

          圖片

          在設計澄清的時候,別人反饋的問題做記錄,然后思考合不合理,不要一有質疑聲你就覺得自己的方案不行,就改改改,有的質疑是合理的,有的不合理,你要有判斷,設計決策你來把控。

          圖片

          平時自己做好需求的時間規劃,細化到小時維度,這樣別人再問你有沒有時間接需求的時候,你就可以理直氣壯的告訴他有 or 沒有。

          還有一個需要注意的就是,跨部門的上級找你做東西的時候,一定要讓他找你的直屬 leader,保證需求的統一入口,這樣對大家都好。之前我部門就有個設計師,別的部門領導就老直接找他做東西,然后回頭我們老大找他要之前任務結果的時候,他才說沒完成~

          摸魚法則第一招:我很忙,需求往后排~

           

          四、多情:今天喜歡他,明天喜歡她

          產品化的界面可不是你喜歡什么就設計什么的,要考慮整體風格。尤其是 B 端產品,風格統一和樣式延展性是必要考慮的因素之一,你可以有個性化,但不要跟現有風格違和,適合的才是最好的。

          當然了,這么說不是讓你不要創新,是在原有地基之上創新產品。你設計的再好看,紅杏出墻了有何用?新手和老手的區別,在于一個只關注當下,一個考慮全局。初級只會把當下做的盡善盡美,活靈活現;老手會在保證全局完整性的前提下最大化的產品創新和易用。

          圖片

          每年流行的設計風格是不一樣的,專注視覺展現的產品來說,可以追隨設計潮流,展現最新的設計風格是沒問題的。但是像 B 端產品,風格迭代是要有時間周期的,而且大部分比視覺風格的周期要長,所以每次大改版的時候,要考慮未來的設計趨勢。

          剛才我也提到了,最佳方案永遠不止有一個,找到適合自己產品的就可以,如果有一些方案都覺得不錯,可以做 AB 測試,選出最好的方案做產品化。

          鼓勵多看、多學,自己思想加工好了融合到產品中,而不是一味地直呼:這個設計真 NB!我也要用!

           

          五、感性大于理性

          字面意思很好理解,之前我們都說設計師是感性的,但是當設計與商業結合,就不能是純感性的了。任何的產品設計都是基于數據、基于市場需求。我們大部分設計師都不是藝術家,都在為連接商業而努力。

          而且設計師也在向理性化慢慢發展,拿設計師的價值來說,之前是很難被體現出來的,現在因為和商業結合,價值慢慢的被體現出來、慢慢可量化了。

          我們在做產品設計的時候也是這樣,基于調研和分析來做產品,而不是天馬行空,想到什么做什么。設計從感性逐步走向理性,也是一個成長的過程,一切以結果為導向,善用理性思維思考問題,會更讓其他人信服。一切設計都有理有據,和別人 battle 的時候也不慫~

          ps:在和女朋友交往中恰恰相反,切記~切記~~

           

          六、妄想:可以創新,不要妄想

          一切設計都是以結果為導向,YY 出來的飛機稿只能送到村東頭的廁所里。我們在腦暴設計方案的時候,一開始都是天馬行空,想到什么就寫什么,但是最終都會聚焦到產品上,縮小聚焦點,最后產出可落地的方案。

          圖片

          設計師的創新能力是很重要的,為什么企業在招人的時候,會更看重年輕一些的呢?因為他的腦洞是打開的,有更多的 idea 迸發出來。如果你只是循規蹈矩的維護產品迭代,遲早會被淘汰。

          設計本身就是一個開闊腦洞的一群人做事情,所以早些年設計師的價值是無法被量化的,近幾年都在講量化指標、結果導向,設計師的價值也慢慢的被量化出來。

          一個好的產品設計師輸出的方案不一定是最完美的,但是絕對是在能落地的基礎上接近完美的。不夠完美我們可以再優化,如果一直停留在 YY 層,永遠不能落地實現,那你的價值何在?

          我相信大家在面試的時候也都感受到過,線上作品遠比飛機稿要重要得多,因為他可以驗證你的方案是可行而不是你自己 YY 的,公司招你來是讓你有具體產出的,不是來讓你當藝術家烘托氣氛。

          我們經常會在大膽創新和為了功能上線的邊緣試探,哪怕是多一點點的設計元素加進去,也是我們努力的結果。

          要記住,我們是設計師,在飛翔的時候看清邊界在哪,我們是帶領世界品味走向的一群人,可以創新不要妄想。

           

          七、炫技:裝飾性大于內容本身

          最好的設計就是不用設計,最好的設計是簡單的。

          部分設計師在出方案的時候,為了凸顯自己的設計能力,會有意無意的增加一些裝飾元素設計,然而頁面的承載量是一定的,裝飾性的設計過多會直接影響用戶找到頁面中的重要信息。好的設計不需要過多的裝飾,蘋果的極簡風就很棒,一直沿用至今。

          其實現在產品上并不是裝飾的重災區,作品集才是!我們團隊在招人,每天能看到大量的簡歷,確實有很大一部分人為了凸顯設計能力,把作品集做的五彩繽紛,整成了大雜燴,而且裝飾性的元素、樣機比以往工作項目的占比還要多,這不就喧賓奪主了嗎?這樣的作品集基本就無緣了~

          在設計之前,一定要了解最終目標是什么,然后基于目標再拆分行動項,把不必要的內容直接砍掉,用戶在瀏覽頁面的時候,有效時間就 3 秒鐘,3 秒鐘沒有找到自己想要的內容,就會流失。

          我們只會吐槽老板的那句:“放大放大再放大”。其實深入想一下,他只是想要突出一個點而已~

          不要撿了芝麻丟西瓜。

           

          寫在最后

          設計中有很多很多的問題,我們也都是在不斷的摸索中成長,今天給大家分享了幾個典型的“罪”,希望引以為戒,哪怕其中一點對你有幫助,也不枉碼這么多字~

          今日金句:

          在非洲大草原上,無論你是獅子還是羚羊,每當太陽升起,你唯一要做的就是奔跑。

          圖片

          叮鈴鈴~~下課!

           

          原文地址:友設青年(公眾號)

          作者:Luckgg

          轉載請注明:學UI網》設計的「七宗罪」

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

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

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

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


          業務想大多全,用戶要精準簡,首頁設計該如何破局?

          seo達人


          圖片

          “不行,這個必須在首頁!另外我還有倆新業務入口,你想想辦法”,業務方出于對流量的考慮,總是希望做加法。

          “別整那么多沒用的,我就想找個xx,剩下從來不看的”,用戶出于效率體驗,總期望做減法。

          加減之間,是業務與用戶對立而尖銳的需求,同時也是多類型服務產品首頁設計的重難點。今天,就以“58首頁設計”為例,與大家談談解題思路。

           

          01.什么是多類型服務產品?

          簡單說就是,多個關聯度較低的服務捆綁在一起形成的產品,常見于平臺式工具產品,例如支付寶、美團、58同城等。

           

          02.設計挑戰是什么?

          以58為例,一方面,業務工具屬性強,且用戶耦合性低。說人話就是,用戶都是來找工具的,但由于AB業務關聯度太低,用A業務的用戶幾乎不會用到B業務,AB業務分別擁有獨自用戶群。這也就造成用戶期望更高的推薦精準度,頁面上任何一個無關信息都是干擾,都是對連接效率的打折。

          但另一方面,平臺上的業務很多,還都想在首頁曝光。而且隨著各業務設計師的不斷努力,連接的形式也在不斷豐富,視頻、直播、VR,從業務貼到聚合推薦,層出不窮。首頁面臨更大的信息承載壓力。

          所以,這類型產品首頁最大的挑戰,就是“多業務的曝光需求和用戶的精準連接之間的矛盾”,如何才能在推薦技術不變的情況下,通過設計來應對挑戰呢?

           

          03.如何破解?

          既然是信息傳遞和收取之間的矛盾,那我們就從“人-場景-信息”的對應關系入手,分析信息在不同場景的優先級和適合的顆粒度。

          圖片

          人-場景-信息優先級和顆粒度

           

          1、用戶分類

          根據用戶需求分為三類。

          1)預裝用戶:非自主下載,不了解產品功能

          2)服務需求用戶:使用相對固定的服務

          3)內容需求用戶:獲取本地或相關服務信息

          2、按照用戶區分場景需求

          1)預裝用戶:建立產品認知、保留用戶不卸載

          2)服務需求用戶:更有針對性的服務展示,盡可能少的干擾信息

          3)內容需求用戶:更多類型的內容展示

          3、按照場景定位信息的優先級和顆粒度

          1)預裝用戶:

          采用運營曝光策略。保留一級主服務入口,幫助建立產品認知。同時曝光更多內容信息和留存向的運營功能,以提升留存率。

          圖片

          預裝型用戶信息

           

          2)服務需求用戶:

          采用目標服務曝光策略。保留一級業務主服務入口,方便業務切換。但擴展目標服務的二級信息曝光度,用以縮短路徑。同時增加動態服務模塊,來跟進用戶動作,服務于用戶。

          圖片

          服務型用戶信息

           

          3)內容需求用戶:

          采用平衡曝光策略。保留一級主服務入口,方便業務切換。同時擴展內容曝光度。

          圖片

          內容型用戶信息

           

          04.設計思路

          1、搭建擴展性框架:調整為頂部tab結構,釋放更多定位信號,增加曝光渠道。

          原腰部tab是對“原首頁”內容的劃分,現將整個“首頁”置于第一個tab下,后續tab內容將與“首頁”并列,從而釋放更多獨立的曝光渠道。

          圖片

          腰部tab結構
           

          圖片

          頂部tab結構

           

          2、使用更靈活的組件:變形金剛與瀑布流。

          首先,金剛位是一級服務入口的集合,且處于首屏上部,是非常好的建立產品認知的模塊。將其原有打散在15個位置上的服務,按照大類聚合安置,更容易傳達產品的主服務是什么。

          圖片

          金剛位結構對比

           

          其次,為了應對用戶精準簡的需求,金剛也可以做靈活變形,曝光更多目標服務的二級選項。

          圖片

          變形金剛位

           

          而瀑布流方式也為更多樣的服務連接形式提供了承載能力。

          圖片

          列表與瀑布流

           

          3、豐富的信息容器:

          設計包含圖、文、圖文、VR、視頻、聚合類目、動態服務模塊等信息聚合方式的瀑布流卡片,同時加入即時推薦功能,讓瀑布流具備包容和靈活的特性。

          圖片

          組件容器

           

          4、整合平臺的運營能力:設計平臺級留存向運營中心。

          以往,各業務線運營功能深藏在業務頁面中,用戶往往需要通過較長的路徑才能接觸到運營功能,且用戶也并不能發現平臺上所有運營功能。這種分散式分布的方式,使得運營吸引力和留存能力上都打了折扣?,F將所有業務的運營功能聚合,打造平臺的運營中心,使發現路徑更短,聚合吸引力更強。

          圖片

          原路徑&現路徑

           

          圖片

          默認服務型首頁&上滑2樓運營中心

           

          05.設計展示

          圖片

          從依靠推薦技術讓內容適應用戶需求,到設計靈活可變動的組件來適應chang場景的信息承載,我們希望可以在產品和用戶需求的矛盾中尋求更優的平衡點。

           

           

          原文地址:58UXD(公眾號)

          作者:環鐵藝術家

          轉載請注明:學UI網》業務想大多全,用戶要精準簡,首頁設計該如何破局?

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

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

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

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

          超喜歡,這個AI小技巧!

          seo達人


          圖片
           
          什么?還有人不知道這種字體效果是怎么做的?
          好吧,就讓可愛又迷人的星火君把這個方法分享給你們吧!

          開始學習啦!

           

          教程步驟

          圖片

          圖片

          圖片

          圖片

           

          1.打開ai

          輸入文字。鼠標右鍵單擊,選擇變換——對稱,之后選擇水平,并點擊復制。

          把文字鏡像復制一個。

           

          圖片

          圖片

           

          2.符號面板

          整體旋轉90°,并調出符號面板。選中文字,鼠標拖入符號面板備用。

          圖片

          圖片

          圖片

          圖片

           

          3.畫圓

          用橢圓工具制作一個正圓

          之后選擇效果——3D——凸出和斜角。勾選預覽,調整角度和凸出厚度。

          之后點擊貼圖,勾選三維模型不可見,選擇第3個面,符號選擇我們剛剛拖進去的文字,也就是新建符號,點擊縮放以適合,讓文字貼合畫面,點擊確定。

          再稍微調整角度,調到合適的位置,就可以了。

           

          圖片

          圖片

          圖片

           

          4.擴展外觀

          之后對象——擴展外觀。

          右鍵取消編組,再右鍵釋放剪切蒙版。

          這樣就可以隨意更改文字顏色啦。

          圖片

          看起來步驟很多,其實操作起來還是很簡單的。everybody,學起來?。?

          那小分享就到這里吧,下期再見哦~

           

          原文地址:詩人星火宇宙(公眾號)

          作者: 星火君

          轉載請注明:學UI網》超喜歡,這個AI小技巧!

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

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

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

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


          G端可視化中的適老化設計

          ui設計分享達人

          前言


          調查顯示,2020年我國老年人口達到約2.43億,占比18%,50歲以上的網民群體占比22.8%,G端可視化面對的主要群體就是政府領導,而政府大領導普遍都是市級及其以上,年紀大多數為60歲往上,屬于適老化的涵蓋范圍,因此探索適老化在G端大屏中的體現,也是很有必要的。

          有人說:適老化是減少操作,注重呈現,是在設計方案中的體現。并且適老化設計,本身也是給老年人群體的一種特殊定制。

          在我眼里看來:G端可視化大屏本身就是面向定制化,不存在特殊化或普遍化,因為他的群體本身就是老年客戶,既然是這個群體,那么適老化就是我們設計師需要考慮的。



          一、通用性和包容性設計


          首先一般講適老化無障礙設計,我們都要提到的就是通用性設計和包容性設計。


          通用性設計


          原則:強調設計所有的系統和產品,使每個人都能使用,無論他們的年齡或能力。

          百度百科將通用設計定義為:“能被失能者所使用,就更能被所有的人使用。通用設計的核心思想是:把所有人都看成是程度不同的能力障礙者,即人的能力是有限的,人們具有的能力不同,在不同環境具有的能力也不同。”

          通用設計中應當也包含對于特殊人群的基本考慮,要讓目標人群覺得:魚和熊掌都可兼得,既照顧了特殊人群的使用,又兼顧所有人。



          包容性設計


          則 :好的設計應該滿足盡可能多得使用者的需求。

          百度百科將包容性設計定義為:包容性設計著眼于清楚源于使用主體而造成的各種障礙,使每個個體都能平等、自信、獨立的正常使用,為同一適用條件下的互動提供了新的視角,也為創造性和問題解決導向的設計提供了機會。


          那么我們應該如何踐行通用性和包容性設計在G端可視化中的理念呢?



          二、客戶的困境-現狀分析


          通過分析客戶的困境,結合現狀進行深入分析,發掘政府端客戶的普遍性存在的問題。


          年齡分布適老


          大多數政府省市級領導人的年紀均在60左右,由于年齡普遍較大,對于設計的認知會有偏差,對于審美的把控以及設計本身的價值理解會偏弱。

          從去年十月上旬開始,省級黨委換屆拉開大幕,在至今近8個月的時間里,全國31個省區市先后展開換屆。經過此次換屆,干部隊伍的年齡結構得到進一步優化,初步形成“50后”為主導、“60后”漸成中堅的格局。

          根據公開資料統計,31省區市書記平均年齡為58.1歲。其中,“40后”書記有6位,“50后”有22位,“60后”也有3位,某區黨委書記胡XX和XX省委書記孫XX同為63年出生,是最年輕的書記。



          生理機能下降


          視力:老年人視力的下降,影響眼睛對空間、顏色、明暗等加工等;

          聽力:聽力弱化造成的聽不清楚,尤其是在嘈雜的環境中,老年人聽起聲音來會更吃力;

          表達力:專業化的術語以及需求,會使表達和溝通不便;



          認知能力不足


          互聯網和人工智能等技術發展變化太快導致認知力的不足。

          絕大多數的老年人對現在數字化的產品很陌生,再加上復雜的界面操作,需要反復的學習使用才能熟悉掌握。



          三、設計的探索-客戶心理


          ToG類型的項目,我們的客戶群體是政府的某個部門(G端行業中,政府部門因為權限和管轄內容的不同,客戶的訴求也會不一樣,同時由于決策層是一級一級往上的,對于各個層級的領導都需要去進行滿足,對于設計的要求也就更高了),因此我們需要對客戶的心理進行重點挖掘。


          1、政府部門客戶的特點


          • 嚴謹務實原則

          政府部門的領導或者員工大多數都是高知人群,對于工作的態度都是非常嚴謹,喜歡按規矩辦事,分工明確,力求事情做到一絲不茍,有理有據,講究嚴謹做人,務實做事。


          • 安全性原則

          政府部門的保密工作需要做的非常到位,尤其是關于公安等民生問題時。另外政府類客戶一般對于數據的保密做的非常好,基本都是內網開發,私有化部署,一切互聯網的東西連接內網都會報警。如果是外網開發,則需要做好數據存儲,一定要非常注重數據安全。


          • 實用性原則

          政府類的軟件或者產品,基本都有很強的實用性,實用好用才是客戶最關心的問題,因此在系統架構上需要做到,簡單高效,快速觸達,減少客戶的學習成本。


          所以針對政府客戶特點,我們需要做到嚴謹務實的態度,安全實用,簡單高效。



          2、政府部門客戶的需求


          • 正文字要大

          對于文字大小的需求比較強烈,提及最多的就是字體放大,加粗。


          • 屏幕要看清

          對于畫面能夠看清,需要重點表現在前景和背景的色彩對比度。


          • 畫面要酷炫

          對于畫面的表現,要更加的酷炫,在客戶眼里,動態圖形效果遠遠大于靜態效果圖。


          • 飽和度要高

          隨著年齡增長,人類的晶狀體會變黃變渾濁,導致選擇性的吸收藍光。所以藍色色調在老年人眼中可能會出現模糊褪色的視覺效果,從而降低元素在界面中的對比度, 因此需要提高色彩的飽和度。


          • 邏輯要清晰

          產品整體架構以及內容邏輯清晰,簡單高效,上手簡易。


          所以針對政府客戶的需求,我們需要做到畫面清晰,視覺酷炫,色彩明亮,邏輯清晰。



          四、策略的應對-解決方案


          通過對政府類客戶的分析,挖掘客戶最深層的需求,針對于以上的關鍵點,提出適合的解決方案,大體在一下6個方面的全面解析。


          1、解決方案:框架


          對于系統框架以及布局進行一屏式展示,減少系統層級的遞進。

          對于展示形式上可以更清晰準確, 盡量模塊化展示每個需求,做到聚焦用戶視角,提升畫面表現。

          整體交互流程簡化,復雜以及多層級彈框盡量少使用。



          2、解決方案:字體


          • 中文字體

          中文字體類型的使用,在使用數字屏幕閱讀時,字體的選擇要選用無襯線體(比如黑體,微軟雅黑)厚重一點,不可選用襯線體(比如宋體,書法體)比較單薄。


          • 英文字體

          英文字體類型的使用,英文數字的字體選擇更明顯的粗體,因為要展示數據,使得數據展示更加直觀,依舊是選用無襯線體,比較推薦:D-DIN字體。


          • 字體大小

          字體大小的定義。在字體大小的選擇上,參考了頁面上常規大小,定義了一套關于不同尺寸下的標準字號,正常1080P頁面,最小字號不小于16px,具體字體大小還需要參考設備清晰度,環境燈光,視距等因素。




          3、解決方案:顏色


          • 顏色對比

          界面中的前景與背景的對比度,是否足以讓政府類客戶清楚識別;

          顏色不應該用作傳達信息的唯一視覺手段,需要用額外的文字提示;

          通過 H(色相)S(飽和度)B(明度)的數值來劃分色域,在保持H值不變的前提下,定義了10個色域。所以在前后景的顏色選擇上,滿足跨度至少為6,才能讓目標人群準確識別文字信息。


          • 對比度檢測

          視覺呈現以及文案圖像對比度至少要有7:1,大文本至少有4.5:1的對比度。有很多在線工具可以幫助檢測顏色對比度以及是否達標,如Contrast Ratio 在線檢測工具:

          https://contrast-ratio.com/



          • 顏色多樣

          畫面采用多種飽和度較高的顏色,而不是單色;

          顏色的豐富程度決定了畫面的視覺表達,色彩越豐富,畫面表現越好;



          4、解決方案:圖形


          增加圖形的占比大小,提升視覺上的表現;

          盡量采用識別度較強的圖形和圖標,盡可能貼近客戶的認知范疇;

          圖標和圖形盡量搭配文字描述,方便客戶更清晰更快速理解。



          5、解決方案:視距


          觀測距離的遠近,也決定著畫面的展示效果,盡可能的拉近觀測距離;

          正常視距觀測下,以常規設計規范去制定即可,如若觀測距離較近,則可適當縮小相應的視覺表現,反而觀測距離較遠,則放大視覺。



          6、解決方案:設備


          設備的尺寸、精度,分辨率大小都會影響目標人群的體驗;

          在設備精度較低,或者說點間距過大時,應當適當放大視覺表現,點間距小的則顯示非常清晰,可適當縮小視覺表現。



          五、規范的提煉-應用推廣


          為了保證適老化的推廣,需要在適老化的基礎上統一標準,在字體,顏色,框架,圖形等內容上做出提煉,深入了解目標客戶的需求以及客戶心理。

          本著嚴謹務實,安全性,實用性等原則,沉淀出一套符合目標人群的設計規范,應用并推廣到不同設計團隊以及推廣到廣大設計師中去。



          六、未來的期許-設計使命


          我們需要不斷踐行適老化設計原則,體現設計的通用性和包容性,應當在設計表現和產品功能上更加的包容這個群體。人工智能大數據時代,雖說政府類客戶會比普通人更容易接受,但是受制于某些原因,推動解決老年人面對智能技術的問題解決才是重中之中。

          設計師也需要運用自己的專業性,來幫助目標人群融入數字化的生活中去。

          因為在不久的將來,我們也會變成這個群體,當我們面對這些束手無策時,那時的設計又會是如何適老的呢?適老化設計是適合所有人的設計,所有的設計師都應該密切關注。



          七、全篇總結


          1-不要依賴顏色來傳達信息(客戶更喜歡文本,有特殊含義除外:四色預警,國標色);

          2-文字展示要清晰,字號大小要更加適合目標群體;

          3-提高顏色對比度,豐富畫面色彩,禁止使用單一色系;

          4-界面中重要元素應盡量避免使用藍色(特殊行業除外:公安等其他);

          5-增加圖形以及圖標的視覺表現,盡可能做到一目了然,便于客戶理解;

          6-盡可能拉近觀測距離,提升觀測體驗;

          7-選用高性能,高清晰設備,提升觀感,優化客戶體驗;

          8-針對政府客戶特點,做到態度嚴謹務實,安全實用,簡單高效;

          9-針對政府客戶的需求,做到畫面清晰,視覺酷炫,色彩豐富明亮,邏輯清晰;

          10-盲目照搬照抄而不去具體問題具體分析,這些無障礙設計在某種程度上就會成為“障礙”設計。

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

          文章來源:站酷。 作者:  AYONG_BOR
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          思考數據可視化應用設計規范

          ui設計分享達人


          一、圖表的分類介紹以及應用范圍


          一提到圖表,大家腦海里浮現的,通常是柱狀圖、餅圖、趨勢圖等等。這是按照圖形等維度對圖表進行分類,經常會導致圖表的誤用。

          圖表的作用,是幫助我們更好地看懂數據。選擇什么圖表,需要回答的首要問題是『我有什么數據,需要用圖表做什么』,而不是 『圖表長成什么樣』 。因此我們從數據出發,從功能角度對圖表進行分類。






          二、畫面布局在實戰中的應用


          在畫面中我們經常會遇到各式各樣的屏幕分辨率,有大屏的LED屏,有平面顯示屏,數字拼接屏等等。那么具體的項目中我們如何去定義這些不同尺寸的屏幕來進行畫面布局呢?



          如若有其他分辨率下的屏幕,按照這個規律的基本布局,盡量使組件呈現16:9比例排布是最好的;超長分辨率下的大屏設計或者拼接很多塊顯示器的大屏可以通過具體業務內容來展示,按模塊去劃分,功能點明確即可。

          此處布局只是我個人覺得比較合適的展示方式,并不代表一定是需要這么排布,還可以有很多的形式去布局。也可能因為業務不同,版式也會有調整,不過萬變不離其中,掌握基礎要素,其他分辨率下照樣可以有很多編排形式!





          三、硬件常用尺寸以及設備


          Led屏幕


          1、點間距不同


          p3點與點之間的距離是3毫米,p4點與點之間的距離是4毫米。


          2、清晰度不同


          P后面那個數字越小,代表兩個燈珠之間的距離越小,清晰度越高,相對應,價格也會高,因為每平方的像素點P3比P4多很多,成像效果好。


          3、最佳可視距離不同


          點間距P3(3mm)的顯示屏,它的最佳可視距離是3.5~10米,點間距P4(4mm)的顯示屏,它的最佳可視距離是5~13.5米??梢愿鶕约旱膶嶋H情況,選擇最適合的型號。



          拼接屏


          拼接的每塊小屏一般是16:9的高清屏,設計尺寸可以把上下高度設定為1080px,長度按照拼接屏的數量比例得出長度的設計尺寸。例如3乘5的一塊大屏幕,高度3塊屏設為1080,每塊高就是360,360除9乘16等640,640就是一塊屏幕的長度,640乘5塊屏=3200最后得出設計稿尺寸就是:高1080px乘寬3200px(在這里感謝我的數學老師)


          現在企業常用的有無縫隙、1.7mm縫隙、3.5mm縫隙、三種拼接大屏,縫隙越小越貴。


          另外大屏設計還有一個比較重要的問題就是注意拼接屏之間的縫隙,設計時千萬不能跨屏設計,不然很影響美觀。





          控制端


          目前企業用的最多的控制端為ipad控制,需要在ipad上制作出控制端頁面,一般尺寸為2048*1536,控制端大多數為按鈕操作,頁面盡量簡單明了。





          四、字體字號以及畫面配色631


          字體字號


          在數據可視化設計中,一般選中的字體有如下幾種:

          1. 中文字體:蘋方,思源黑體

          2. 英文字體:DIN,DIN-PRO

          3. 數字字體:Exo

          正常1080P情況下,由于甲方大多數為政府機構,文字要求會比一般的要求大一點,一般都是選擇最小16px。字號不是固定的,人是活的,規范是由人制定的,切勿迷信規范。



          配色法則以及顏色選用


          運用配色631法則,將配色定義為主色60%,輔助色30%,對比色10%去貫穿整套界面文字的顏色通過重要、普通、次要去分配,是帶有色彩傾向豐富頁面視覺。

          在數據可視化設計中,由于大屏是偏暗的,所以需要選擇高飽和度的色彩,并且需要選擇統一的顏色,保持畫面協調。

          有時候會遇到客戶需要高飽和度的顏色并且多個顏色的時候,在選用時盡量選用飽和度不要太高的顏色,不然畫面會很不協調,也就是所說的晃眼。



          在設計過程中盡量選用深色背景作為畫面主背景,這個可以解決大屏因為色差問題,對整體頁面的影響,用戶也比較容易忽略拼縫中的存在的跨屏感。同時深色背景時更容易突出主體,畫面效果更好,更能體現流光、粒子、發光等酷炫效果。

          同時,大屏由于有色差,盡量不要使用漸變色,如若需要使用需要到達現場,根據大屏反饋的色差,現場調整,但還是推薦盡量使用純色。




          五、畫面飽滿以及頁面裝飾點線面


          畫面如何飽滿


          方式一:字體的飽滿

          將字體處理后,空白面積減少,整體更飽滿了些

          方式二文字的飽滿

          正常情況下為使閱讀更方便,標題間距給-10%~20%為佳。

          通常數字會比漢字小,為使基線對齊,數字與漢字需分開設置字號。

          主副標題字號比例過大過小會導致界面不平衡,建議主標題是副標題的1.5倍。



          方式三關系的飽滿

          當A=B時,圖標和文字的關系會混淆,這種情況下要滿足B>A,用間距分層次


          采用黃金分割0.618值。也就是橫向21個小方塊,豎向13個小方塊。此時,最優雅的板式是A>B的間距,1>2>3的間距。



          方式四:圖標的飽滿



          頁面如何裝飾會更豐富(如何運用點線面三大構成)


          我們在設計的過程中,經常會因為畫面不夠飽滿頁面太空,收到客戶的吐槽,下面就講講如何通過點線面來豐富畫面,使畫面更豐富更有層次感。


          1.原畫面設計完成



          2.添加裝飾線(點線面構成)




          3.調整位置,豐富畫面



          在畫面添加裝飾的情況下需要給畫面留足位置,數據可視化大屏本身面積就比較大,合理運用畫面以及拼接屏縫隙添加裝飾線,可以更好的減輕拼縫所帶來的影響。裝飾線的添加還可以在后期豐富畫面動效,科技感十足,在頁面中添加裝飾線在我看來,非常的有意義,既可以豐富畫面,又可以完善動效,一舉兩得。


          在裝飾線添加這一塊,推薦大家多去看看國外的可視化設計,哪些幾乎將點線面構成發揮到了極致。




          六、畫面動效以及素材靈感收集


          動效制作


          C4D+AE

          在很多設計項目中會用到很多酷炫的科技模型,比如汽車、人物、地球模型等等,我們可以運用C4D來進行主視覺建模,再通過AE進行動效輸出。




          有的人可能會問在導入數據之后可能由于數據量不大的原因,動態效果不是很明顯,在這種情況下,咱們可以把不變的數據量,做成AE動效,可以把動效導成json文件直接發給前端,能很大程度上保障畫面動態效果。



          素材靈感收集


          Behance

          在behance上有很多國外的設計師,他們的數據可視化設計做的都非常漂亮,極具代表性風格,我們可以通過behance搜索HUD 即可搜出來一大堆精美的高清原尺寸設計圖,同時可以把這些作品保存到自己情緒版中,非常的方便。


          pinterest

          從“書簽”這個角度出發,我們可以發現其實Pinterest的本質就是一張張精美絕倫的圖片書簽。每一個在Pinterest上的圖片其實都是一個個網頁上所提取濃縮而成的書簽。pinterest對圖片的關注是最用心的,去除了其他的各種干擾,Pinterest只注重圖片的呈現。

          而且Pinterest有個非常獨特的功能,就是他能夠自動篩選同類型圖片,并且精準度非常高。



          Videohive

          這是一個專注視頻模板和素材的網站(收費),在此可以搜索出很多的HUD動效視頻以及高清圖片。


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

          文章來源:站酷。 作者:  AYONG_BOR
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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



          關于讓設計工作流程更加高效的思考!

          資深UI設計者

          項目的運作是需要多人合作完成的,在這個過程中會遇到內部和外部的各種的問題,我們這里主要討論的問題屬于內部問題,分人和事。


          一、溝通前,多站在對方角度思考


          項目大小不同,投入資源會有所分別,但是項目成員專業構成上卻都基本是一致的。大家的專業背景不同,相互并不了解各自的工作,思維方式也是不同的,大家在討論工作的時候也是習慣用自己熟悉的方式進行溝通,相同的事物會存在認知的差異,在傳遞、執行的時候產生偏差,從而影響目標達成的效率。工作中各自的工作都有不同的專業目標和標準,大家討論問題都是奔著解決自己的專業目標去的,目標不同,訴求肯定就不一樣。


          如下圖,只有三方達成共識才能做出“好的產品體驗”對用戶有價值、高滿意度的產品,缺少一方都無法完成這個目標。


          舉例:開發在實現一個頁面的時候,他們首先要考慮的不是頁面好不好看的問題,而是從實現角度考慮技術方案、難度、性能;設計則是考慮視覺上的美觀性、易用性;產品需求方則是考慮是否能滿足需求,達成目標數據;在這個項目執行過程中,如果大家都堅持自己目標不讓步,這個項目就很難進行下去,然后就有了“妥協”,項目的執行其實就是成員之間相互妥協、博弈的過程。這個過程需要項目團隊不斷的“磨合”,然后形成共識、工作上的默契。


          “妥協”這里不是退讓和降低標準,而是需要站在對方的角度思考,他為什么會要這樣做?他和自己的方案哪個更有利于項目,如果他的方案有利,自己需要做出那些改變和投入?(這里要考慮可行性);如果自己的方案更有利項目,那就需要闡述自己方案的優勢,有理有據說服對方接納;這個過程必然是順暢的,提升在執行項目時候的效率。


          二、項目過程中,及時同步信息并達成一致


          項目常見問題:項目從開始到結束會有很多個項目節點,在過程中因成本和難度,不斷修改設計導致的結果偏差;參與決策者較多,之間沒有達成共識,在項目不同階段完成決策,導致的結果偏差;因外部因數導致目標的變化等等問題…


          每個項目的流程都有不同的差異,但是多多少少都有上面提到的溝通問題和信息傳遞的問題,工作中我一直在思考如何更加有效進行溝通和同步信息。這里和大家分享交流一些心得和看法。


          1、優化流程中的溝通、信息同步

          明確流程節點上需要參與的人員,確保信息的同步觸達范圍;明確流程節點上需要完成的任務,并且有統一的輸出標準、評價標準,讓每一個人都清楚自己在做什么、如何去做;明確每一個階段所需要達成的目標,讓項目成員在項目進行過程中也清晰自己的任務,同時讓新加入、合作的同事快速了解項目,提升協作上的效率,完成一致的目標任務


          2、根據項目大小對流程進行分類

          項目流程模塊化,針對不同內型項目,明確任務需求模板:小項目(A任務) 、中型項目(A+B任務)、大型項目(A+B+C任務),


          3、加強目標在項目中的一致性,建立高效的決策機制

          通過項目階段任務評審,及時將信息同步給項目成員,建立由“項目核心成員”和“決策者”組成的“評審團”,有分歧和問題的時候快速決策,解決問題;避免只討論不做決策的會議,因為永遠都是沒有結論的


          項目經歷和思考


          再過往的項目經歷中,不同公司在不同文化背景下對于項目的流程管控和要求有著比較大的區別。


          • 互聯網公司文化是比較看中體驗的,這種思想是從上至下的,所以再遇到有分歧問題的時候大家有一個共同的判斷標準“這樣做是否會傷害用戶體驗?”,在此基礎上再去討論我們應該這么做,相對比較容易達成共識;

          • 在手機廠商做項目時,對用新增用戶的壓力沒有互聯網公司那么大,用戶量的增加主要看手機賣的好不好,怎么盤活現有用戶,提升活躍增加轉化才是目標。所以更加看中的是用戶運營,在挖掘用戶需求的同時,更多的是考慮如何吸引用戶;

          • 放在制造企業里軟件項目只是整個產品項目流程中的一部分,項目按時上市是優先級最高的目標,其他節點在此時間倒推,硬件的時間往往是很難壓縮的,不然賣出的產品質量無法保證就是很大的問題,所以往往可能被壓縮的就是軟件和產品開發的時間了(硬件產品項目相比互聯網產品其實已經提前很長時間規劃了,但是市場的變化太快)這樣的事情時常發生,也無法避免,所以只能盡早做好規劃、儲備才能從根本上解決硬件產品在軟件流程上遇到的尷尬問題。


          最后談點個人的觀點,現在科技發展迅速的大環境下,用戶被培育的忠誠度不高且善變。從鵝廠開始新起“微創新快速迭代”并不適合制造行業,也可能不在適合現在互聯網,因為現在的“爆點”事件都是發生在創新的產品上,微信不是QQ迭代出來的,大疆也是通過自己的不斷創新贏得了市場。想要做出領跑市場的創新產品,就需要挖掘更深層的用戶需求實現“創新產品的規劃和儲備”,想的更遠才能更有效率的創造對用戶有價值的產品。





          文章來源:站酷 作者:Midea_IoT_UED
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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

          如何在企業官網刻入品牌DNA?

          資深UI設計者

          我們可以從哪些維度強化品牌特質?我們在保留天虹品牌DNA的同時,實現新業態的呈現升級,向市場展示一個嶄新的天虹。

          如果聊起中國的零售巨頭,我們一定不會忽略天虹商場(現“天虹數科商業股份有限公司”)最初所占據的一席之地。天虹是國有控股的上市公司,自1984年天虹注冊成立后一年,第一家天虹商場——天虹深南店開業,正式開啟零售業的征程,成為全國零售業的先行者之一。


          天虹成立的30余年來,歷經了經濟發展的巨大變化所帶來的市場繁榮,這也使消費需求多元化成為不可逆的潮流,越來越多中國零售企業采取了多業態發展戰略,零售市場從過去的百貨商店、副食店一統天下的局面迅速發展成為多業態并存的市場格局。


          目錄


          01  項目展示

          02  天虹品牌分析

          03  天虹品牌DNA及核心競爭力

          04  天虹新業態的呈現升級

          05  從多維度強化品牌特質



          天虹品牌分析 


          過去幾年,天虹不斷在全渠道方向轉型,突破傳統購物模式,踐行數字化、體驗式、供應鏈三大業務戰略,大力發展線上線下一體化的智慧零售商業模式。如今,它更把自己定位為一家提供生活解決方案的服務商。


          天虹零售行業數字化轉型正在如火如荼的進行,產品線的擴張讓目標客戶發生了變化,反觀消費人群對天虹的印象,仍然停留在天虹僅是一家老牌的實力零售國企的形象,天虹這次找到我們進行官網改版,目的就在于此——在保留品牌DNA的同時,實現新業態的呈現升級,向市場展示一個嶄新的天虹。



          天虹品牌DNA及核心競爭力 


          天虹自2008年確定新的品牌戰略以來,始終將“親和、信賴、享受生活”的品牌核心價值貫徹到底,天虹從事零售行業,貼近生活的脈搏,與生活息息相關,更是以“分享生活之美”作為企業使命。


          品牌DNA不可復制,我們率先從品牌的視覺資產切入,計劃在天虹新官網具體的視覺設計元素上,例如圖標、顏色、配圖等,結合品牌強化天虹DNA記憶符號,讓記憶符號給訪客在視覺、“觸覺”等感官上加深印象。


          一進入天虹的新官網,首屏上,一句“天虹,分享生活之美”的slogan配合自動播放的短視頻,點明了天虹十余年以來一直堅持的品牌使命,天虹對自己品牌核心價值的闡述,也穿插在新官網的各個版塊中。



          天虹的品牌Logo是一抹橙色極簡的彩虹形狀,同時也是一絲紐帶,意在構建一座通往利益相關者之間的橋梁,營造和客戶之間平等、親和、互相信賴的客群關系。


          在首屏接著往下,一句精簡的文案充分闡述了“天虹,分享生活之美”的品牌使命,同時應用了天虹logo一抹橙色極簡的“彩虹”元素,把品牌基因融進網站交互與視覺設計,能讓用戶自然地產生與品牌間的聯想,加深品牌印象。



          這樣給訪客加深品牌印象的設計不在少數,例如從“了解更多”進入到天虹企業簡介的Banner以及每個頁面的底部導航,都有從天虹Logo特征延展出來的圖形設計。



          色彩是一個非常重要的品牌基因。從品牌色延展的色彩方案貫穿應用到網站中,是最為常用的建立品牌印象的方法。


          用品牌色作為組件和高亮色自然是不用多說的:



          但是,色彩并非越豐富越好,過于豐富反而會干擾訪客對網站內容的吸收,我們根據品牌調性控制好品牌色的應用數量,有時候單色或者雙色的配色方案更能形成突出的風格和印象。



          大面積的色彩雖然能刺激用戶的視覺感知,但是也可能分散用戶注意力,因此,如果網站有更多資訊閱讀類的內容就不適合用過多的色彩,否則會破壞用戶的沉浸體驗。


          “分享生活之美”的主旨在網站中更多的表現在配圖上,除了剛剛展示的首頁視頻,我們還在各個版塊穿插了不同生活場景中有溫度的圖片素材,這些圖片素材流露出專注、有朝氣和親和力的氛圍,一定會讓訪客對天虹的好感油然而生。



          在各行各業競爭日益激烈的當下,企業歷經單一的價格競爭、廣告競爭和產品競爭等方面的競爭之后,企業的品牌具有區別和領先于其他競爭對手的獨特能力,能在市場競爭中展示品牌的內在品質、技術、性能和完善服務,引起消費者的品牌聯想,促進其購買行為,因此,品牌競爭力會逐漸成為企業的核心競爭力。


          在現如今的新零售時代,顧客體驗感的提升、用戶和線上+線下移動端多渠道的互動影響,讓企業核心競爭力不再是孤立的某一個因素。而天虹30余年以來,能夠保持自身的核心競爭力——品質與服務,這是天虹站在顧客的立場角度,去思考自身企業真正能夠帶來的價值,我們專門為此設計了一個【品質與服務】頁面。


          在品質上,除了闡述天虹一直貫徹并強調的經營理念,以及一直以來的踐行,我們通過呈現權威的認證證書、六項質量大數據以及天虹的質量管理規范,更強有力的證明天虹品質。



          同時,加入時間軸的交互設計,更清晰明了地向訪客展示天虹從1987年至今,為顧客保證商品品質所付諸的行動,以及所獲得的品質認證獎項。



          在服務上,我們分為顧客選擇天虹的服務之前、天虹服務顧客時、完成服務之后這三個步驟,明確說明天虹可以向顧客保證的服務品質。


          在顧客選擇天虹之前,我們運用七種顏色的交互動效,展示天虹可以給顧客的七重品質保證,每項保證都有針對性的服務承諾。


          這里還有一個在背后小小的設計想法,七種顏色正好對應彩虹的顏色,也正好和天虹的“虹”相呼應。



          為顧客提供服務過程中,直接列出了天虹五項顧客服務的基本準則,體現了天虹為實現品質服務的切實行動。



          天虹完成服務之后,分別展示四個場景、渠道保證顧客無憂售后。



          天虹新業態的呈現升級 


          天虹不同以往的是新業態的改變,要呈現具備科技力的天虹,我們在策劃品牌網站時要確定這兩大要素:


          • Who—天虹的目標訪客群體?

          • What—天虹正在做什么?



          Who 天虹的目標訪客群體?


          一個網站的誕生,是為了服務特定的用戶,在網站設計階段,產品經理通常需要把網站設計構想和思路提交給產品研發團隊、視覺和交互設計團隊進行網站的設計開發,我們的設計開發團隊如何才能清晰理解訪客的真實需求?


          那么,除了網站需求文檔、原型圖為主,還要把用戶畫像作為輔助說明,讓我們設計團隊成員在設計網站的過程中,對網站目標訪客群體有一個更形象化的認識。我們在這不做對訪客基本人物屬性的分析,而是主要分析訪客的使用場景以及訪客故事,從而對網站版塊、訪客體驗、訪客通過網站完成任務時的瀏覽路徑進行設計。



          經過一系列的訪客畫像分析,我們可以肯定的是,擴張了產品線之后的天虹,新官網的目標訪客也會面向更多群體,因此我們將會從這四個應用場景來決定建站方向:



          只有讓這四個目標訪客群體瀏覽了天虹的新官網,才能真正實現向市場展示出一個嶄新的天虹。


          What 天虹正在做什么?


          我國社會數字化轉型進程的不斷加快,數字化轉型是包括零售企業在內的所有企業,都繞不開的一個重大課題,它能夠為企業帶來新的發展機遇。


          對于天虹這樣的零售企業來說,便是借助數字化技術提升企業的運營效能、降低企業運營成本,構建新的數字化環境下新的商業模式是最終目的。在【智慧零售】版塊,正式介紹天虹數字化轉型發展的新業態。


          在為顧客服務上,天虹零售形式的變革是以交付為主要方向的變革,重塑全渠道零售形式之后,【天虹APP】與【超市數字化】把到店與到家等零售形式相融合,實現了顧客“所想即所得”的交付需求,助力了消費升級。


          我們在對應的展示版塊,附上相對應的使用場景圖片,以及天虹APP、天虹小程序的二維碼,更有利于訪客即刻體驗由單一的到店交付,到到家等多場景的便捷交付。



          天虹在進行數字化轉型中,還瞄準了一個重點是以數據驅動購物百貨運營模式的重塑,能夠實現原先由人決策、執行、協同,轉變為由數據決策、數據執行與數據協同。


          天虹購物百貨的運營模式在進行數字化重塑之前,僅是依靠商戶品牌形象+店內交易才得以完成交易,在【購百數字化】的說明中,我們展示了天虹“Before+After" 的數字化運營模式,向訪客充分說明天虹從智能方面尋求新的突破,通過智能設備與數據智能,從而提高了入駐天虹商戶的運營效率、降低運營成本的重要措施。



          我們明白,信息架構作為網站交互視覺最底層的支撐,只有骨架搭好,對于用戶的使用體驗才能夠有本質上的提升。在商戶服務上,天虹還做到服務產品化,我們分別從這兩類業務入手為訪客做好闡述:


          • 平臺業務:天虹在自己構建的平臺上為商戶提供各種經營工具及服務管理方案;

          • 數據業務:天虹會提供海量數據集成展示的看板給商戶。


          天虹具體賦能商戶的四項支持,我們遵循整站的簡約風格來做展示:



          【天虹科技子公司】則直接跳轉到靈智數科的官網,這是由天虹數字化經營中心孵化的數字化零售SaaS產品,為零售企業提供數字化轉型方案,這更能表明天虹未來在實體數字化深耕的決心。



          天虹在購物中心&百貨、超市、便利店的運營模式中迅速鋪開數據化、信息化、智能化的建設道路。其中,我們將天虹超市數字化運營細分為四個方面,真正做到可觸達、可交互、可洞察、可追溯。



          天虹微喔便利店同樣運用線上+線上雙模式,從四個方面共同打造天虹微喔的品牌力。



          在天虹新業態的展示中沒有做花哨的視覺和交互設計,因為當我們對信息架構有足夠的認知時,我們在設計頁面時才能有合理的思考方向,做出正確的設計,一家老牌的實力零售國企的數字化轉型,我們更傾向通過展示一些應用場景,將具象化的價值傳遞給訪客,能簡則簡。



          從多維度強化品牌特質


          消費升級時代的到來,數字化技術已經與傳統的產品和服務產生了緊密相連的聯系,正因有天虹這樣的企業率先進行改變,我們早已能在日常生活中切實感受到服務的優化和改變。


          我們團隊通過品牌梳理進行本次天虹官網的改版,從天虹的品牌DNA、核心競爭力以及升級新業態的呈現等多個維度來強化品牌特質和傳遞品牌價值。我們在新官網做到對三個方面的升級,真正做到向市場展示一個親和力與科技力并存的新天虹:


          a.更溫暖

          天虹從事零售行業,以“親和、信賴、享受生活”作為品牌核心價值,更是以“分享生活之美”作為企業使命,與我們的生活息息相關。在天虹新官網里,我們呈現了更多有溫度的生活化應用場景,讓天虹的形象更貼近用戶,更貼近生活的脈搏。


          b.更清晰

          天虹的數字化新業態轉型、品牌符號和視覺形象在新官網更清晰有力的傳達給各個訪客群體。天虹作為一家成立至今已有30余年的老牌零售國企,我們更傾向于謙虛地闡述天虹的營銷理念,保持良好的信息層級可以讓整體的瀏覽體驗感更好,而不是對品牌展示的過度包裝。


          c.更立體

          網站設計的過程是先發散后收斂,我們在動手畫原型、寫文檔之前,需要進行大量的思考和調研訪客實際的瀏覽邏輯究竟是怎樣的,也就是回歸應用場景。在天虹新官網的建設中,我們確定四個目標訪客群體來指導網站布局設計的方向,其中【洽談合作】、【投資者關系】與【人才發展】版塊的設計,讓天虹誠信、分享、創新和開放的形象更加立體,訪客或許會因此對天虹多一份信賴。


          文章來源:站酷 作者:增長超人
          分享此文一切功德,皆悉回向給文章原作者及眾讀者.

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

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


          聽說這是最難的配色方法——互補色篇

          lanlanwork


          01 互補色的定義

          互補色分為“光學互補色”和“印刷(色料)互補色”兩種。

          光學互補色:兩種色光以適當的比例混合,能產生白光時,則這兩種顏色就稱為“互為補色”。

          本文主要探討的是印刷(色料)方面的互補色:在色相環上相對180°角的兩種顏色,這兩個顏色混合會得到灰色。

          圖片

          互補色由于在色環上相距最遠,色彩差異最大,色彩對比很強烈,合理的搭配往往會產生強烈的視覺沖擊力。

          雖然從色環上來看,互補色可以有很多組,但最常用的互補色有3組,分別是紅和綠、藍和橙、紫和黃。

           

          圖片

          由于紅色和綠色在色相上缺乏共性,放在一起會造成極強的視覺反差,搭在一起容易有格格不入、扎眼的感覺,容易出現散亂、土氣的感覺。

          要取得好的視覺效果,則需要使用一些調和手段,可以在明度、飽和度上中和兩種色彩的突兀,使其形成和諧統一的對比。

          圖片

          圖片

           

          圖片

          藍橙是一組經典的冷暖互補色,溫暖的橙色在與偏冷的藍色搭配時,更加醒目,活潑的橙色可以很好的緩解深藍色的沉悶,增加畫面的愉悅氣氛,可以很好的營造出畫面的層次感。

          圖片

          圖片

           

          圖片

          紫色和黃色不論是色相還是明度差異都非常大,因此黃色與紫色的搭配容易產生相當高的視覺強度。

          圖片

           

          02 互補色配色的方法

          互補色對比性強烈,因此在視覺上會產生極大的隔離作用。由于色相對比過大,配色難度也最大,如何化解互補色之間的沖突感,是用好互補色的關鍵。

           

          1.通過面積比來達到平衡

          如果使用面積相近的互補色的搭配,具有強烈的沖突感,產生的視覺效果強烈而鮮明,情感濃烈,令人記憶深刻。非常適合夸張的、張揚的情感表達。

          圖片

          大多數情況下,我們會選擇一種顏色作為主色調,大面積的色相占據主導位置,再用小面積的互補色去點綴畫面。這樣才能表現出主次關系和豐富的色調效果,色彩對比強烈卻又不違和。

          圖片

           

          2、調整明度與飽和度來減弱色彩沖突

          高明度與高飽和的互補色搭配,對比強烈,在視覺上會產生極大的隔離作用,它們組合在起,會產生相互襯托、相互抗衡、相互排斥的感覺,并使各自的色相更顯突出,更為艷麗,具有強烈的視覺沖擊力。

          圖片

          可以考慮降低互補色的明度與飽和度,來減弱沖突,既保留了對比色搭配的特點,同時降低了過強的視覺刺激。

          圖片

           

          3、加入中性色緩沖其強烈的對抗性

          互補色鮮艷熱烈,而中性色(黑白灰)則剛好相反,它們毫無情緒感,中庸冷靜。在對比色中加入中性色可以很好的調和畫面的平衡感。通過中性色的調和,既保持了互補色所帶來的豐富的層次感,也避免了互補色之間強烈的沖突。

          圖片

           

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

          作者:鄧海貝

          轉載請注明:學UI網》聽說這是最難的配色方法——互補色篇

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

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

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

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


          毛玻璃圖標的設計教程

          lanlanwork


          1. 一定要注意識別度

          其實我一直不敢使用毛玻璃效果的原因,就是害怕有識別度問題,其實網上現在有很多毛玻璃圖標:

          圖片

          做概念稿練習練習還好,如果真的落地肯定不行,太影響識別了。

          為了不影響識別,我們可以有兩個做法。

          其一:就是毛玻璃的透明度別太低,像騰訊視頻這種:

          圖片

          這樣不影響我們識別圖形的輪廓。

          其二,我們可以把圖標主圖形用顏色填充,毛玻璃的面積只是很小一部分,起到輔助作用即可,比如像喜馬拉雅這種:

          圖片

          這樣整體的識別度也不會太受影響。

          以上就是關于不影響識別的小方法。

           

          2. 技法

          毛玻璃圖標大部分一共分三層,填充層、玻璃層,模糊層(模糊層是嵌入到玻璃層的)。

          其中最重要的一個關鍵點就是,玻璃層其實是假的,并不是透明的,而是100%的填充色。

          舉個最簡單的例子,我們先畫一個深藍色的填充層:

          圖片

          然后加一個玻璃層,這個玻璃層不是透明的,而是100%填充色:

          圖片

          那有同學就會問了,毛玻璃效果怎么產生呢?其實就是把下面的深藍色圓復制一個進入到前面的玻璃層:

          圖片

          有人又會問,這也沒效果啊,對,因為復制進入玻璃層的圓形和后面的原型位置一摸一樣,如果不做改變,就看不出變化,所以我們先來模糊下:

          圖片

          區分的還是不夠開,我們再降低透明度:

          圖片

          這效果就立馬出來了。

          所以從技法層面來說,并不是很難,主要是要注意識別度和整體的設計感。(當然,這只是我個人制作的方法,可能別人也有其他的方式)。

           

          3. 底色

          前幾天在群里看到一位星友問,說為什么他做的效果是第二個,而不是第一個那種透透的毛玻璃感覺:

          圖片

          其實我在最開始做毛玻璃效果的時候和她遇到了一樣的問題,這個問題產生的原因就是因為底色,現在的底色是黑色,一個玻璃放在黑色上面,透出來的顏色肯定是深灰色,而不是淺白色(除非你這塊毛玻璃本來就是白色的)。

          我在之前的一次練習時,做一個黑金配的的毛玻璃效果,最開始就做成了這個樣子:

          圖片

          總感覺有點奇怪,其實就是因為在黑色背景上,玻璃層的顏色用了白色,感覺沒透過去,就感覺怪怪的,后來我把玻璃層的顏色變成深灰色:

          圖片

          這樣看起來就好多了。

          制作的原理和剛才說的是一樣的,先把大形畫完:

          圖片

          然后前面整一個玻璃層,選一個深灰色:

          圖片

          然后把下面的形狀復制一個剪切到玻璃層中:

          圖片

          現在看不出效果是因為玻璃層里面的圖形和后面的圖形位置是一摸一樣的,這時候我們把玻璃層的圖形模糊:

          圖片

          現在已經差不多區分出來了,如果想要更明顯的區分,可以把透明度再降低一點:

          圖片

          也還ok,當然,我覺得加不加透明度,還是看具體效果調整就可以了!

          再強調下,大家在做毛玻璃的時候一定要注意背景色哦,不然可能就會看起來很奇怪。

           

          總結

          好了,以上就是我個人對于毛玻璃效果的一點總結,我個人還是比較喜歡一組毛玻璃圖標是多色的,如果是一個顏色,比如這種:

          圖片

          相對來說沒那么耐看,如果是多色的:

          圖片

          就會耐看很多,希望給大家一點啟發,下期見,默默扔!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》好慘,我竟然被批評了,問我為什么不安排教程?我怕了

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

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

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

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

          日歷

          鏈接

          個人資料

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

          存檔

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