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


          • 案例    設計需求是:優化一款 B 端產品的「套餐售賣卡片」的原有設計:

          圖片

          △ 某 B 端產品服務購買卡片設計(優化前)

           

          你會覺得這個設計無傷大雅,但也說不上專業。于是設計師參考阿里云和華為云的服務購買卡片:

          圖片

          △ 阿里云服務購買卡片設計

           

          圖片

          △ 華為云服務購買卡片設計

           

          經過了對信息層級視覺效果的比較與思考,設計師最終將設計稿優化為下圖效果:

          圖片

          △ 某 B 端產品服務購買卡片設計(優化后)

           

          這里的 “參考” 并不是簡單的照貓畫虎,而是站在巨人的肩膀上,學習和精進自己的能力與認知。
          今天給大家詳細的介紹下,針對某個功能或元素,如何借鑒和分析競品。有以下幾個方法:
          1. 分析幾乎完全相同的產品
          2. 分析不完全相同的產品
          3. 分析完全不相同的產品

           

          1. 分析幾乎完全相同的產品

          這個方法很好理解,這類產品與你正在設計的產品在功能需求、產品形態、用戶類型等方面都很較大的相似性,也是最容易直接提供解決方案的,比如上文提到的服務卡片設計優化案例。再比如,你在做一款「云盤的登錄注冊頁面」,你可以參考「騰訊云盤」和「華為云盤」等大廠產品的登錄注冊頁面,看看他們的頁面是怎么布局的,提供了哪幾種方式,增加了哪些入口和元素,如何使用顏色和字號等等。圖片

          △ 華為云盤登錄頁面

           

          圖片

          △ 騰訊云盤登錄頁面

           

          2. 分析不完全相同的產品

          如果找不到完全相同的競品,對于不完全相同的產品,也可以分析和借鑒,這就要分幾種情況,需要你對手中的設計任務進行拆解:

          (1)需求相同,但產品類型不同:比如同樣是「云盤的登錄注冊頁面」,如果找不到完全類似的競品,你可以查找包含 B、C 端用戶的其他產品的登錄注冊頁面,取長補短。

          圖片

          △ 雨雀文檔登錄頁面  

           

          (2)結構相同,但應用場景不同:接上面的例子,登錄和注冊頁面本質上用戶填寫表單,產品收集用戶信息。因此你也可以找填寫手機號、用戶名、密碼相關的表單的設計,并不一定是登錄注冊頁面的表單,比如你在寄送快遞時填寫手機號的表單也可以用作參考,也許會提供不一樣的設計思路。

          圖片

          △ 淘寶 App 可以調動系統定位,并提供幾個最有可能的選項,用選擇代替用戶輸入

           

          3. 分析完全不相同的產品

          如果是完全不相同的產品,那學習和分析的是這類產品的設計原則和手法。接上面的例子,這次你可能借鑒的設計就是下圖中「微信通過好友申請」的頁面。

          你會發現在這個頁面中微信將能設置的好友信息都呈現了出來,讓用戶先設置之后,再通過申請,這樣就避免了很多用戶順手添加了好友而忘記設置信息。相比之下在設計登錄注冊頁面,可能也可以根據產品功能和用戶需求,適當將設置項前置圖片好的設計,在設計思路和原則上,通常也會具備通用性。對于大多數人來說,在很多工作上都要經歷這個過程:抄(指學習) -> 操(指操練) -> 超(指超越) 掌握這幾個過程中的精髓,很重要。

           

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

          作者:元堯

          轉載請注明:學UI網》詳解|針對某個功能,如何做競品分析和設計優化?

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

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

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

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



          這6種高級黑配色套路,太絕了!

          seo達人



          圖片

          黑色+白色

          圖片黑色是一個很強大的中性色彩,它有一種極其特殊的色彩語言,它很容易讓人著迷,而且受到各領域眾多設計師的關注。黑色給人傳遞的是一種莊重、神秘、穩重、高端、大氣等等的一系列視覺感受。因此我們在用黑色作為主色調的時候,需要注意產品性格特征,想傳遞什么樣的感受給用戶。圖片
          圖片
          在雜志化版式設計中,黑色和白色搭配出現頻率也是較高,畢竟黑色本身就有一種高級神秘感。當它與白色搭配,更體現極致簡約性格。
          圖片
          圖片
          圖片
          圖片

          圖片

          黑色+藍色

          圖片

          藍黑搭配也是最好看和運用較多的顏色,它們之間組合彰顯沉穩大氣。黑色本身更沉穩,配上藍色整體畫面感彰顯高級時尚。

          圖片

          圖片

          藍黑搭配一般在科技類產品較多出現,因為藍色本身略帶一些科技屬性,黑色本身會有一些沉悶,且藍色也不像黃色那樣高亮耀眼,因此在選擇藍色上適當提升一些明度。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+橙色

          圖片

          橙色是一種有性格的顏色,當它遇上黑色,在畫面彰顯活力與生機,與藍色不同的是,橙色更醒目與熱情,更有一絲腔調,內斂和張揚得到有效平衡。

          圖片

          圖片

          活力橙色作為暖色調,它不像紅色那樣更霸氣刺激,更純粹的多了些許陽光的溫暖,在不同層次明暗橙的對比演繹出柔和的色彩變幻以及熠熠閃光的細微差別。

          圖片

          圖片

          圖片

          黑色+綠色

          圖片

          綠色在設計圈可謂說是一直都挺火,綠色與黑色搭配可以中和黑色的沉悶,還有一種清新透亮的感覺,如果是和亮綠搭配,更有一種酷酷的潮流感。

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+黃色

          圖片

          黑黃搭配,極視覺沖擊力,既能給人活潑奔放的味道,同時又有著一絲內斂與沉穩。很多設計中經??吹近S黑組合,黃色在黑色的存托下,顯得格外時尚。

          圖片

          圖片

          圖片

          圖片

          圖片

          黑色+紅色

          圖片

          紅色與黑色的配搭,在設計界也是運用較多的經典顏色組合。黑色的神秘而高級,略帶一絲沉重,配上熱情奔放的紅色,締造了一種無與倫比的時尚,成就了一種永恒的經典。

          圖片

          圖片

          圖片

          在使用紅黑搭配時,注意紅色使用占比,以及飽和度,避免過于高亮的紅色。一般在黑紅搭配過程中,其實都少不了白色在其中。

          圖片

          圖片

          原文地址:功夫UX(公眾號)
          作者:功夫UX
          轉載請注明:學UI網》這6種高級黑配色套路,太絕了

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

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

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

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


          UI&UE實用方法論 | 做交互體驗,你必須得知道的「多爾蒂閾值」

          seo達人



          美劇《奔騰年代》(Halt and Catch Fire)里有一段臺詞:

          “當你使用計算機執行一系列操作,每當你按下回車鍵,它都能在400毫秒內給予你反饋,反饋時間還不到半秒,那么就可以讓你一直保持專注,效率也會飆升,你會完全沉迷進去。但反饋時間哪怕只是偏差到半秒鐘,你的注意力都容易被分散,你甚至會想起身洗個碗、拿個遙控板、看場比賽…所以說400毫秒以下的反饋速度,是最佳節點?!?

          當然翻譯中帶了點我個人的語言色彩,但意思還是這么個意思,也就是說當交互反饋時間小于400毫秒,那么將大大提升用戶的專注程度與效率,用戶也不易急躁。而大于400毫秒,即使僅僅是偏差到半秒鐘(500毫秒),也容易被用戶感知到,從而影響用戶心流。

          而劇中引用到的這個臨界值“400毫秒”,就是我們今天要聊到的——多爾蒂閾值(Doherty Threshold)。

           

          一、為什么是400毫秒

          1982年,IBM公司的WJ·多爾蒂(WJ·Doherty)及其團隊就“系統響應時間對經濟價值影響”的課題展開了研究。研究過程主要以用戶操作系統后,系統的響應時間作為變量,觀察其對多個維度的結果產生的影響。

          最終從其中的一組研究實驗結果中觀測到了一個現象:一旦當系統響應時間超過400毫秒左右時,各項指標數據就會開始產生較大數值的波動。

          于是IBM公司就此提出了研究結果:系統響應時間應該低于400毫秒,這將顯著提升用戶的關注度,從而影響到用戶的操作、工作效率。并將“400毫秒響應時間”這個節點值以WJ·多爾蒂的名字命名為「多爾蒂閾值」。

          雖然如今我們早已認為系統擁有快速響應時間是一件理所應當的事情,但「多爾蒂閾值」的提出,在當時那個年代卻是開辟先河性的。因為70年代左右,計算機研究界還普遍以“系統的響應時間可以為2000毫秒(2秒)”作為業界標準。

          雖然我現在已經查詢不到這個“2秒”舊知識的科研文獻了,但是在 IBM 2018年的一場歐洲線上演講會的PPT中我們還可以看到:

          所以「多爾蒂閾值」可以說是重新定義了現代人機交互領域響應體驗的指標,影響著一個標準規范產品的視覺側、交互側、體驗側、開發側等多個方面。

           

          二、多爾蒂閾值的運用

          我們要清楚的是,「多爾蒂閾值」是IBM公司給到的一個系統響應時間的最大參考值,并不是說所有的機器響應時間都必須卡在400毫秒這個節點上,而是說響應時間應保持在400毫秒以內,盡量不要大于400毫秒。

          那么知道了“400毫秒以內”這個范圍值,我們作為設計師,要怎么將其運用到設計工作中,或者說「多爾蒂閾值」會影響到我們哪些設計標準呢?——來看看 Google 旗下 Material Design 的系統動作規范,應該能讓你找到一些方向。

           

          要點一:并不是越快越好  

          作為設計者、開發者,我們都希望系統能夠盡量快地響應用戶的操作。但也并不是一味地追求極速就一定是好的。

          Material Design 在系統響應動作規范中強調了“過渡時間”的概念,雖然大家都希望系統的響應速度越快越好,但同時用戶也需要一些時間去理解系統響應的結果。

          如果響應即結果,而不給用戶一個視覺過渡的反應時間,則會讓用戶無法跟隨UI變化,同樣也是會給用戶造成困擾的。

          Material Design 規范建議到:不要給用戶過慢的響應速度,干擾用戶操作進程,讓用戶急躁;但也不要給用戶過快的響應速度,用戶無法跟隨UI變化,對用戶理解會造成困擾。

          我們將響應速度結合「多爾蒂閾值」范圍內的視覺過渡效果,可以幫助用戶理解操作反饋的結果,有時間思考類似于“我剛才點擊了什么”、“結果和我的操作之間是什么關系”、“結果是否滿足我的預期”等問題,并做出下一步的反應。

           

          要點二:響應時間不是一成不變  

          為了讓響應視覺過渡更加符合現實規律,Material Design 根據響應結果區域的大小設置了3種響應過渡時間規范,其中又以用戶的操作場景進行了更進一步的規范細分。

          先來說說根據響應結果區域的大小設置的響應過渡規范:Material Design 將操作響應結果區域分為小、中、大3種場景,當操作影響的結果區域越小,那么響應過渡時間就應該越短。反之,操作影響的結果區域越大,響應過渡時間就會越長。這一點是符合人類意識對運動的理解的。

          其次 Material Design 還認為,用戶做“關閉”、“退出”類操作時,預示著他們那要進入下一個任務流,而此時上一個任務流的內容,用戶就不再關注了。操作與結果的關系、層級的關系、內容的位置關系,在“打開”、“進入”類的過渡中就已經闡明給用戶了,所以他們離開的時候,可以更快。這就是在響應結果區域大小的基礎上,又以戶的操作場景進行的更進一步的規范。

           

          • 小型區域:響應過渡統一為100毫秒;

           

          • 中型區域:打開的響應過渡為250毫秒,關閉的響應過渡為200毫秒;

           

          • 大型區域:打開響應過渡為300毫秒;關閉響應過渡為250毫秒。

          結合兩個要點總結一下:系統響應應該結合視覺過渡給用戶操作與結果的關系進行指引,所以也并不是越極速越好。響應過渡應該在「多爾蒂閾值」以內,并且可以結合響應區域大小、用戶操作場景,使響應更符合現實規律,更加人性化。

           

          三、面對不可避免的延時響應

          雖然把系統響應控制在「多爾蒂閾值」內是我們追求的目標,但是響應速度往往和請求的數據量、網絡環境等諸多因素有關。對于結果返回數據量小的場景,我們利用視覺或代碼層面的解決方案,可以讓響應時間是可控的。

          但當用戶遇到結果請求數據量大、網絡環境較差等場景,響應時間以“秒”起步那也是司空見慣的事情。此時面對無法保證響應時間在“400毫秒”以內的情況,我們應該怎么辦呢?

          其實這已經超過「多爾蒂閾值」的討論范圍,對于不可避免的延時響應場景,已經是屬于“如何解決用戶等待焦慮”的話題了。

          但恰好我之前在《聊聊加載等待的那些事 之 進度指示器》中聊到過這個話題。想系統了解的朋友,可以移步查看。(知識就這么串聯起來了!神不神奇~)

          對于想走捷徑的同學,我在這里把當時的調研結果貼出來,希望能夠幫助到你們。

          我結合了 “用戶等待4秒原則”和UX研究咨詢公司 Nielsen Norman Group(NN/g 尼爾森諾曼集團)的一篇文獻中提出的 用戶等待心理模型,得出了以下參考結論:

          用戶是一個復雜的群體,他們其實并不關心所謂的量化時間,他們只希望:加載盡量快,快到不要中斷我的操作流,如果實在快不起來,那就告訴我還要等多久。所以由上表得出的結論是:

          • 加載時長在0到1秒之間時用戶不易感知,不需要給予用戶 loading 提示,在任何加載情境下頻繁給出 loading 提示其實反而會干擾用戶心流;
          • 加載時長在1秒到4秒之間時:此時不需要明確給予用戶量化時間提示,用戶也不易產生焦慮情緒;
          • 加載時長大于4秒時:超過這個時間你就需要明確地告訴用戶當前的進度狀況了,加載百分比或剩余時間都可以讓用戶心里有個底;
          • 加載時長大于x秒時:設計者應該根據具體加載場景設置加載時間臨界點機制,在加載超過這個時間之后默認為加載失敗,讓用戶進行再次操作,而不是無意義地苦苦等待。

           

          四、總結

          「多爾蒂閾值」不僅僅是設計師完成交互動效、反饋體驗時的一個知識點,它是IBM對整個計算機反饋機制進行研究之后得到的結論,影響體驗、效率、經濟等多個方面。所以我認為這是互聯網人都應該熟知的一條交互理論。

          只是我在這里僅結合了 Material Design 的系統動作規范,分析了設計層面對「多爾蒂閾值」的應用,還是稍顯片面。但感興趣的朋友,還可以去搜索了解更多關于「多爾蒂閾值」的實驗、故事與實踐方案。

           

          原文地址:UCD耍家(公眾號)

          作者:Howiet


          轉載請注明:學UI網》UI&UE實用方法論 | 做交互體驗,你必須得知道的「多爾蒂閾值」

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

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

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

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


          配色看起來總是不舒服?用這個科學的配色方法!

          seo達人



          1. 色輪分析

          顏色是我們眼睛感知不同波長的方式。色輪是將一系列顏色,有次序地利用圓盤的形式展現出來,色輪顏色的構成包括三組顏色:

          圖片

          原色:紅色、黃色、藍色

          二次色(間色):綠色、橙色、紫色(三原色混合而成)

          三次色(復色):黃橙、紅橙、紅紫、藍紫、黃綠、藍紫(原色二次色混合而成)

          通過不斷混合相鄰的顏色,產生新的顏色,最終形成一個全域的色輪。

          圖片

          ▲ 色輪顯示了3組顏色,原色范圍最小,在圓的的中心處,二次色在中間環。最大的外圓由三次色組成。

           

          2. 色彩搭配

          色彩搭配最基本且重要的原則就是顏色間要相互協調,一些常見的顏色搭配包括:

          圖片

          同類色:色輪上90°以內彼此相鄰的顏色,這種顏色搭配的對比度較低。

          互補色:色輪上相對的顏色,產生較高的色彩對比度,在搭配上可以一種作為主色,另一種用于強調。

          分裂補色:互補色兩側相鄰的顏色。這種顏色搭配既有同類色的低對比度的美感,又具有互補色的沖擊力,形成一種既和諧又突出重點的顏色關系。

          三色組:色輪上的三種等距顏色,相隔120度,其中二種顏色互相類似,另一種與它們形成對比關系。

          單色搭配:只使用一個色相,通過改變飽和度、明度來得到其他色彩。這種搭配看上去干凈、優雅,但是不容易突出重點。

          引入的顏色越多,就越難平衡視覺層次。如果你有豐富的配色經驗,可以從兩種或三種顏色開始,不斷嘗試更復雜的搭配。

           

          3. 色彩含義

          雖然隨著全球化的到來,某些顏色可能已經達到了標準含義,例如紅色表示停止,綠色表示開始,但色彩含義會因文化而有所差異,例如想一下錢是什么顏色,紅色(中國)還是綠色(美國)?

          如果想在設計中明確解釋色彩的含義,需要做到兩點:

          • 顏色可能不會在全球范圍內起作用;
          • 設計時考慮少數群體(色盲),進行用戶測試來確保用戶明確了解顏色示意。 

           

          4. 將色彩理論應用到設計中

          調色板是為特定項目、品牌選擇的一系列或一組顏色,每個顏色都是特意添加的,整個調色板的色彩組合展現了產品或界面的視覺美感。

           

          創建調色板

          選擇一種顏色搭配并進行顏色迭代

          單色方案通常最容易創建和應用,因此如果你沒有太多的配色經驗,可以從這種配色開始。

          首先要弄清楚為什么要選擇這些顏色、這些顏色有什么作用、表現出來怎樣的效果等問題,這樣創建調色板才更有效率。

          圖片

          ▲ 如果在配色過程中覺得卡住了或者不知道從哪里開始,可以從ColorHunt的調色板中汲取靈感。

           

          將調色板限制為三種顏色

          少量的顏色加強了視覺層次和對比度,因為影響用戶考慮和分心的元素更少。所有的顏色都在爭奪注意力,在設計中也是如此。

          圖片

          ▲ 少即是多。過多的顏色反而會讓用戶眼花繚亂,找不清重點信息。

           

          遵循品牌的顏色標準

          創建調色板時要始終遵循既定的顏色標準,這樣不僅會讓工作更輕松,因為不考慮太多新的的顏色,還會給用戶帶來一致的品牌體驗。

          如果沒有品牌色標準,可以看看現有設計和產品中使用的顏色,并嘗試融入到調色板中。

          圖片

          ▲ 耐克的網站使用了最基本的單色調色板:黑色、白色和灰色,這種顏色選擇使用戶可以專注于產品。

           

          使用調色板

          使用60-30-10規則

          這條規則僅表示主色使用60%,輔助色使用30%,強調色使用10%,通常主色和輔助色是相對中性的顏色。

          這些比例有助于創造平衡,防止搭配的顏色出現混亂。

          圖片

          ▲ 蘋果新聞App很好地使用了60-30-10規則,白色和淺灰色是主色調,藍色是輔助,粉色作為強調色來吸引了用戶的注意力。

           

          應用然后迭代

          使用了60-30-10規則后,接下來就要調整顏色來提高美感,并且突出設計中重要的內容。

          看看顏色選擇是否有助于創建正確的視覺層次結構、顏色選擇在設計中是否創造了平衡和對比。

           

          保持顏色的一致性

          一致性是幫助用戶理解顏色使用的關鍵。如果在一個頁面上使用亮藍色作為提示按鈕,那么在產品的任何地方都應該使用相同的顏色作為提示。

          圖片

           

          測試調色板

          測試設計效果

          將調色板應用到設計中后,需要做一些可用性測試,例如顏色在按鈕、鏈接或其他類型組件上的可用性,頁面的易讀性和可訪問性問題等

          圖片

          ▲ 這個頁面雖然遵循了60-30-10規則,但頂部綠色的字母在橙色背景下卻很難以閱讀,需要調整調色板以確保頁面的易讀性。

           

          最后

          合適的顏色搭配可以增強品牌認知度,吸引用戶注意力并提高可用性,靜下心來多多實踐,才能充分利用好這些奇妙的顏色。

          最后為大家分享一波非常不錯的配色方案,特別適合用在日常設計中~

          下載方式:

          1)關注公眾號“Clip設計夾”

          2)公眾號后臺回復“配色”自動獲取下載鏈接

           

          原文地址Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學UI網》配色看起來總是不舒服?用這個科學的配色方法!

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

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

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

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


          蘋果和三星,哪家設計強?

          seo達人

          圖片

          a

          字體 

          圖片

          第一個就是字體,大家都知道,設計其實就是形色字構質,字體是設計中非常重要的因素。2014年三星委托了一家名為 Sharp Type 的字體制造商來設計了旗下產品字體。這款字體就是 Samsung Sharp Sans,今天我們看見的字體都是這款字體。

           

          Samsung Sharp Sans

          圖片

          三星這款字體是一個幾何感很強,接近完美的圓形O和簡約設計感強的小寫字體,特別是字母a設計的脫穎而出。

          圖片

          三星這款字體除了用在移動端,還包括電子業、生物技術各個行業,同時還考慮了線下的印刷需要,擴展了拉丁字體系列。

          圖片

          在首爾的街頭上,物理交通工具上,這款字體都很清晰美觀,和整個城市的時尚結合在了一起。圖片字體不僅僅是一個字體,同時還是一個溝通工具。三星這款字體不僅用在數字廣告,還包括印刷上,這個字體承載了三星對于未來的突破。三星不再是只有產品線,而是成為時尚生活品牌。圖片
          無論一線大品牌還是國貨新潮流,都靠一系列創新商品,在這波浪潮中占據一席之地。三星 Sharp Sans 在海報上的運用,高級且現代,同時基于全球化最大的中歐俄羅斯是智能手機增長最快的,三星也單獨設計了俄羅斯版本字體。
          圖片
          在網頁設計中運用,也考慮俄羅斯本土市場行情??梢钥闯鲎鳛橐患胰虻目鐕荆瑢τ诟鱾€體驗極致的考慮。Samsung One
          圖片

          在移動端,三星使用的是 Samsung One 字體,它也是一個非襯線字體,相對于傳統的襯線字體,這款字體設計更加具有人性化。

          圖片

          蘋果和谷歌早已推出了自己的字體,三星也推出了自己的通用字體,Samsung One 由三星和 Brody Associate 聯手打造。超過400種語言,以及超過25000個字符,成為一套全球性的字體。從手機到電視,從筆記本電腦到微波爐,所有的三星產品都將用上這套字體。它也是未來三星視覺語言的核心。圖片
          Samsung One 字體設計語言有5個關鍵詞:人文主義,易區分,通用性,專業性,清晰可擴展。圖片
          人文主義:筆畫自然就像手寫一樣變化,字體具有動態角度的正方形曲線,有很大想象空間。圖片
          字沒有的左右空間都很窄,所以有效空間非常好。圖片
          易區分:這個不用解釋,字體大小寫符號的區分。

          圖片

          通用性:在全球各種語言環境下要足夠通用。圖片
          專業性:就是每個筆畫的設計都需要經得起考究。圖片清晰可擴展:各種場景的拓展性這塊需要能適用。圖片
          三星 One 這款字體,讓整體三星設計語言在多端使用時候無割裂,設計語言的統一性有助于用戶減少陌生感,提升使用效率和交互體驗。
          蘋果 San Francisco 字體

          圖片

          蘋果在 iOS10 后更改了系統字體 Helvetica Neue 為 San Francisco,優化字體的目的是讓字體保證清晰度和易讀性,新的字體不管縮放如何,無論電腦上還是手表上,都能很清晰展示內容。這個字體也得到了一致的好評。
          圖片
          Helvetica Neue 字體之前有一些設計很受詬病的地方,比如時間的冒號不居中,理想狀態應該是居中,識別性和平衡感更好。圖片
          Helvetica Neue 之前的6和9在縮小時候容易和8混淆,但是新的 San Francisco 顯示更清晰,也不容易混淆。
          但是不可否認 Helvetica Neue 是這個時代最偉大的字體,因為他不止是蘋果設備可以使用,在其它的場景都可以使用。也是第一個給系統設計字體的引領者,包括后面的谷歌和三星都陸續為自己的產品設計字體。

          蘋果和三星對于字體的設計,你更喜歡那個呢?

           

          版式 

          圖片
          三星整體的版式采用的左圖右文或者右圖左文,這樣的設計能讓用戶更加關注內容,閱讀也比較符合從左到右的習慣。圖片這樣的版式結構在全球官網設計都是類似,和蘋果的上下排版不同。版式字體上也是通過字重來凸顯視覺層級。圖片
          在電視頁面中,采用的文字居中的方式,和蘋果那種沉浸式大圖全然不同。整體三星PC上設計略顯沉迷和安靜。

          圖片

          相比如蘋果大膽的設計,三星在動態設計上官網并沒有體現太多,除了一個活動廣告彈窗是一個動態的盒子打開。在這方面和蘋果還是有點不足。
          圖片
          圖片

          這兩張是三星和蘋果十年前的設計,從這個圖中就可以看出兩家設計水平差異。蘋果的設計和廣告語今天看起來也還不錯,但是三星看起來就會覺得有些粗糙,可能10年前審美也不一樣。

           

          圖片 

          圖片
          圖片

          蘋果的圖片更加強調產品的實用性,以突出產品本身功能和價值為主。

          圖片
          蘋果會結合產品的特點,重點體現產品,其次生活場景。圖片三星的產品圖片,色調都是以生活化,貼近生活為主,無論手機還是電器。圖片
          注重生活化,接地氣。
          圖片
          圖片

          蘋果的圖片則不一樣,和攝影師合作,每一個圖片都是一個攝影作品、一個偉大藝術創作,蘋果手機可以拍大片、可以拍電影等等。體現出蘋果產品無與倫比的優秀,雖然他那些樣品,我怎么也拍不出來。

           

          最后 

          圖片
          最后,無論是蘋果還是三星,都是偉大的公司,產品服務的人群不同。蘋果主要是移動端數碼產品,三星覆蓋全品類,兩個公司用戶人群不同,決定設計風格和主張不同,我們要學會去學習這些巨頭設計上可取之處。隨著當今智能手機水平不斷提升,包括我們的華為,未來差距只會越來越小。但是隨著用戶審美和經濟水平提升,大家對于品牌苛刻度更高,希望我這篇研究對大家有些幫助。
          但是從我個人而言,更喜歡蘋果,也是蘋果的忠實粉絲。你呢?更喜歡哪個品牌,歡迎評論中留言哦。

           

          原文地址:我們的設計日記(公眾號)

          作者:sky

          轉載請注明:學UI網》蘋果和三星,哪家設計強?

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

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



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

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



          案例錦囊|設計如何為用戶「節省時間」?

          seo達人



          1. 有效的信息抓取 

          案例 1  :釘釘的“代辦事項”設置功能,可以自動抓取到語句中的時間信息,自動幫助用戶設置好時間,減少用戶的操作時長:

          圖片

          案例 2  :在微信中可以對圖片中的文字進行識別提取,手指在識別出來的文字上滑動就能夠選中,可以直接全選、復制和轉發:

          圖片

          案例 3  :不同產品之間也可以共享數據。咸魚和淘寶訂單數據打通,在閑魚平臺上發布產品時,會看到系統給出的用戶曾在淘寶買過的商品,以及賣出這些商品的預估價格,便于用戶直接拍賣:

          圖片

            案例 4  :支付寶拍照添加銀行卡可以使用拍照功能,由系統識別銀行卡號和開戶行,減少用戶的操作時長:

          圖片

           

          2. 避免重復閱讀和操作 

          案例 1  :愛奇藝在劇集片頭處,都會彈出提示,選擇“跳過片頭”,即可設置該劇跳過片頭:

          圖片

          案例 2  :微信的朋友圈在退出后再次進入時,會在內容流中間出現一個“跳到還沒看的位置”,幫助用戶快速定位之前離開的位置,不必閱讀重復內容:

          圖片

          案例 3  :在微信群聊天記錄中,如果有太多條內容未讀,會在右上角標注出未讀數據,點擊之后即可從未讀的地方開始瀏覽:

          圖片

           

          3. 減少錯誤的可能性

          案例 1  :在惡劣天氣,美團先讓騎手接單,再讓商家接單,可以避免無人配送的情況:

          圖片

          案例 2  :高德地圖 App 會預估并提示行駛路程何時會擁堵,讓用戶提前有心理準備和預知:

          圖片

          案例 3  :微信在你沒有領取對方紅包時,會給出紅包即將超時的提醒。點擊“轉賬”鏈接,會直接定位到轉賬對話的位置,防止用戶再次花時間處理:

          圖片

          案例 4  :美團的新單車是在 App 上關鎖,不再需要在單車上手動關鎖,解決了用戶騎行完成,忘記鎖車還要跑回去的問題:

          圖片

           

          4. 用選擇代替輸入

          案例 1  :餓了么可以記錄你每次寫的備注,在下次填寫備注時可以快速選擇輸入,不需要用戶做多余的輸入:

          圖片

          案例 2  :在攜程 App 中填寫姓名拼音信息時,系統提供了一鍵轉拼音的功能,同時對于多音字還能夠自動為用戶提供選項判斷,提高用戶錄入的效率和準確率:

          圖片

          案例 3  :京東 App 對商品進行評價時,底部會提供一些評價標簽,既能引導用戶進行規范評價,又能提高用戶的填寫效率:

          圖片

          案例 4  :微信錢包的錢轉賬到零錢通里,有一個“全部轉入”的快捷選項,減少了用戶輸入時長:

          圖片

           

          5. 提供下一步路徑入口

          案例 1  :高德地圖搜索路線,會自動提供哈羅單車和地鐵的掃碼快捷路口;支付寶出行支付地鐵票成功后會看到附近的網約車信息提醒,可以立即使用高德地圖進行打車:

          圖片

          案例 2  :螞蟻森林新增了 “找能量“ 的功能,點擊會自動跳轉至有能量可偷的好友的森林界面,多次點擊隨機跳轉,直至所有好友的螞蟻森林可偷能量被偷完,偷能量也可以省時高效:

          圖片

          案例 3  :得到 App、大眾點評等產品,會在截屏時直接提供分享入口,幫助用戶做下一步分享:

          圖片

           

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

          作者:元堯

          轉載請注明:學UI網》案例錦囊|設計如何為用戶「節省時間」?

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

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

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

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

          如何排版更高級?帶你重新認識宋體字排版!

          seo達人



          圖片

           

          宋體的起源和發展

          雕版宋體字的形成 

          在印刷術發明之前,書要一字一句用手抄寫,費時費力。而唐代發明的雕版印刷術,使書籍由手工抄寫進入印刷復制時代。

          圖片

          現存最早的雕版印刷品是唐代咸通九年的《金剛經》

           

          宋朝體

          到了宋代,雕版印刷迎來黃金時代,但此時的字體也并非我們熟知的“宋體”,而是以唐代大家的楷書字體入板,并且不同地區入板的字體也不同。

          圖片

          浙江刊本–《姓解》

           

          圖片

          四川地區 – 《開寶大藏經》

           

          明朝體

          明朝體是中國明代木板印刷中出現的字體,也是現今大眾所認知的“宋體”的原型。雖然明朝體逐漸失去宋朝體所特有的風格,但由于易于凋刻,字形便于走刀,能滿足當時的印量而得以發揚。

          圖片

          《南齊書》 –明朝時期的南京國子監刊本

           

          清代宋體字

          在康熙中期以后逐漸形成清代的風格,此時的宋體字更加成熟、精致。乾隆時期,宋體字大體定型,與現代宋體字基本相同。

          圖片

          《學統》清康熙刻本

           

          綜上所述,我們可以知道宋體字不是宋朝的字體,而是漢字字體中的一種風格類別。而在日本以及港臺地區,宋體字也被稱為“明朝體”,“宋體”與“明體”本為一物,是由于文化差異所帶來的名稱上的差異。

           

          現休宋體

          如今,為了適應印刷和電子屏顯示的需要,宋體又被進行了一番改造?,F代型宋體的幾何特征更為明顯,筆畫更為利落冷峻,為了可讀性,文字胸線也較大,更加符合現代設計所需要的明快感。

          圖片

          以宋體為基礎發展出許多新字體,各大字庫也開發有各有特點的宋體。包括老宋到新宋,再到仿宋,從用于標題的粗宋、中宋,到用于正文的書宋,成為一個完整的字體系列。筆畫較粗的宋體適合用做標題,醒目大方;筆畫較細的宋體,擁有很高的閱讀性,主要用于正文排版。

          圖片

          根據中宮和體飾等特點,可以大致地將宋體分為傳統型宋體、中間型宋體、現代型宋體:

          圖片

          圖片

          圖片

          圖片

          目前可免費商用的宋體字非常稀缺,

          推薦9款免費商用宋體。

          圖片

           

          宋體的使用場景

          傳統、歷史

          傳統宋體的筆畫結構帶有手工雕刻的痕跡,幾百年的文化沉淀,加上字體本身的特征,使得宋體用于傳統、歷史題材的設計中,可以體現出古樸的傳統文化感。

          圖片

          圖片

           

          文化、藝術

          宋體由于繼承了自然書寫的痕跡,又具有精致的裝飾性美感,運用在文化藝術等題材,具有強烈的人文氣息,充滿文藝范。

          圖片

          圖片

           

          典雅、高貴

          宋體字方正平穩、對稱均衡的字體結構,顯得端莊典雅,舒展大氣。常運用在要體現高端、雍容、典雅、華麗的設計中。

           

          女性、優雅

          宋體在工整中充滿人情味,有著很強的韻味感和精致美感,帶著幾分女性的溫柔與優雅氣質。所以很多和女性相關的設計都會使用宋體。

          圖片

          圖片

           

          時尚、前衛

          現代宋體筆畫呈幾何化結構,相對于傳統宋體的溫情,現代宋體更加的冷峻,細膩中透露出時尚前衛的風格,具有時尚感與精致的印象。

          圖片

          圖片

           

          宋體搭配推薦

          案例一

          使字體搭配協調的一個基本原則就是選擇風格相近的字體。使用同一字族里的字體進行搭配,是最簡單、安全的搭配方法。所謂字族(font family)即一款字體下的多個子字體,如思源宋體字族從細到粗共有七款字體,風格協調統一。

          圖片

          使用中西文組合排版時,西文盡量不要使用中文自帶的字體。宋體常與襯線體相搭配使用,因為兩種這字體無論在筆畫特征,還是氣質上都很相似。如本案例使用的是西文字體“Times New Roman”。

          圖片

          在編排時需要形成視覺層次,通過字體的大小、粗細、顏色等方式來給版面帶來閱讀的層次感。

          圖片

           

          案例二

          搭配不同的字體時,要注意他們之間的包容性,既要有所區別又要統一和諧。書法字筆畫變化豐富且非常具有視覺沖擊力,通常會搭配同樣具有歷史文化屬性的宋體字形。

          圖片

          西文則選擇與宋體對應的襯線體,與書法字形搭配。

          圖片

          根據書法字的結構和筆勢,通過對文字大小、位置的調整,進行編排,讓文字看起來更緊密也更有節奏感。

          圖片

           

          案例三

          在進行時尚類的設計時,可以選擇現代型宋體,西文字體則可以搭配幾何襯線體。本案例使用方正風雅宋和Didot進行搭配,這兩款字體簡約的幾何造型和粗細對比強烈的筆畫,細膩中透露著時尚前衛的風格。

          圖片

          黑體與宋體的混搭是很常用的一種搭配方式,需要注意的是尺度的把握,適當的對比能夠為版面帶來更豐富的視覺印象,但對比過度也會產生凌亂感。

          本案例選擇較細黑體進行搭配,字形形成了微妙的對比,較細的黑體還有著高雅、精致的氣質,運用在具有女性時尚特征的設計中相得益彰。西文則選擇和黑體相對應的無襯線體。

          圖片

          編排效果:

          圖片

          如果感覺排版太過于規矩,可以嘗試加入手寫體加強字形對比,打破呆板感,營造更強烈的動感。

          圖片

          在進行設計時,不管是中文與中文還是中英文搭配,都是需要經過仔細分析和不斷練習,才能達到和諧統一、層次清晰而美觀大方的效果。

           

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

          作者:鄧海貝

          轉載請注明:學UI網》如何排版更高級?帶你重新認識宋體字排版!

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

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


          文章來源:csdn

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

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


          最近超火的“彩虹光感”,別告訴我你是最后一個知道的

          seo達人


          什么是彩虹光感?

          圖片
          彩虹光感也是最近這一年左右在設計圈蔓延,然后至今發現越來越多的設計師喜歡上這樣的風格,也許是因為單色漸變或者黑白灰看膩了,從而去選擇一些更能在平凡中凸顯競爭性彩虹色彩。
          圖片
          彩虹光感的形成,一般由多種色彩疊加混合而出來,通過色彩柔和過度或者擴散開的方式處理形成。這種色彩出來的效果十分驚艷,藝術感十足。
          圖片
          Microsoft Office 365
          譬如之前微軟一只影片里面,應用到了彩虹色彩搭配思路。在玻璃擬態輕質感的加持下,視覺效果讓人眼前一亮。
          或許有些設計師覺得彩虹光感,會有些花哨且也不高級。其實在在同質化嚴重的今天,嘗試下新的視覺表現形式,未必是壞事,也許它可以讓你的設計脫穎而出。
          圖片
          英國約克郡雕塑公園的舊教堂
          藝術家kimsooja 用彩虹色燈光,為教堂帶來新的生命力。在這種環境中,似乎讓我們感受到了色彩呼吸的聲音,放下生活中的雜事,聆聽色彩在歌唱,開始靜謐冥想。
          圖片
          apple watch
          就連蘋果的硬件產品設計,也采用了彩虹色彩搭配,這種與眾不同的新鮮感,有網友直呼太美了吧。也正是因為彩虹色的活力與年輕化潮流,受到越來越多人的關注。

           

          彩虹光感的特點

          彩虹光感由自然界中真實存在彩虹演變而來,如今在數字設計中越發廣泛的使用。因其特殊的效果,以及迷人般的色彩彌散處理,使得這種色彩雖然混合多種,也不會讓人產生厭倦感。
          圖片
          untitled macao
          基于目前彩虹色彩應用案例,我們可以分析出這種風格最大特征點有:豐富、多彩、年輕、活力、細膩的質感、充滿想象空間以及有一些瘋狂特征,似乎有著為年輕一代而出的風格。
          圖片
          圖片
          其實在早期從20世紀70年代開始,彩虹色彩就受到搖滾樂隊的喜愛,以及一些電影霓虹燈效果演變,也有些彩虹色彩蹤跡。
          圖片
          搖滾音樂CD封面
          直到今天,彩虹色的再次復興,已經延續到眾多領域中,例如裝置藝術,藝術展覽以及產品包裝、音樂節海報等各種領域的滲透,我想我們是時候思考它的價值以及接下來潛力。
          圖片

          圖片

          untitled macao
          圖片

           

          彩虹光感的應用

          如今不論裝置藝術,還是數字設計,彩虹色彩搭配都能有眼前一亮感受,這種效果不僅 能打破 枯燥配色,還可以活躍氛圍感,特別是一些涂鴉類型藝術裝置等、音樂海報、酸性風格和平面設計等大量出現,下面挑選一些優秀領域應用案例和大家分享下。
          #1. 平面中的應用
          圖片
          圖片
          圖片

          圖片

          圖片

          Behance/Canwei Lai 賴燦偉

           

          #2. 包裝中的應用

          圖片

          圖片

          圖片

           

          寫在最后

          彩虹光感慢慢開始成為流行文化中的一部分,特別是演藝海報與展覽裝置藝術等都在大量出現。這種色彩搭配的出現,更是一種前所未有的改變與突破,大膽而張揚的精神,極具吸引力。

          個人覺得彩虹光感的配色,可以讓產品在競爭中脫穎而出,彩虹色更有著年輕活潑的寓意。如今看到一些營銷,也在為Z世代年輕人打造產品,將彩虹色應用在產品中也是一種突破窘境的手段。

           

          原文地址:功夫UX(公眾號)
          作者:功夫UX

          轉載請注明:學UI網》最近超火的“彩虹光感”,別告訴我你是最后一個知道的

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

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


          文章來源:csdn

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

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



          系統化思維如何輔助設計實現

          seo達人



          “文中示例相關數據都為模擬數據,而非真正的商業數據,以此聲明”

           

          先給大家介紹一下酷大師的背景:

          1. 酷大師產品定位:面向設計領域的在線建模工具和內容平臺。

          2. 酷大師當前階段:0-1搭建并完善用戶體驗閉環。

          3. 酷大師階段目標:服務用戶增長的同時,提高用戶留存。(站點留存→引流→工具留存)

          在一周一迭代,交付任務緊的敏捷流程中。以下是我們在其中的一些實踐:

           

          1、以系統化的視角來分析業務

          酷大師項目啟動至今,已經大致完成了站點從0-1的內容搭建。站點的主要模塊包含:首頁、模型廣場、工作臺、幫助中心、活動中心、課程中心。他們相互獨立,又相互影響。獨立好懂,聰明的親們通過名字就能猜出各個模塊的功能,并且這些功能彼此都不可替代。那么他們是怎么相互影響的呢?這里引出一個詞:系統化

          請看下圖:

          圖片

          同樣一個事物,獨立的看,和把它放到一個系統中看,我們可能會有不同的理解。同理,當我們把酷大師站點當作一個系統來看時,再結合我們的業務指標,我們可以把這個系統轉譯成如下模型:

          圖片

          從抽象到具象,我們把整個模型分為三個指標類型:

          • 1、核心指標:整個項目為之負責的目標,是評判所有項目行為的基本準則。
          • 2、策略指標:影響核心指標的所有變量集合,是基于產品策略拆解出來的二級支撐性指標。
          • 3、行為指標:隨著策略指標的精細化,產品的策略指標最后都會對應到一個或者多個具體的用戶行為指標。

          我們可以通過模型找到影響業務核心指標的重點發力板塊,也可以通過最底層的行為指標去反推上層的策略指標,進而量化設計價值。到這里,我們也就可以在這個系統中,找到對核心指標影響較大的策略指標,他們分別是:注冊UV數、站點引流UV數和客戶端引流UV數。這三個策略指標對應的產品板塊分別是:游客頁、詳情頁和工作臺。他們就是設計接下來需要在酷大師眾多產品模塊中著重發力的項目。

           

          2、以系統化的方式來分析用戶

          說完了產品目標和拆解,我們來看看用戶。市場和用研同學往往可以在項目前期給我們輸入很多關于用戶的數據,在項目初期,我們可以把這些信息抽象成幾個有代表性的關鍵詞。下圖是酷大師用戶關鍵詞,可以幫助我們定制大的設計思路,不過在一些更細的業務場景中,這些信息并不給到更清晰的設計指導。

          圖片

          所以在此基礎上,我們可以把這些信息作為一個一個的內容切片,通過不同的標準來重新組織這些切片,進而得到一個相對系統化的用戶信息。

          我們換一個維度,再做一次梳理分析:

          圖片

          可以看到,當我們把酷大師用戶以不同階段做劃分,從新游客到資深用戶,不同階段的用戶對于產品的訴求有著明顯差異性。游客和新用戶更注重價值和需求的匹配;資深用戶更注重實際產品價值的最大化。并且我們對于不同的用戶群體,需要對應不同的產品策略,甚至不同的“端”來承接用戶需求。到這里,我們已經可以通過以上信息,在產品的不同鏈路里規劃不同的設計策略了。

          不過有時候需求對標的用戶群體比較聚焦,以上信息還是不夠說服我們自己的話,還有最后一個技能,就是找到和需求高度對標的用戶(注意,是高度對標),和他們深度交流,為他們做用戶畫像:

          圖片

          (圖中為虛擬數據,僅供參考)

           

          PS:這里的用戶畫像需要根據實際的業務需求來針對性的采集信息,這是一個比較靈活的過程,需要設計師拿捏其中的尺寸。

          通過以上三個維度的用戶數據,我們就可以根據產品的不同模塊,找到對標的用戶群體,然后為其做對應的設計策略。

          接下來就是第三步:

           

          3、以系統化的思維規劃設計策略

          面向資深用戶的設計策略(以客戶端改造為例):

          通過用戶訪談和調研結果看,如果用一句話來描述酷大師客戶端的用戶特點的話,應該是這樣的:

          圖片

          基于用戶特點和業務訴求,我們再結合服務模型,我們可以一步步推導出我們的設計策略。

          圖片

          (圖中為虛擬數據,僅供參考)

           

          當設計策略明確后,結合實際的業務需求,接下來就是有的放矢的設計實施過程。

          面向新用戶的設計策略(以游客頁改版為例):

          回想我們的生活,最吸引用戶眼球的傳播方式是什么?思前想后,我覺得是電視直播,因為通過它,自詡謹慎機智的我買了人生第一箱「生發水」…

          • 1、你是否有脫發的煩惱? → 訴求
          • 2、用了一堆產品,卻遲遲沒有效果? → 顧慮
          • 3、我們有北美硅谷防脫技術+南亞失傳生發秘方! → 優勢
          • 4、主持人和甲方撕破臉,工廠緊急調貨、買一送五!?。?nbsp;→ 驅動

          事實證明,「生發水」沒有白買,因為后來我發現這和酷大師游客頁的業務目標幾乎一致:“在沒有互動的情況下以很短的時間把用戶從游客轉變為消費者?!?

          通過前面的用戶分析我們可以知道:對于酷大師的游客用戶&新用戶而言,他們更多關注于產品價值和自己需求的匹配程度。

          那么如何在短時間里向用戶傳達信息,并促成注冊轉化呢?

          我們從訴求->顧慮->驅動三個維度來去組織我們的優勢信息。

          因此在面向此類用戶時,除了對他們介紹酷大師的共性價值外,需要重點介紹酷大師的差異性價值,以及足夠有吸引力的驅動利益點。

          如下圖:

          圖片

          基于上文分析,我們再基于目前產品可提供的能力范圍,結合用戶反饋,把信息和用戶需求做一一對應,然后再給出設計解法。

          設計實現:

          正所謂:條條大路通羅馬,各個小道奔安康。只要設計策略是正確的,那么具體的設計方案就是合理的,篇幅有限,這里就不做展開。

          圖片

           

          4、以系統化的模型驗證設計成果

          萬物皆可度量,設計并不例外。系統是度量設計成果的最好“尺寸”。

          怎么度量?還記得最初的指標模型么?

          • 1、通過技術手段監控用戶的行為指標:“按鈕點擊、停留時長、滑動屏數、返回&跳出率…”
          • 2、通過行為指標反推對策略指標的影響。“按鈕點擊提高 → 頁面引流效果提高。”
          • 3、通過AB測試、上線前后變量監測等其他手段,對比出設計在數據上帶來的變化。

          通過以上方法,我們可以直觀的看到設計在整個項目中的貢獻。

          那么在酷大師項目中,這個成果是多少呢?請看下圖:

          圖片

          ps:圖中注冊轉化和老用戶登錄轉化是以設計為唯一變量帶來的數據提高

           

          以上就是酷大師從0-1過程中的主要思考點,從前期業務拆解分析、用戶調研,到制定設計策略,再到設計實施,最后到成果驗證。

          圖片

          到這里,我們也基本回答了最開始的問題:我們如何在業務迭代中抓重點,并有的放矢的“集中精力做大事”。

          以這樣的思路,我們就能以有限的精力,最大程度保證業務的目標的實現,也能對用戶的關鍵路徑做有效的體驗提升。

           

          寫在最后

          1):設計師不能盲目跟隨需求,更不能對需求一視同仁,什么都想做好的結果就是什么都做不好。我們需要有一個自己判斷標準。

          2):“系統”是一個標準,也是一個視角。他影響著我們對業務、對需求、對用戶以及設計的理解。

          3):“系統”本身不重要,用“系統”的思維來看待事物很重要。

          4):多個視角看到的東西,一定比單視角看到的更全面。

          以上內容,和諸位共勉。

           

          原文鏈接:酷家樂用戶體驗設計(公眾號)

          作者:滄耳

          轉載請注明:學UI網》系統化思維如何輔助設計實現

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

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


          文章來源:csdn

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

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



          如何排版更高級?帶你重新認識宋體字排版!

          seo達人


          圖片

           

          宋體的起源和發展

          雕版宋體字的形成 

          在印刷術發明之前,書要一字一句用手抄寫,費時費力。而唐代發明的雕版印刷術,使書籍由手工抄寫進入印刷復制時代。

          圖片

          現存最早的雕版印刷品是唐代咸通九年的《金剛經》

           

          宋朝體

          到了宋代,雕版印刷迎來黃金時代,但此時的字體也并非我們熟知的“宋體”,而是以唐代大家的楷書字體入板,并且不同地區入板的字體也不同。

          圖片

          浙江刊本–《姓解》

           

          圖片

          四川地區 – 《開寶大藏經》

           

          明朝體

          明朝體是中國明代木板印刷中出現的字體,也是現今大眾所認知的“宋體”的原型。雖然明朝體逐漸失去宋朝體所特有的風格,但由于易于凋刻,字形便于走刀,能滿足當時的印量而得以發揚。

          圖片

          《南齊書》 –明朝時期的南京國子監刊本

           

          清代宋體字

          在康熙中期以后逐漸形成清代的風格,此時的宋體字更加成熟、精致。乾隆時期,宋體字大體定型,與現代宋體字基本相同。

          圖片

          《學統》清康熙刻本

           

          綜上所述,我們可以知道宋體字不是宋朝的字體,而是漢字字體中的一種風格類別。而在日本以及港臺地區,宋體字也被稱為“明朝體”,“宋體”與“明體”本為一物,是由于文化差異所帶來的名稱上的差異。

           

          現休宋體

          如今,為了適應印刷和電子屏顯示的需要,宋體又被進行了一番改造。現代型宋體的幾何特征更為明顯,筆畫更為利落冷峻,為了可讀性,文字胸線也較大,更加符合現代設計所需要的明快感。

          圖片

          以宋體為基礎發展出許多新字體,各大字庫也開發有各有特點的宋體。包括老宋到新宋,再到仿宋,從用于標題的粗宋、中宋,到用于正文的書宋,成為一個完整的字體系列。筆畫較粗的宋體適合用做標題,醒目大方;筆畫較細的宋體,擁有很高的閱讀性,主要用于正文排版。

          圖片

          根據中宮和體飾等特點,可以大致地將宋體分為傳統型宋體、中間型宋體、現代型宋體:

          圖片

          圖片

          圖片

          圖片

          目前可免費商用的宋體字非常稀缺,

          推薦9款免費商用宋體。

          圖片

           

          宋體的使用場景

          傳統、歷史

          傳統宋體的筆畫結構帶有手工雕刻的痕跡,幾百年的文化沉淀,加上字體本身的特征,使得宋體用于傳統、歷史題材的設計中,可以體現出古樸的傳統文化感。

          圖片

          圖片

           

          文化、藝術

          宋體由于繼承了自然書寫的痕跡,又具有精致的裝飾性美感,運用在文化藝術等題材,具有強烈的人文氣息,充滿文藝范。

          圖片

          圖片

           

          典雅、高貴

          宋體字方正平穩、對稱均衡的字體結構,顯得端莊典雅,舒展大氣。常運用在要體現高端、雍容、典雅、華麗的設計中。

           

          女性、優雅

          宋體在工整中充滿人情味,有著很強的韻味感和精致美感,帶著幾分女性的溫柔與優雅氣質。所以很多和女性相關的設計都會使用宋體。

          圖片

          圖片

           

          時尚、前衛

          現代宋體筆畫呈幾何化結構,相對于傳統宋體的溫情,現代宋體更加的冷峻,細膩中透露出時尚前衛的風格,具有時尚感與精致的印象。

          圖片

          圖片

           

          宋體搭配推薦

          案例一

          使字體搭配協調的一個基本原則就是選擇風格相近的字體。使用同一字族里的字體進行搭配,是最簡單、安全的搭配方法。所謂字族(font family)即一款字體下的多個子字體,如思源宋體字族從細到粗共有七款字體,風格協調統一。

          圖片

          使用中西文組合排版時,西文盡量不要使用中文自帶的字體。宋體常與襯線體相搭配使用,因為兩種這字體無論在筆畫特征,還是氣質上都很相似。如本案例使用的是西文字體“Times New Roman”。

          圖片

          在編排時需要形成視覺層次,通過字體的大小、粗細、顏色等方式來給版面帶來閱讀的層次感。

          圖片

           

          案例二

          搭配不同的字體時,要注意他們之間的包容性,既要有所區別又要統一和諧。書法字筆畫變化豐富且非常具有視覺沖擊力,通常會搭配同樣具有歷史文化屬性的宋體字形。

          圖片

          西文則選擇與宋體對應的襯線體,與書法字形搭配。

          圖片

          根據書法字的結構和筆勢,通過對文字大小、位置的調整,進行編排,讓文字看起來更緊密也更有節奏感。

          圖片

           

          案例三

          在進行時尚類的設計時,可以選擇現代型宋體,西文字體則可以搭配幾何襯線體。本案例使用方正風雅宋和Didot進行搭配,這兩款字體簡約的幾何造型和粗細對比強烈的筆畫,細膩中透露著時尚前衛的風格。

          圖片

          黑體與宋體的混搭是很常用的一種搭配方式,需要注意的是尺度的把握,適當的對比能夠為版面帶來更豐富的視覺印象,但對比過度也會產生凌亂感。

          本案例選擇較細黑體進行搭配,字形形成了微妙的對比,較細的黑體還有著高雅、精致的氣質,運用在具有女性時尚特征的設計中相得益彰。西文則選擇和黑體相對應的無襯線體。

          圖片

          編排效果:

          圖片

          如果感覺排版太過于規矩,可以嘗試加入手寫體加強字形對比,打破呆板感,營造更強烈的動感。

          圖片

          在進行設計時,不管是中文與中文還是中英文搭配,都是需要經過仔細分析和不斷練習,才能達到和諧統一、層次清晰而美觀大方的效果。

           

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

          作者:鄧海貝

          轉載請注明:學UI網》如何排版更高級?帶你重新認識宋體字排版!

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

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


          文章來源:csdn

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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