<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.從業務視角出發

          首先需要理解“業務”的范疇,指的是公司層面和產品層面出發,這個問題會影響產品體驗、市場占有率、收益、活躍度等關鍵性問題。我們從業務視角出發挖掘產品問題,可以從兩個視角切入:公司發展戰略和產品需求。

          圖片

          舉個例子,公司下個季度的需求目標,是要提升產品的語音交互次數(語音喚醒次數)。

          我們拿百度地圖來舉例,除了導航,語音就是比較核心的一個功能。我們在使用百度地圖時,有時候會使用語音輸入地址功能,然后發起導航。在導航過程中,繼續喚醒語音為你提供服務,那么這個喚醒的頻次,就是這次公司下個季度的戰略發力方向。如果這次設計中沒有去著重解決這個問題,那么我們下個季度的目標也是無法完成的。

          所以大家應該明白理解業務目標了,在做設計前,是一定要了解業務視角下的產品具體需求,這樣才能真正解決具體問題。

           

          2.從用戶視角出發

          回到用戶身上,洞察問題,也是挖掘產品問題的主要手段。例如:我們需要思考為誰而設計?這些用戶的行為習慣這樣?他們的喜好及影響到他們操作使用的問題是哪個?用戶期待產品是什么樣子的?他們印象中產品應該是怎樣?

          從用戶視角洞察問題,常用的方法有,桌面研究,用戶畫像,用戶旅程圖等。

          桌面研究:日常用戶反饋收集,應用商店收集整理。

          用戶畫像:用戶人群細分,不同類型用戶需求痛點研究,一般情況下,如果需要這一步,都需要用研同學加入,畢竟他們比設計師更專業可靠。通過用研研究分析,我們可以知道用戶期待的產品會是怎樣的氣質?性格特點。

          用戶旅程圖:按照用戶使用產品全流程,需構建一個用戶體驗路徑中的各個時間段的做的任務和觸點。例如:一個運動產品分為運動前、開始運動、運動中、運動結束等4個大階段,那么你要做的就是研究這4個階段體驗糟點研究和分析。分析出來的結論用于設計指導。

          通過上面我們可以看出,用戶視角出發可以通過三個方向去做,當然并不是每個層面都需要做,你可以選擇其中一個點深入。

           

          3.從行業競品視角出發

          從競品視角出發,幫助我們對照競品找出自身產品問題,取長補短。從競品視角出發我們一般都是看什么?以設計師視角為例,分析行業競品,首先從目標出發,在競品中找到一部分關鍵性設計策略。

          圖片

          看功能:競品核心功能怎么做的?功能布局差異化怎么做的?然后和自家產品進行對比優劣分析。

          看體驗:核心功能體驗路徑如何做的?峰值體驗如何創造?情感化場景如何設定的。

          看視覺:看品牌DNA如何打造,品牌多元化場景穿透思路,品牌差異化創新設計思路。

          從行業競品視角出發,逐步分析設計機會點,在同質化的今天,找到解決策略。

           

          4.寫在最后

          今天主要講了,設計改版或者設計探索前期的必備工作,洞察產品問題。如何才能真正的找對問題,洞察到設計機會點。本文從三個視角切入:業務視角、用戶視角、行業競品視角切入,三者環環相扣,系統化思考產品的本質問題。
          從側面也反應出,設計師需要具備多元化思維,多個維度立體化思考,才能精確地定位問題,為產品找到準確的發力方向。

           

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

          轉載請注明:學UI網》做設計改版前,如何準確洞察產品問題

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

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

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

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



          進了大廠后,我才知道原來我的細節差這么多!

          seo達人



          01 這個疊加是假的

          我看釘釘群里有人問下面這種風格的圖標是用的什么模式疊加的:

          圖片

          我之前有做過類似的,其實這個疊加的效果是假的,和毛玻璃一樣的原理,中間疊在一起的地方,其實是一個單獨的圖形:

          圖片

          我們把這個單獨的圖形加上一個漸變色,放在最上面,效果就出來了:

          圖片

          這個漸變的是可以任意更換顏色的:

          圖片

          所以,這個疊加效果,并不是我們想象中那樣用疊加模式調出來的。
          反正我是這樣做的,供大家參考。

           

          02 包裝的問題

          下面這組練習,單從圖標來看其實是沒有啥問題的:

          圖片

          統一性啥的都還ok,但是毀在包裝上了,比如黑色方塊下面盡量就不用加投影了,太臟了:

          圖片

          其次就是黑色下面的背景色用了一塊淺紫色,毫無關聯性,不如直接用灰色,或者如果色塊是深紫色,背景是淺紫色,那也ok:

          圖片

          總之就是要有一定的關聯性,不然就會比較奇怪。

           

          03 關于圓角的和諧性

          其實我們在看圓角的時候,并不僅僅只是一組圖標之間的統一,單個圖標的圓角統一也要注意。
          比如之前有一次優化的圖標,就是因為圖標頂部和底部的圓角大小不一:

          圖片

          今天看的這個是優惠券的:

          圖片

          也是感覺有點難受,但是如果是下面這個優惠券就精致很多:

          圖片

          其實也是因為圖標內部圓角統一的問題,都是直角就會舒服很多,但外輪廓是大圓角,里面是尖角就會比較難受。

           

          04 為什么這組半原創沒有原版耐看

          有一位星友做了一組半原創練習,原版是這組:

          圖片

          半原創是這組:

          圖片

          我們會發現,原創的圖標沒有原版耐看,為什么呢?
          因為原版的細節足夠豐富,但是半原創的細節就很單薄,比如我們看原版的獎杯,底座加了兩側矩形,如果只是一條橫線就會相對非常單薄普通:

          圖片

          再比如這個放大鏡,把手也并不只是一條豎線,而是分了兩段,加了細節:

          圖片

          按照這個理念來分析,我們可以發現半原創的幾個圖標,只有第四個看起來比較耐看,因為它的細節相對比較豐富,可以跟得上原作,其他都相對單薄一些。

          圖片

          雖然第二個錢包紐扣那里也加了兩層,但是疏密度有點問題,而且也比較常規。

           

          05 看幾組星友精選的練習

          最后再看幾位同學的精選打卡,非常用心:
          第一組是donna的!
          融合很多細節,也有很多自己的想法,變得更加豐富、精致、統一,非常優秀:

          圖片

          圖片

          第二組是小7的
          統一性做了很好的優化,又加入了自己的斷線想法:

          圖片

          圖片



          第三組是慢格調的:
          很精致,疏密度、大小、長短高矮,用色比例全都進行了統一性調整,非常優秀。
          也融入了很多自己的想法,繼續加油:

          圖片

           

          總結

          今天就先分享這么多了,每天進步一點點,現在開始,永遠不晚!

           

          原文地址:菜心設計鋪(公眾號)
          作者:菜心設計鋪
          轉載請注明:學UI網》進了大廠后,我才知道原來我的細節差這么多!

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

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

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

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




          快學,簡單出彩的刷屏級彌散光教程來了

          seo達人



           

          圖片

           

          什么是彌散光感?
          彌散光感的形成,一般由單色或者多色模糊漸變混合,形成虛實集合的模糊效果。在這其中還可以加入不同的元素使其具有新奇和記憶點,來豐富單調乏味的畫面,增加畫面空間層次感,增添畫面的細節,還能聚焦產品的記憶點、優化信息層級,讓平淡無奇的排版瞬間活了起來,下面我們就來看看彌散光感的一些優點。
           
          彌散光感的優點
          1. 豐富設計細節,增添畫面感
          2. 聚焦重點,吸引目光
          3. 營造空間層次感
           
          彌散光感常用的形式 
           
          1. 虛實結合
          一側進行虛化模糊,另一側保持清晰的輪廓,整體從觀感上多了一些動感變化效果。因此,不管作為版面的主視覺,還是作為輔助部分都能有不錯的效果。
          圖片  
           
          2. 單體模糊虛化
          將一種或者兩種以上顏色進行全部模糊虛化掉,一般多作為背景裝飾來使用。在此基礎還可以加上不同的元素,再增加一點噪點質感,細節滿滿。
          圖片 
           
          3. 多重混合
          使用多種不同模糊方案或手法,以彌散光感為基礎,來達到視覺聚焦和豐富設計細節,增添畫面感和空間層次感。
          圖片 
           
          如何設計這種彌散光感?
          看到這里大家都肯定要嚷嚷,光說不練假把式,安排上菜,我們先從簡單的開始,蘿卜要一個一個吃,坑要一個一個的埋,翠花,上酸菜!  
           
           
          圖片    
           
          第一步
          首先我們來設計一個banner,這個案例就用最簡單的高斯模糊來做,這種全彌散的漸變實現起來比較簡單,顏色我設置為如圖三個顏色和三個圓形。
          圖片 
           
          第二步
          為了保留模糊參數的后期可編輯行,模糊之前,先給三個圓形轉換為智能對象,可以三個一起起智能對象,也可以單個一個個的智能對象,后者的好處是可以隨時調整圖形的位置與大小。然后給智能對象一個高斯模糊(濾鏡-模糊-高斯模糊)
          圖片 
           
          第三步
          高斯模糊后,有時候有的顏色融合的不是很好,這個時候我們可以通過調整圖層疊加模式或者透明度,讓顏色之間融合的更協調,案例中我覺得青色過于實了,降低一下透明度70%,到這里,基本的背景就完成了。彌散光感背景就是這么簡單!
          圖片 
           
          第四步
          確定信息層級
          我根據之前的梳理和自己的意愿,把文案分為了4個層級,中文英文的主題信息作為最高層級存在;然后我想突出時間,所以把它放在第二層級,其他元素依次往后排。
          圖片 
           
           
          第五步
          添加主文案
          我們先確定大標題,然后再用小字來進行版面的填充與平衡,讓整體的文字排版形成視覺層次變化與平衡。由于圖形位于對角線位置,在文字分布上我順應這個構圖方式。英文和中文之間互相疊壓一點,這是壓抑不住都要買的節奏?。☆伾缓谝话准訌娭g的對比關系。
          圖片 
           
          第六步
          添加第二、三層級內容
          為了讓版面的保持視覺上的平衡,二、三層級的內容和主題內容形成交錯穿插,讓整體的文字排版形成視覺上的一個層次變化。
          圖片 
           
          第七步
          細化排版
          到這一步,整體排版基本完成了,但整體感覺信息之間比較獨立,我們添加一些裝飾元素,讓畫面更整體飽滿緊湊。OK,一張banner完工
          圖片 
           
           
          圖片 
           
           
          馬上要過年了,新的一年,換新的工作,所以這次的案例就為大家做個作品集封面,俗話說:作品封面做的好,工資翻番少不了。
          圖片 
           
          第一步
          確定信息層級
          作品集文案的內容并不如一些展覽海報類那么多,所以在整體的編排上難度不是很大,根據內容需要找到自己想要突出的重點即可。
          信息文案一般大致上可以分為三種類型,①主題信息適合作為主標題存在;②與活動相關的具體信息則次之,當然,我們也可以根據內容選擇性的突出其中某一項,如價格、時間或是其他;③其他的補充輔助性信息,這類的信息一般作補充說明,相對不是很關鍵,所以適合作為裝飾性的元素來放在需要的地方。
          圖片 
           
           
          第二步
          彌散光感背景
          建立4個大小不同的圓形,填充不同的顏色,然后單獨給每一圖層智能對象后,調整各自的模糊數值。根據需要調整圖層疊加樣式或者透明度
          圖片 
           
           
          第三步
          添加虛實漸變
          ①光這樣的話,稍顯單調,所以我們再加點料。新建一個圓形,填充淺藍色,然后新建2個圖層并創建剪貼蒙板,用柔邊畫筆畫深淺2個大小不一的顏色,然后把3個圖層合并一個智能對象。
          圖片 
           
          ②給智能對象一個場景模糊(濾鏡-模糊畫廊-場景模糊),場景模糊具有定義不同模糊量的多個模糊點來創建漸變的一種模糊效果。將多個圖釘添加到圖像,并指定每個圖釘的模糊量,從而達到一種虛實模糊不同的模糊效果。本案例定義2個模糊點,一個模糊量0.一個為60,通過一邊模糊,一般不模糊來達到一種虛實結合的變化,
          圖片 
           
          ③為了讓背景更豐富有層次感,再用①的方式再新建一個圓形,填充不一樣的顏色,然后執行場景模糊,圖層疊加為“色相”,效果如圖。
          圖片 
           
          第四步
          添加文案信息
          為了體現層次空間感,大標題我用虛實模糊的圓形壓住一部分,交錯穿插,讓整體的文字排版形成視覺上的一個層次變化。
          圖片 
           
          第五步
          細化排版
          細化排版,添加一些輔助元素,填補版面的負空間,這件,一個作品集封面就完成了。
          圖片 
           
            
          圖片 
           
          這次來運用光圈模糊做一個展覽海報。
          “光圈模糊”對圖片模擬淺景深效果,選擇“光圈模糊”(濾鏡-模糊畫廊-光圈模糊),將在圖像上放置默認的光圈模糊圖釘、單擊圖像可以添加其他模糊圖釘,說明:A. 銳化區域 B. 漸隱區域 C. 模糊區域 ,拖動句柄移動它們以重新定義各個區域。拖動模糊句柄以增加或減少模糊。一個圖片中可以添加多個光圈模糊進行重復疊加來達到不同的效果。
          圖片
          圖片 
           
            
          第一步
          確定信息層級
          圖片 
           
          第二步
          彌散光感背景
          基于文案內容是港澳臺三地及青年藝術家,所以在背景上希望能表達出三地的概念,顏色上用淺青+黃色系表達出青年藝術家這一人群。青年嘛總是要嫩點,鮮點。
          建立三個大小不一的橢圓,智能對象后,再分別進行光圈模糊,制作方法上除了光圈模糊,當然也有其他的實現方法,只不過個人覺得光圈模糊會更方便一點~
          圖片 
           
           
          第三步
          完善彌散光感背景
          海報彌散光感背景基礎完成了,現在復制三份,從上往下排列,體現三地的概念,為了讓每個色塊之間有所差異,在大小排列上做了一些調整與變化。
          圖片 
           
           
          第四步
          添加標題
          根據上面的信息層級,放上主標題,根據主題意義,對字體做一些簡單的筆畫裁剪,英文用底色做一點點遮擋,點綴點星星,群星閃耀港澳臺。
          圖片 
           
           
          第五步
          添加其他信息
          將其它文案分布在海報的下面,注意平衡一下整個畫面。
          圖片 
           
          第六步
          最后用網格規范下文字信息編排,用網格可以比較精確地將版面編排出來。大家可以清晰地看到,所有的文字的大小和位置都是有依據的,都卡在模塊網格之中的。
          圖片
          圖片 
           
           
          圖片 
           
           
          旋轉模糊通常用于創建圓形或者橢圓形的模糊,比如飛馳中的輪胎,轉動的摩天輪等等都是旋轉模糊的具象表現。濾鏡-模糊畫廊-光圈模糊,點擊拖動橢圓邊框改變模糊的大小。中間的模糊圈可以用來調整模糊的量,或者模糊的角度。也可以增加多個模糊點
          圖片 
           
          移軸模糊點擊濾鏡-模糊畫廊-移軸模糊,如下圖樣式。虛化的大小可以通過白色圓圈調節,虛化位置可以通過移動位置或者旋轉進行調整。這樣就實現了虛實集合的光感設計。
          圖片 
           
          第一步
          確定文案信息層級
          圖片 
           
           
          第二步
          建立任意門
          根據文案的信息內容,我想用眼睛和日出來表現這個海報的主題概念。根據上面方形旋轉模糊的特性,我在畫面中建立了一個任意門的圖形,它可以帶去往不同的時空,咳咳咳…傳錯了,還是傳回來寫完這個教程了。
          圖片 
           
           
          第三步
          執行旋轉模糊
          先把任意門圖層轉為智能對象,然后執行旋轉模糊,具體參數所見及所得,根據實際效果來調整參數即可,這一步,可能會有點慢,耐心等候,不急哦。
          圖片 
           
           
          第四步
          一起看日出吧
          進行到這一步,發現畫面缺少一個視覺中心來作為視覺聚焦點,然后在眼眶中心新建一個紅色的圓形,轉換智能對象,執行移軸模糊。太陽出來了!有人要一起看日出嗎?
          圖片 
           
           
          第五步
          日出倒影
          對日出圖層,執行濾鏡-液化工具,用“向前變現工具”來回擦,一邊往里擦,另一邊往外擦的的節奏來回擦,為日出擦出水面倒影,這一步需要耐心,一次不行,可多嘗試幾次,以達到理想效果。
          圖片 
           
           
          第六步
          添加文案信息
          根據畫面的圖形構圖,文案信息的編排方式上采用壓四角的編排方式,留出中間的視覺中心點。
          圖片 
           
           
          第七步
          網格規范
          最后根據網格來規范下文字信息編排。
          圖片
          圖片 
           
           
          圖片 
           
          最后一個案例我們來用下最近流行的毛玻璃效果,看看彌散光和毛玻璃能碰撞出怎樣的愛情火花,好了,話不多說,直接干貨走起。
          圖片 
           
           
          第一步
          彌散光感背景
          拉出4個大小不一,顏色各異的圓形,擺放位置按自己想的構圖排列就行,把握不好也可以模糊后再調整都可以,方法不一,效果達到就行。然后把4個園一起轉換為智能對象后,并進行高斯模糊。一個彌散光感背景就這么簡單的做好了。
          圖片 
           
           
          第二步
          毛玻璃制作
          新建一個淺藍色圓形圖層,crtl+j復制圖層,2個圖層前后錯開一定的位置,底下圖層填充一個從淺到深色的漸變,確定好厚度位置后,將淺色層和深色層重疊的部分用蒙板遮住,只留邊緣,這樣就可以形成玻璃厚度的效果。
          圖片 
           
           
          第三步
          優化毛玻璃細節
          將上面淺色層的透明度降低,這樣就形成了玻璃半透明效果。接著對玻璃的轉角和邊框高光等細節進行處理。加上玻璃的受光面和暗面
          圖片 
           
           
          第四步
          完善構圖版面
          將上面做好的圓形玻璃,復制2個,根據自己的構圖需求擺放,為了不至于形狀都過于統一,把其中一個智能對象,然后ctrl+t進行扭曲變化,做一個傾斜點的毛玻璃,讓整體構圖更靈活層次感。
          圖片 
           
           
          第五步
          添加文案
          添加文案信息,編排好文字信息主次關系。標題設計上采用了一個漸變疊加的處理,在呼應主題的“融合、共”的意思,同時,讓標題增加一點細節,讓它有那么一點點的設計感。
          圖片 
           
           
          第六步
          模糊文字
          將與玻璃塊疊加部分的內容模糊掉,這樣毛玻璃質感效果就更像了。至此這個具有UI風格的海報就完成了,如果,覺得背景比較單調了,還可以繼續把前面的毛玻璃智能對象復制一個,ctrl+t變形扭曲,或者添加噪點紋理,為背景填充更多的細節。
          圖片 
           
           
          最后
          前面幾款案例中,如果想要更有質感,還可以在做完再給畫面增加噪點質感,增加方法有2種,①濾鏡-濾鏡庫-紋理-顆粒。②濾鏡-camera raw濾鏡-效果-顆粒。我個人比較傾向后一種,顆粒比較細膩自然。

          圖片

           

          原文地址:胡曉波工作室(公眾號)

          作者:胡曉波工作室

          轉載請注明:學UI網》快學,簡單出彩的刷屏級彌散光教程來了


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

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

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

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



          日歷

          鏈接

          個人資料

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

          存檔

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