首頁

PYTHON爬蟲——必應(yīng)圖片關(guān)鍵詞爬取

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

圖片三個網(wǎng)站的圖片搜索結(jié)果進(jìn)行爬取和下載。 
首先通過爬蟲過程中遇到的問題,總結(jié)如下: 
1、一次頁面加載的圖片數(shù)量各個網(wǎng)站是不定的,每翻一頁就會刷新一次,對于數(shù)據(jù)量大的爬蟲幾乎都需要用到翻頁功能,有如下兩種方式: 
1)通過網(wǎng)站上的網(wǎng)址進(jìn)行刷新,例如必應(yīng)圖片:

url = 'http://cn.bing.com/images/async?q={0}&first={1}&count=35&relp=35&lostate=r
&mmasync=1&dgState=x*175_y*848_h*199_c*1_i*106_r*0'
    
  • 1
  • 2

2)通過selenium來實(shí)現(xiàn)模擬鼠標(biāo)操作來進(jìn)行翻頁,這一點(diǎn)會在Google圖片爬取的時候進(jìn)行講解。 
2、每個網(wǎng)站應(yīng)用的圖片加載技術(shù)都不一樣,對于靜態(tài)加載的網(wǎng)站爬取圖片非常容易,因?yàn)槊繌垐D片的url都直接顯示在網(wǎng)頁源碼中,找到每張圖片對應(yīng)的url即可使用urlretrieve()進(jìn)行下載。然而對于動態(tài)加載的網(wǎng)站就比較復(fù)雜,需要具體問題具體分析,例如google圖片每次就會加載35張圖片(只能得到35張圖片的url),當(dāng)滾動一次后網(wǎng)頁并不刷新但是會再次加載一批圖片,與前面加載完成的都一起顯示在網(wǎng)頁源碼中。對于動態(tài)加載的網(wǎng)站我推薦使用selenium庫來爬取。

對于爬取圖片的流程基本如下(對于可以通過網(wǎng)址實(shí)現(xiàn)翻頁或者無需翻頁的網(wǎng)站): 
1. 找到你需要爬取圖片的網(wǎng)站。(以必應(yīng)為例)

這里寫圖片描述
2. 使用google元素檢查(其他的沒用過不做介紹)來查看網(wǎng)頁源碼。

這里寫圖片描述
3. 使用左上角的元素檢查來找到對應(yīng)圖片的代碼。

這里寫圖片描述
4. 通過觀察找到翻頁的規(guī)律(有些網(wǎng)站的動態(tài)加載是完全看不出來的,這種方法不推薦)

這里寫圖片描述
從圖中可以看到標(biāo)簽div,class=’dgControl hover’中的data-nexturl的內(nèi)容隨著我們滾動頁面翻頁first會一直改變,q=二進(jìn)制碼即我們關(guān)鍵字的二進(jìn)制表示形式。加上前綴之后由此我們才得到了我們要用的url。 
5. 我們將網(wǎng)頁的源碼放進(jìn)BeautifulSoup中,代碼如下:

url = 'http://cn.bing.com/images/async?q={0}&first={1}&count=35&relp=35&lostate=r&mmasync=1&dgState=x*175_y*848_h*199_c*1_i*106_r*0' agent = {'User-Agent': "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.165063 Safari/537.36 AppEngine-Google."}
page1 = urllib.request.Request(url.format(InputData, i*35+1), headers=agent)
page = urllib.request.urlopen(page1)
soup = BeautifulSoup(page.read(), 'html.parser')
    
  • 1
  • 2
  • 3
  • 4
  • 5

我們得到的soup是一個class ‘bs4.BeautifulSoup’對象,可以直接對其進(jìn)行操作,具體內(nèi)容自行查找。 
首先選取我們需要的url所在的class,如下圖: 
這里寫圖片描述
波浪線是我們需要的url。 
我們由下面的代碼得到我們需要的url:

if not os.path.exists("./" + word):#創(chuàng)建文件夾 os.mkdir('./' + word) for StepOne in soup.select('.mimg'):
    link=StepOne.attrs['src']#將得到的<class 'bs4.element.Tag'>轉(zhuǎn)化為字典形式并取src對應(yīng)的value。 count = len(os.listdir('./' + word)) + 1 SaveImage(link,word,count)#調(diào)用函數(shù)保存得到的圖片。
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

最后調(diào)用urlretrieve()函數(shù)下載我們得到的圖片url,代碼如下:

 try:
        time.sleep(0.2)
        urllib.request.urlretrieve(link,'./'+InputData+'/'+str(count)+'.jpg') except urllib.error.HTTPError as urllib_err:
        print(urllib_err) except Exception as err:
        time.sleep(1)
        print(err)
        print("產(chǎn)生未知錯誤,放棄保存") else:
        print("圖+1,已有" + str(count) + "張圖")
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

這里需要強(qiáng)調(diào)是像前面的打開網(wǎng)址和現(xiàn)在的下載圖片都需要使用try except進(jìn)行錯誤測試,否則出錯時程序很容易崩潰,大大浪費(fèi)了數(shù)據(jù)采集的時間。 
以上就是對單個頁面進(jìn)行數(shù)據(jù)采集的流程,緊接著改變url中{1}進(jìn)行翻頁操作繼續(xù)采集下一頁。 
數(shù)據(jù)采集結(jié)果如下: 
這里寫圖片描述

有問題請留言。 

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

3個步驟,讓你把握設(shè)計切入點(diǎn)

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

如何從眾多的設(shè)計點(diǎn)中找到一個清晰的設(shè)計主線呢?只需從3個方面切入。

小明的設(shè)計故事:身為設(shè)計師的小明,剛剛遇到下發(fā)的設(shè)計需求,看了半天需求,無從下手。于是瘋狂尋找競品去借鑒,去素材網(wǎng)站尋找素材拼湊。

如果在設(shè)計工作中遇到與小明相同的情況:沒有設(shè)計頭緒,大腦一片空白,畫著不一定能過審的草稿時,請繼續(xù)閱讀下面的文章,希望大家能從作者的設(shè)計總結(jié)中有所啟發(fā)。

目錄:

  • 從業(yè)務(wù)目標(biāo)切入
  • 從用戶行為切入
  • 從設(shè)計方法上切入

什么是設(shè)計點(diǎn)?

設(shè)計點(diǎn)是設(shè)計師通過設(shè)計手段介入設(shè)計任務(wù)的一個節(jié)點(diǎn),比如:設(shè)計目標(biāo) 、設(shè)計風(fēng)格 、用戶行為 、用戶情緒 、信息表達(dá)等都是設(shè)計的切入點(diǎn),設(shè)計點(diǎn)能夠影響設(shè)計的風(fēng)格走向和設(shè)計師的創(chuàng)作思路。

那如何從眾多的設(shè)計點(diǎn)中找到一個清晰的設(shè)計主線呢?只需從3個方面切入。

一、從業(yè)務(wù)目標(biāo)來切入:曬講義案例

下圖是阿里巴巴UED 的設(shè)計理論,同程序員提倡的「不造重復(fù)的輪子」一樣,設(shè)計理論也沒有必要去反復(fù)總結(jié)類似的。目前阿里的這個設(shè)計理論,很好的支持了包含大型項(xiàng)目到中型項(xiàng)目的各個環(huán)節(jié),易于理解,且和我們的工作認(rèn)知貼近,是一個很好的入門方法。

我們通過定義業(yè)務(wù)目標(biāo)和聚焦設(shè)計目標(biāo),來最終實(shí)現(xiàn)設(shè)計的產(chǎn)出。

下圖是平臺營銷活動的設(shè)計5個要義,其核心也是業(yè)務(wù)目標(biāo)。

通過幾個的設(shè)計方法的展示,我們可以看出,處于上游業(yè)務(wù)目標(biāo)的重要性。

只有業(yè)務(wù)目標(biāo)和設(shè)計目標(biāo)一致的時候,我們的設(shè)計工作才有意義。當(dāng)我們評判我們的設(shè)計結(jié)果時,除了設(shè)計的數(shù)據(jù)指標(biāo)外,能快速判斷設(shè)計方案比迭代之前更優(yōu)的指標(biāo)就是是否符合業(yè)務(wù)目標(biāo),是否更貼近用戶的訴求。

1. 切入模型

根據(jù)工具模型我們從業(yè)務(wù)目標(biāo)出發(fā),去定義設(shè)計目標(biāo)從而得出設(shè)計方向。

2. 明確業(yè)務(wù)訴求

3. 得出業(yè)務(wù)目標(biāo)

用分享講義的策略給用戶帶來學(xué)習(xí)交流機(jī)會和學(xué)習(xí)成就感,達(dá)到拉新和活躍用戶目的。

4. 視覺推導(dǎo)

5. 案例

二、從用戶行為切入

視覺設(shè)計師,尤其是運(yùn)營設(shè)計師一定要具有交互思維,作為全鏈路設(shè)計目標(biāo)的我們,掌握交互思維,能更好的理解產(chǎn)品文檔和規(guī)避更多的設(shè)計錯誤,從而準(zhǔn)確引導(dǎo)用戶操作路徑。

方法:了解頁面中的功能交互流程,梳理用戶操作行為路徑,可以對行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù)。

切入模型:

三、從設(shè)計方法上切入

常見的方法有:情感化、原子化、組件化、游戲化等等。

方法:分解設(shè)計需求,歸納設(shè)計模塊,運(yùn)用已知的設(shè)計類型進(jìn)行視覺化設(shè)計。

1. 提取儀式感設(shè)計點(diǎn)-曬成績項(xiàng)目

儀式感的作用:通過用戶在體驗(yàn)過程中由產(chǎn)品功能實(shí)現(xiàn)—交互操作—體驗(yàn)心理變化建立,形成對價值觀的建立,是給用戶帶來更高層次的享受。

從四個層面理解儀式感:權(quán)威感、尊重存在感、期待感、榮譽(yù)感的意義。通過分解設(shè)計內(nèi)容來發(fā)現(xiàn)機(jī)會點(diǎn),插入儀式感設(shè)計方法。

視覺推導(dǎo):

案例:

2. 提取情感化設(shè)計點(diǎn)

情感化設(shè)計3要素:

案例:

3. 提取游戲化設(shè)計點(diǎn)

將游戲機(jī)制運(yùn)用于非游戲場景。比如:要想鼓勵用戶多參與交互,你可以在 APP 加入「挑戰(zhàn)」這類的游戲元素,用戶可以參與挑戰(zhàn),通過連續(xù)抽獎,并獲得相應(yīng)獎賞,從而達(dá)到預(yù)期目的。

案例:

尋找設(shè)計點(diǎn)就是拆解與分析的過程。

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)。

如何快速制作一款有個人風(fēng)格的字體?來看阿里設(shè)計師的方法!

資深UI設(shè)計者

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

專注于做好一件小事,哪怕是做不好也用心去做,小到搭建一個精美的網(wǎng)格系統(tǒng),做好一個字體的拐角……先看一下我的往期設(shè)計案例。

如何從無到有設(shè)計一款字體

對于很多剛接觸字體設(shè)計的同學(xué)經(jīng)常會遇到一種情況那就是想法高大上,結(jié)果很悲傷,為什么會造成這樣的結(jié)果?歸根結(jié)底是對字體設(shè)計本身了解還不夠細(xì)致就照葫蘆畫瓢直接上,為了避免這種尷尬的結(jié)果,我們應(yīng)該在開始著手做字體之前要做好各項(xiàng)準(zhǔn)備工作,不斷去瀏覽優(yōu)秀的字體設(shè)計從中尋找設(shè)計的感覺,確定感覺后建立網(wǎng)格系統(tǒng),開始逐步設(shè)計字體。我在做字體設(shè)計的時候會把握幾個步驟「建網(wǎng)格」——「選字體」——「拆字體」——「繪筆畫」——「綁骨架」——「粗與細(xì)」——「取與舍」——「磨細(xì)節(jié)」——「去感受」。

下面我們就以大家最常見的矩陣字體為例來給大家分享如何制作字體。

1. 建網(wǎng)格

建立網(wǎng)格系統(tǒng),萬丈高樓平地起,要做一款扎實(shí)的字體離不開網(wǎng)格系統(tǒng)的規(guī)范。

2. 拆字體

以「燃」為例——選取一個默認(rèn)字體,按照字體結(jié)構(gòu)對筆畫進(jìn)行拆分。

3. 繪筆畫

將拆分出的筆畫用橫線和豎線在網(wǎng)格系統(tǒng)里進(jìn)行筆畫重繪,此時不要做細(xì)節(jié),撇、捺和點(diǎn)根據(jù)自身走向和結(jié)構(gòu)特點(diǎn)也歸屬為橫豎線。

4. 綁骨架

拆分繪制的字體筆畫就是字體的骨骼,筆畫間的連接處可以理解成是人體的關(guān)節(jié),關(guān)節(jié)的意義在于保證字體穩(wěn)固的同時又靈活多變,字體的筆畫可以根據(jù)視覺需要圍繞關(guān)節(jié)在一定范圍內(nèi)做活動,也可調(diào)整長短比例。

5. 粗與細(xì)

筆畫的粗細(xì)與硬度由你想要的字體氣質(zhì)來決定,細(xì)筆畫與曲筆畫柔美氣質(zhì),粗筆畫與直筆畫沉穩(wěn)大氣,雖說設(shè)計是一種感覺,但是這種感覺對于初學(xué)者來說很難把控,所以跟大家共享一下常用的幾種筆畫的粗細(xì),在1000PX*1000PX畫板里采用6px,10px和20px為基礎(chǔ)筆畫粗細(xì),根據(jù)想要的業(yè)務(wù)氣質(zhì)選取即可。

6. 解與構(gòu)

常見的字體結(jié)構(gòu)有「上下結(jié)構(gòu)」「上中下結(jié)構(gòu)」「左右結(jié)構(gòu)」「左中右結(jié)構(gòu)」「半包圍結(jié)構(gòu)」和「全包圍結(jié)構(gòu)」。其中「上下結(jié)構(gòu)」中著重強(qiáng)調(diào)占比較小的那部分筆畫,進(jìn)而達(dá)到字體本身的平衡,例如「感」字著重設(shè)計心字;「上中下結(jié)構(gòu)」中一般會在不影響識別性的前提下去掉中間部分橫行筆畫,進(jìn)而達(dá)到字體本身的平衡,例如「享」字著重設(shè)計口字;左中右結(jié)構(gòu)中在不影響識別性的前提下會簡化左邊部分筆畫,進(jìn)而達(dá)到字體本身的平衡,例如「燃」字著重設(shè)計火字。

7. 取與舍

筆畫變粗后整個字體筆畫間的空間比例會受到一定影響,因此為了字體的美觀度和透氣性我們會對字體結(jié)構(gòu)進(jìn)行一些取舍和整合。

8. 磨細(xì)節(jié)

為了讓字體看起來更加舒適,我們將字體的拐角做圓,做圓角的同時也要根據(jù)網(wǎng)格系統(tǒng)來調(diào)整圓的度數(shù)。

9. 去感受

打磨整體字體,繼續(xù)刻畫細(xì)節(jié)。

注意:在一組字里,每個單字的結(jié)構(gòu)都存在差異,適當(dāng)調(diào)整字體內(nèi)部的比例,形成感官上舒適的筆勢,對保持視覺上大小一致很重要。漢字字體類型繁多,但是如果我們用幾何法則來劃分字體類型其實(shí)大致可以歸納為三種:方形,圓形和三角形,從面積上來看方形和圓形的面積最大,三角形次之,所以我們?yōu)榱吮3肿种卮笮〉囊恢滦孕枰{(diào)整他們之間的大小比例,做到大小均勻,筆畫一致,結(jié)構(gòu)嚴(yán)謹(jǐn)和間隙適中。

△ 圖源:ElethomHunter

為了拉出字體的氣質(zhì),一般會把字體做的稍微偏瘦長一些。

字體設(shè)計的手段是多種多樣的,每個設(shè)計師都有自己擅長的切入點(diǎn),最后的結(jié)果是自己想要的就好。上述的分享希望能給字體設(shè)計初學(xué)者一點(diǎn)幫助,也歡迎各位同行大神交流切磋。

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計  圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

微信小程序?qū)崿F(xiàn)倒計時,蘋果手機(jī)不顯示

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

JS頁面代碼段:


    
  1. const app = getApp()
  2. let goodsList = [
  3. { actEndTime: '2018-07-21 21:00:34' },
  4. { actEndTime: '2028-07-17 21:00:37' },
  5. { actEndTime: '2018-09-21 05:00:59' },
  6. { actEndTime: '2018-08-19 07:00:48' },
  7. { actEndTime: '2018-08-28 03:00:11' }
  8. ]
  9. Page({
  10. data: {
  11. countDownList: [],
  12. actEndTimeList: []
  13. },
  14. onLoad: function () {
  15. let endTimeList = [];
  16. // 將活動的結(jié)束時間參數(shù)提成一個單獨(dú)的數(shù)組,方便操作
  17. goodsList.forEach(o => { endTimeList.push(o.actEndTime) })
  18. this.setData({ actEndTimeList: endTimeList });
  19. // 執(zhí)行倒計時函數(shù)
  20. this.countDown();
  21. },
  22. //當(dāng)時間小于兩位數(shù)時十位數(shù)補(bǔ)零。
  23. timeFormat: function (param) {//小于10的格式化函數(shù)
  24. return param < 10 ? '0' + param : param;
  25. },
  26. //倒計時函數(shù)
  27. countDown: function () {
  28. // 獲取當(dāng)前時間,同時得到活動結(jié)束時間數(shù)組
  29. let newTime = new Date().getTime();//當(dāng)前時間
  30. let endTimeList = this.data.actEndTimeList;//結(jié)束時間的數(shù)組集合
  31. let countDownArr = [];//初始化倒計時數(shù)組
  32. // 對結(jié)束時間進(jìn)行處理渲染到頁面
  33. endTimeList.forEach(o => {
  34. let endTime = new Date(o).getTime();
  35. let obj = null;
  36. // 如果活動未結(jié)束,對時間進(jìn)行處理
  37. if (endTime - newTime > 0) {
  38. let time = (endTime - newTime) / 1000;
  39. // 獲取天、時、分、秒
  40. let day = parseInt(time / (60 * 60 * 24));
  41. let hou = parseInt(time % (60 * 60 * 24) / 3600);
  42. let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
  43. let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
  44. obj = {
  45. day: this.timeFormat(day),
  46. hou: this.timeFormat(hou),
  47. min: this.timeFormat(min),
  48. sec: this.timeFormat(sec)
  49. }
  50. } else {//活動已結(jié)束,全部設(shè)置為'00'
  51. obj = {
  52. day: '00',
  53. hou: '00',
  54. min: '00',
  55. sec: '00'
  56. }
  57. }
  58. countDownArr.push(obj);
  59. })
  60. //每隔一秒執(zhí)行一次倒計時函數(shù), 渲染
  61. this.setData({ countDownList: countDownArr })
  62. setTimeout(this.countDown, 1000);
  63. }
  64. })

wxml頁面代碼段


    
  1. <view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">
  2. 距結(jié)束
  3. <text class='tui-conutdown-box'>{{item.day}}</text>天
  4. <text class='tui-conutdown-box'>{{item.hou}}</text>時
  5. <text class='tui-conutdown-box'>{{item.min}}</text>分
  6. <text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒
  7. </view>

 

wxss頁面代碼段


    
  1. page{
  2. background: #f5f5f5;
  3. }
  4. .tui-countdown-content{
  5. height: 50px;
  6. line-height: 50px;
  7. text-align: center;
  8. background-color: #fff;
  9. margin-top: 15px;
  10. padding: 0 15px;
  11. font-size: 18px;
  12. }
  13. .tui-conutdown-box{
  14. display: inline-block;
  15. height: 26px;
  16. width: 26px;
  17. line-height: 26px;
  18. text-align: center;
  19. background:#ccc;
  20. color: #000;
  21. margin: 0 5px;
  22. }
  23. .tui-countdown-bg{
  24. background: red;
  25. color: #fff;
  26. }
  27. .container{
  28. width: 100%;
  29. display: flex;
  30. justify-content: center;
  31. }
  32. .backView{
  33. width:690rpx;
  34. background: #fff;
  35. display: flex;
  36. flex-direction: column;
  37. margin-bottom: 30rpx;
  38. }
  39. .createDate
  40. {
  41. background: #f5f5f5;
  42. padding:15rpx 15rpx 10rpx 15rpx;
  43. line-height: 50rpx;
  44. font-size: 28rpx;
  45. color: gainsboro;
  46. text-align: center;
  47. }
  48. .backViewitem1{
  49. display: flex;
  50. flex-direction: row;
  51. height: 55rpx;
  52. align-items: center;
  53. padding:8rpx 40rpx;
  54. border-bottom: 2rpx solid #f5f5f5;
  55. }
  56. .ico
  57. {
  58. width:35rpx;
  59. height:35rpx;
  60. }
  61. .name
  62. {
  63. color: #c13176;
  64. margin-left: 20rpx;
  65. font-size: 28rpx;
  66. }
  67. .details
  68. {
  69. font-size:24rpx;
  70. letter-spacing: 2rpx;
  71. }
  72. .backViewitem2{
  73. display: flex;
  74. flex-direction: row;
  75. line-height: 35rpx;
  76. min-height: 70rpx;
  77. padding: 15rpx 40rpx 10rpx 40rpx;
  78. border-bottom: 2rpx solid #f5f5f5;
  79. }
  80. .details1
  81. {
  82. color:#888;
  83. font-size:23rpx;
  84. letter-spacing: 2rpx;
  85. }

 藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

從前端和后端兩個角度分析jsonp跨域訪問(完整實(shí)例)

seo達(dá)人

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

一、什么是跨域訪問

舉個栗子:在A網(wǎng)站中,我們希望使用Ajax來獲得B網(wǎng)站中的特定內(nèi)容。如果A網(wǎng)站與B網(wǎng)站不在同一個域中,那么就出現(xiàn)了跨域訪問問題。你可以理解為兩個域名之間不能跨過域名來發(fā)送請求或者請求數(shù)據(jù),否則就是不安全的??缬蛟L問違反了同源策略,同源策略的詳細(xì)信息可以點(diǎn)擊如下鏈接:Same-origin_policy; 
總而言之,同源策略規(guī)定,瀏覽器的ajax只能訪問跟它的HTML頁面同源(相同域名或IP)的資源。

二、什么是JSONP

JSONP(JSON with Padding)是JSON的一種“使用模式”,可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。

由于同源策略,一般來說位于 server1.example.com 的網(wǎng)頁無法與不是 server1.example.com的服務(wù)器溝通,而 HTML 的<script> 元素是一個例外。利用<script>元素的這個開放策略,網(wǎng)頁可以得到從其他來源動態(tài)產(chǎn)生的 JSON 資料,而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON,而是任意的JavaScript,用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解,小伙伴可以自行去百度。

三、JSONP的使用

前端的使用示例

JQuery Ajax對JSONP進(jìn)行了很好的封裝,我們使用起來很方便。前端示例:

 $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接 dataType:"jsonp", //數(shù)據(jù)格式設(shè)置為jsonp jsonp:"callback", //Jquery生成驗(yàn)證參數(shù)的名稱 success:function(data){ //成功的回調(diào)函數(shù) alert(data);
            },
            error: function (e) { alert("error");
            }
        }); 
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

需要注意的地方是:

  • dataType,該參數(shù)必須要設(shè)置成jsonp
  • jsonp,該參數(shù)的值需要與服務(wù)器端約定,詳細(xì)情況下面介紹。(約定俗成的默認(rèn)值為callback)

后端的配合示例

JQuery Ajax Jsonp原理

后端要配合使用jsonp,那么首先得了解Jquery Ajax jsonp的一個特點(diǎn): 
Jquery在發(fā)送一個Ajax jsonp請求時,會在訪問鏈接的后面自動加上一個驗(yàn)證參數(shù),這個參數(shù)是Jquery隨機(jī)生成的,例如鏈接 
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 
中,參數(shù)callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自動添加的。 
添加這個參數(shù)的目的是唯一標(biāo)識這次請求。當(dāng)服務(wù)器端接收到該請求時,需要將該參數(shù)的值與實(shí)際要返回的json值進(jìn)行構(gòu)造(如何構(gòu)造下面講解),并且返回,而前端會驗(yàn)證這個參數(shù),如果是它之前發(fā)出的參數(shù),那么就會接收并解析數(shù)據(jù),如果不是這個參數(shù),那么就拒絕接受。 
需要特別注意的是這個驗(yàn)證參數(shù)的名字(我在這個坑上浪費(fèi)了2小時),這個名字來源于前端的jsonp參數(shù)的值。如果把前端jsonp參數(shù)的值改為“aaa”,那么相應(yīng)的參數(shù)就應(yīng)該是 
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

后端接收與處理

知道了Jquery Ajax Jsonp的原理,也知道了需要接受的參數(shù),我們就可以來編寫服務(wù)器端程序了。 
為了配合json,服務(wù)器端需要做的事情可以概括為兩步:

第一步、接收驗(yàn)證參數(shù)

根據(jù)與前端Ajax約定的jsonp參數(shù)名來接收驗(yàn)證參數(shù),示例如下(使用SpringMVC,其他語言及框架原理類似)

 @ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){
    
  • 1
  • 2
  • 3
第二步、構(gòu)造參數(shù)并返回

將接收的的驗(yàn)證參數(shù)callback與實(shí)際要返回的json數(shù)據(jù)按“callback(json)”的方式構(gòu)造:

 @ResponseBody
    @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson(); //google的一個json工具庫 Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //構(gòu)造返回值 }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

四、總結(jié)

最終,前后端的相應(yīng)代碼應(yīng)該是這樣的: 
前端

 $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //訪問的鏈接 dataType:"jsonp", //數(shù)據(jù)格式設(shè)置為jsonp jsonp:"callback", //Jquery生成驗(yàn)證參數(shù)的名稱 success:function(data){ //成功的回調(diào)函數(shù) alert(data);
            },
            error: function (e) { alert("error");
            }
        });
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

后端

 @ResponseBody
    @RequestMapping("/getMySeat") public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson(); Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12");
        logger.info(callback); return callback+"("+gson.toJson(map)+")";
    }
    
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

需要注意的是:

  • 前端注意與后端溝通約定jsonp的值,通常默認(rèn)都是用callback。
  • 后端根據(jù)jsonp參數(shù)名獲取到參數(shù)后要與本來要返回的json數(shù)據(jù)按“callback(json)”的方式構(gòu)造。
  • 如果要測試的話記得在跨域環(huán)境(兩臺機(jī)器)下進(jìn)行。

完整的示例就是上面兩段代碼,這里就不提供Github連接了。上面的示例親測有效,如果有遇到問題的,歡迎留言提問。

藍(lán)藍(lán)設(shè)計www.bouu.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

經(jīng)驗(yàn)分享 | 如何讓設(shè)計團(tuán)隊(duì)的工作效率提升50%? 原創(chuàng): 熊貓小生 熊貓設(shè)計院

博博

經(jīng)驗(yàn)分享 | 如何讓設(shè)計團(tuán)隊(duì)的工作效率提升50%?

對于大部分的射擊濕以及設(shè)計團(tuán)隊(duì)來講,都會遇到如何提升設(shè)計效率的問題;尤其是在創(chuàng)業(yè)公司,最浪費(fèi)時間的莫過于:永遠(yuǎn)擼不完的圖及與開發(fā)中的設(shè)計反復(fù);接下來我將通過自身的一些設(shè)計管理經(jīng)驗(yàn),從工具使用提升工作效率的角度,跟大家分享下我解決這兩個問題的方法。

擼不完的圖-處理各方設(shè)計需求

一、為什么有擼不完的圖?

1、設(shè)計的需求方在不斷增多:產(chǎn)品、運(yùn)營、市場、地推、策劃等等;

對于大部分的射擊濕來說,設(shè)計的需求都是越來越多的;尤其是中小型公司由于發(fā)展的的需要,公司的人員及部門會越來越多;也就導(dǎo)致后期的設(shè)計需求慢慢增加;我們公司就是醬紫的,原來只要考慮產(chǎn)品需求的,現(xiàn)在要考慮運(yùn)營日常海報、活動設(shè)計、市場推廣素材、線下門店品牌視覺系統(tǒng)、還有老板的PPT等等。

2、需求不清導(dǎo)致變動頻繁:沒有目的下需求,缺少需求細(xì)節(jié);

在日常的工作中,最麻煩的就是跟需求方確認(rèn)需求;尤其是口述的需求,沒有文案、時間節(jié)點(diǎn)及具體的需求描述;比如,我要“五彩斑斕的黑”或者“字要大”這種奇葩需求想一出就是一出的隨性需求。

3、對接、確認(rèn)流程不清晰:沒有一套完整有效的對接流程,導(dǎo)致雙方扯皮;

二、產(chǎn)生的問題?

1、設(shè)計效率及產(chǎn)出質(zhì)量不高:需求方不滿意,然后設(shè)計反復(fù)浪費(fèi)時間;

2、項(xiàng)目推進(jìn)速度變緩:有限的時間達(dá)不到設(shè)計要求拖慢項(xiàng)目進(jìn)度,影響業(yè)務(wù)目標(biāo);

三、怎么解決?

1、建立和規(guī)范有效的需求對接確認(rèn)流程:從制度層面解決跨部門協(xié)調(diào)問題;

首先,對內(nèi)規(guī)范接收和分發(fā)需求的流程;將原來粗放的接收方式改為協(xié)作工具接收分發(fā)需求;其次,對外規(guī)范需求下方的格式規(guī)范。

2、使用“團(tuán)隊(duì)協(xié)作工具”統(tǒng)一輸入/輸出需求:運(yùn)用工具解決需求接收下放問題;

3、規(guī)范需求方下需求的格式:需求包含的各項(xiàng)要點(diǎn):

  • 時間節(jié)點(diǎn):最好提前幾天;

  • 需求描述:需要什么樣的;

  • 文案描述:傳達(dá)什么內(nèi)容。




開發(fā)中的設(shè)計反復(fù)

一、為什么會出現(xiàn)反復(fù)?

1、工具不統(tǒng)一,協(xié)作較難:PS與Sketch混用;

我剛進(jìn)公司的時候,設(shè)計團(tuán)隊(duì)的三個人用的設(shè)計工具和設(shè)備都不一樣;有的用PS,有的用Sketch,這就造成設(shè)計協(xié)作難而且設(shè)計稿輸出格式不同意,開發(fā)抱怨的情況,工作推進(jìn)艱難。

2、標(biāo)注切圖耗時太長:頁面中的各個元素都要進(jìn)行大小、顏色、間距及格式的標(biāo)注;

設(shè)計給開發(fā)的輸出物有三種:視覺稿、標(biāo)注及安卓、IOS不同尺寸的切圖;以上是保證上線效果的關(guān)鍵;但是傳統(tǒng)的手動標(biāo)注和切圖是很浪費(fèi)時間的。

3、IOS、安卓設(shè)計規(guī)范差異:兩個平臺系統(tǒng)差異,有時候要輸出兩套設(shè)計素材;

二、怎么解決?

1、統(tǒng)一設(shè)計工具:移動端的設(shè)計統(tǒng)一Sketch輸出;

2、利用第三方工具Zeplin自動標(biāo)注設(shè)計稿:工具代替原來的手動標(biāo)注;

3、工具zeplin工具的優(yōu)勢:

  • 自動匹配IOS及安卓平臺設(shè)計單位、顏色及字體大小等;

  • 設(shè)計一套搞定,減少設(shè)計師工作量;

  • 設(shè)計溝通的效率和質(zhì)量大大提升;



總結(jié)

以上就是我在做設(shè)計管理過程中摸索的一些的經(jīng)驗(yàn),無論是跟需求方的設(shè)計溝通還是和開發(fā)的協(xié)同配合,都非常的和諧;希望通過此次分享能給遇到相同困惑的小伙伴們一些啟發(fā)~



交互設(shè)計篇-如何處理需求 夜月薰衣茶 PMIP

博博

交互設(shè)計篇-如何處理需求

夜月薰衣茶 PMIP

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

如何處理需求,是產(chǎn)品經(jīng)理的基本功,不管是來自老板還是客戶的,亦或來自企業(yè)內(nèi)部(運(yùn)營、業(yè)務(wù))及產(chǎn)品本身的發(fā)展,產(chǎn)品經(jīng)理都需要把需求的收集、分析、管理做到有效進(jìn)行。


一、需求收集

用戶調(diào)研

運(yùn)用場景:

產(chǎn)品規(guī)劃初期或者遇到重大版本迭代,需要重新架構(gòu)設(shè)計時,將會進(jìn)行用戶問卷、用戶訪談的方式去挖掘用戶的真實(shí)需求。

  基本方法:

用戶問卷-定量研究的方法,問卷問題一般為15個左右,包含用戶基礎(chǔ)資料信息(包括年齡、收入、教育水平等人口統(tǒng)計學(xué)范疇信息)和主觀性的信息(包括用戶做這項(xiàng)活動的態(tài)度、行為、目的等方面的信息)兩大部分,收集到這些數(shù)據(jù)后進(jìn)行分析并得出一定結(jié)論。

用戶訪談-定性研究方法,訪談問題分類包括開放性的問題專業(yè)性的問題。問題盡量從簡單到復(fù)雜,由較寬泛趨于精細(xì);訪談的過程中的問題盡量說的簡單易懂,避免專業(yè)詞匯,讓回答問題的用戶清楚明白你說什么;避免問一些引導(dǎo)性的問題;不要因?yàn)槔鋱龆鴮擂芜^多,多次重復(fù)進(jìn)行講解,留有一定的時間讓用戶思考如何回答;盡量問用戶一些開放性的問題讓用戶進(jìn)行思考回答;用戶描述的過程中盡量描述真實(shí)使用場景與案例。

兩種方法基本為相互補(bǔ)充進(jìn)行的一個方法,對于不熟悉的業(yè)務(wù),問卷編寫初期不知該如何進(jìn)行挖掘用戶的問題,尋找五個左右的用戶進(jìn)行相關(guān)業(yè)務(wù)及主要業(yè)務(wù)用戶使用場景訪談,將會總結(jié)出一些問題然后加入你要調(diào)研清楚的問題包括客觀問題主觀問題進(jìn)行用戶問卷編寫、發(fā)放與收集。


用戶反饋

  運(yùn)用場景:

產(chǎn)品專家用戶的反饋,包括運(yùn)營、客服直接獲取用戶的反饋,通過從微博、論壇、貼吧、軟件用戶評論等方面尋找用戶的反饋。

  基本方法:

市場反饋  做運(yùn)營、客服、市場等人員和用戶進(jìn)行產(chǎn)品銷售推廣、運(yùn)營活動的過程中和用戶直接交流,一些專家用戶直接反饋出來的需求。具體也要根據(jù)產(chǎn)品是直接面向c端客戶還是企業(yè)級別的客戶,兩者有很大差異。

訪談  在和用戶進(jìn)行訪談的過程中,一些專家級別的用戶直接反饋對現(xiàn)有產(chǎn)品在使用過程中的一些不滿和改進(jìn)的建議等。

查詢相關(guān)網(wǎng)站 比如產(chǎn)品下載市場、百度貼吧、微博、論壇、微信群、QQ群等各種用戶有自由發(fā)表言論及感受的地方,用戶的直接反饋。

用戶直接反饋的信息,需要進(jìn)行分析其需求的真?zhèn)涡浴?/span>


產(chǎn)品定位發(fā)展

  運(yùn)用場景:

產(chǎn)品最終要幫用戶解決一個什么樣的問題,市場發(fā)展環(huán)境和公司可支配資源等方面進(jìn)行綜合評估產(chǎn)品的前期、中期、后期的目標(biāo)定位。

 基本方法:

相關(guān)行業(yè)專家詢問  在發(fā)覺一個新產(chǎn)品及市場時,不明確當(dāng)前市場狀況可直接找行業(yè)內(nèi)的一些專家進(jìn)行聊天交談,他們對于市場的現(xiàn)狀很熟悉,可向該類專家詢問產(chǎn)品的定位與發(fā)展方向問題。

投資行業(yè)的專家交流 最了解市場、發(fā)覺市場前景行業(yè)及創(chuàng)業(yè)想法的投資者,他們對于市場發(fā)展的方向及敏感度有一定的專業(yè)看法,可與其交流產(chǎn)品的發(fā)展方向性的問題。


相關(guān)行業(yè)專家、投資專家給予的建議和方向最終還需要結(jié)合本身公司的定位發(fā)展與界定產(chǎn)品的發(fā)展定位。


商業(yè)畫布  一種能夠幫助處于高層決定者激發(fā)創(chuàng)意、降低猜測、明確目標(biāo)用戶、合理解決其問題的工具,可直接判斷出公司產(chǎn)品發(fā)展的的優(yōu)勢、資源等最直接有效的方法。

以下為商業(yè)畫布九宮格主要內(nèi)容:


數(shù)據(jù)分析

  運(yùn)用場景:

產(chǎn)品或運(yùn)營人員對用戶操作規(guī)律,用戶流失查詢等方面進(jìn)行查看分析,決定產(chǎn)品功能優(yōu)化迭代最有效直接的證明。

  基本方法:

數(shù)據(jù)埋點(diǎn)  第三方數(shù)據(jù)服務(wù)平臺或者用自己平臺后臺注入相關(guān)代碼進(jìn)行統(tǒng)計。程序員在程序編寫時將主要操作、按鈕進(jìn)行數(shù)據(jù)埋點(diǎn),通過網(wǎng)站即可查詢相關(guān)數(shù)據(jù)。

第三方數(shù)據(jù)平臺 專業(yè)做數(shù)據(jù)的網(wǎng)站會定期進(jìn)行相關(guān)行業(yè)數(shù)據(jù)的發(fā)布,查看專業(yè)的報告即可獲取一些相關(guān)數(shù)據(jù)。


結(jié)論

針對收集的需求,大致可分為以下幾類:

產(chǎn)品運(yùn)營類—某項(xiàng)調(diào)研結(jié)果直接反應(yīng)出一種現(xiàn)象,將會指導(dǎo)產(chǎn)品運(yùn)營人員的運(yùn)營方向朝著這方面努力。比如一款產(chǎn)品預(yù)約功能,從團(tuán)隊(duì)做用戶問卷的結(jié)果反饋中,用戶更偏向于用微信公眾號進(jìn)行預(yù)約,運(yùn)營團(tuán)隊(duì)需要相對在微信公眾號預(yù)約增加相對的運(yùn)營的投入。

功能優(yōu)化類—用戶使用某款產(chǎn)品的某個功能目的就是為了達(dá)到其某個目的,對于功能效率或用戶體驗(yàn)上滿足,將會直接影響用戶的去留,優(yōu)化該功能的用戶體驗(yàn)滿意度及效率將會提升用戶的留存量。

新功能—產(chǎn)品功能的延伸或新增,通過用戶研究,發(fā)現(xiàn)用戶針對某個需求的實(shí)現(xiàn)很迫切,該需求就算新功能,可評估該功能緊急程度及效果進(jìn)行功能設(shè)計滿足。


二、需求分析

 

重要度、頻率二維度

 運(yùn)用場景:

當(dāng)接到多個需求,因?yàn)闀r間原因,只能進(jìn)行個別需求滿足,評估優(yōu)先級時,可用該方法進(jìn)行簡單需求評估分析。

 基本方法:

將功能需求按照重要度和頻率進(jìn)行四象限劃分,重要高頻象限中的需求要首先進(jìn)行解決。重要度和頻率如何進(jìn)行衡量,頻率衡量即使用的頻次,重要度衡量判別是否會因?yàn)樵撔枨蟮娜鄙俣绊懹脩羰褂谩?


KANO模型分析

  運(yùn)用場景:

產(chǎn)品重大版本迭代,因?yàn)闀r間等問題,只能選擇個別兩三個功能進(jìn)行優(yōu)化,但是優(yōu)化的需求點(diǎn)比較多,可以直接向用戶進(jìn)行問題編輯,查看用戶滿意度選擇進(jìn)行優(yōu)化。

  基本方法:

(1)從顧客角度認(rèn)識產(chǎn)品或服務(wù)需要;

(2)設(shè)計問卷調(diào)查表;

(3)實(shí)施有效的問卷調(diào)查;

(4)將調(diào)查結(jié)果分類匯總,建立質(zhì)量原型;

(5)分析質(zhì)量原型,識別具體測量指標(biāo)的敏感性

二維屬性歸屬分類


場景化思維

  運(yùn)用場景:

通過模擬或發(fā)現(xiàn)真實(shí)場景,預(yù)測用戶行為從而進(jìn)行設(shè)計。

  基本方法:

從交互五要素考慮,人、目的、行為、環(huán)境、媒介幾個關(guān)鍵點(diǎn)去創(chuàng)造用戶真實(shí)的使用場景。在什么地方,哪個人做了什么事,運(yùn)用了哪些東西,達(dá)到了什么樣的目的,遇到了什么樣的問題,怎么進(jìn)行處理解決。例:在淘票票購買電影票后,付款時推薦購買零食信息。

用戶體驗(yàn)地圖

 運(yùn)用場景:

適用于任何場景,更適合在可能存在問題或者改進(jìn)機(jī)會的事件上。

  基本方法:


  • 歸納用戶該使用場景下的觸點(diǎn)

  • 畫出情感坐標(biāo)

  • 尋找用戶進(jìn)行觸點(diǎn)體驗(yàn)情感、意見描述

  • 歸納用戶體驗(yàn)意見

  • 繪制情感曲線

  • 標(biāo)注用戶重要性意見


需求分析的方法很多種,以上僅列出部分,方法只是分析的一種工具,最主要還是通過方法分析需求得出的解決方案。


三、需求管理

  

需求提交

簡單來說,就是將收集到的需求,在評估完優(yōu)先級,確認(rèn)做具體需求功能時將該需求開發(fā)計劃告知相關(guān)開發(fā)、測試等人員,讓其明確即將完成的功能需求。如功能需求相對應(yīng)的方案設(shè)計、業(yè)務(wù)流程等內(nèi)容提前與開發(fā)總監(jiān)溝通好上傳至公司統(tǒng)一管理文件處,具體根據(jù)不同公司的實(shí)際情況。


需求評估

需求功能的相關(guān)開發(fā)者、測試針對該需求達(dá)成統(tǒng)一認(rèn)知和開發(fā)周期認(rèn)定,使得相關(guān)開發(fā)人員在開發(fā)周期內(nèi)有效配合開發(fā),測試人員明確該如何進(jìn)行有效測試,針對同一需求能夠有效推進(jìn)實(shí)現(xiàn)。


需求跟蹤

 在開發(fā)過程能夠及時跟進(jìn)開發(fā),一確保其開發(fā)功能達(dá)到預(yù)期效果,二有任何異常情況的發(fā)生能及時進(jìn)行處理解決,三有效把控需求的開發(fā)周期,保證需求按期交付。


需求變更

當(dāng)需求提出方提出需求變更或者在內(nèi)部評審、開發(fā)過程導(dǎo)致需求變更,做好相關(guān)需求變更的把控,以防需求變更后導(dǎo)致項(xiàng)目無法執(zhí)行。

      a.評估需求變更與原需求的差異

首先,明確需求變更的原因—是需求提出方進(jìn)行需求變更還是內(nèi)部原因?qū)е滦枨笞兏?。其次,需求變更后與原先需求定義是否有較大沖突,如有較大沖突,評估變更前后的利害關(guān)系,哪個更能有效達(dá)目的/效果,按評估結(jié)果執(zhí)行;如無較大沖突,評估與原需求的緊急程度及時間安排,進(jìn)行需求變更解決。最終,有效記錄需求變更計劃及原因,定期進(jìn)行總結(jié),評估相關(guān)解決方案。

       b.評估需求變更導(dǎo)致的結(jié)果

如需求變更后,利大于弊,允許變更,但需按照需求變更的規(guī)程執(zhí)行,以防出現(xiàn)意外情況產(chǎn)生不必要的責(zé)任,失去相關(guān)控制。如需求變更后,利小于弊,拒絕變更.




優(yōu)作|南非開普敦MUTI工作室設(shè)計賞析

博博

優(yōu)作|南非開普敦MUTI工作室設(shè)計賞析 

 BIGD

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

MUTI是一家位于南非開普敦的創(chuàng)意工作室,他們的業(yè)務(wù)范圍非常廣,為許多品牌企業(yè)都提供過服務(wù),運(yùn)動品牌如耐克,服裝品牌如優(yōu)衣庫,手機(jī)品牌如三星,雜志如Monocle 雜志、西捷航空雜志等等都有過他們的影子,同時他們的設(shè)計能力綜合,從插畫到字體設(shè)計再到Icon圖標(biāo)設(shè)計都十分強(qiáng)大。


WestJet Magazine

The Hound and The Hare

Brown Coffee & Bakery

World Wildlife Magazine

John Hopkins Magazine

Knight Time

Forbes Japan

Georges Magazine

WestJet Magazine

Lonely Planet Magazine

Flying High

Lonely Planet Magazine



《延禧攻略》輸了!這部劇的畫面更高級?

博博

《延禧攻略》輸了!這部劇的畫面更高級?

BIGD

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

一定會成為優(yōu)秀設(shè)計師的朋友們!

最近劇真的太多了,

小編還沒從衛(wèi)龍女孩的隊(duì)伍里脫離出來,

如懿傳就已經(jīng)安排上了。

而且小編最近又發(fā)現(xiàn)一部新??!

《天盛長歌》

對比《如懿傳》大紅大綠的配色

(雖然浮夸的色彩更符合乾隆時期的蜜汁審美)

它的配色和畫風(fēng)簡直良心的不要!

而且官宣也很佛系,

總之就是沒見著過啥大動靜,

可是豆瓣評分居然比《延禧攻略》還要高



雖然憑借“IP+超級卡司+大制作”

獲得了較高的評分,

《天盛長歌》自播出后就反響平平,

收視一度撲街,

雖然小編還沒看劇不知道它撲街的原因,

但單單從劇照和海報就能看出

劇組是真的下功夫了??!

服裝精致,布景豪華,

還專門使用了電影的寬畫幅比

場面變得更加宏大更有代入感!



官方發(fā)布的色卡看起來也很高級










海報也值得一看~


 主題海報 


- 壁影成雙版海報 -


這世間自有百態(tài)浮生,千種際遇,萬般遼闊山河。

看似光影闌珊,皆在你我眸間。




 微雨細(xì)語版海報 

感謝這亭外風(fēng)雨漫天,你我才能在這亭中獨(dú)處片刻。





 咫尺千山版海報 


此愛隔山海,山可平,??稍?;

此義重天地,天有道,地有情。

家國在心,蒼生在肩,不敢忘,莫能負(fù)。




 眸繪天光版海報 


天高地闊,可納日月山河于懷,可藏情深意篤于心。

此念,不滅。



丹心一片,不曾忘情忘恩忘前塵,惟愿守己守家守蒼生。

此意,可鑒。



風(fēng)霜不顧,只求守得云開;此身不吝,但求所愿得償。

此途,不忘。



趁年華歲月,追隨不棄;經(jīng)世事不易,伴君功成。

此生,不枉。



愿安一隅,享人世繁華;縱有風(fēng)雨,念郎君順?biāo)臁?/span>

此求,可得。




扎心劇照海報 


在光影間蓬勃而生,于明暗外纖毫畢現(xiàn)。

君有箴言相贈,吾自銘感于心。




 開播倒計時海報 


圓融不爭,鋒霜無畏。一方明鏡如水,此情,不負(fù)。

距離相遇,還有3天


善惡得報,世存公道。一盞心燈如舊,此志,不改。

距離相識,還有2天。


六合既定,共享安寧。一卷長書如悟,此意,不移。

距離相知,還有1天。


熱點(diǎn)節(jié)點(diǎn)借勢海報 

- 七夕 | 天盛七夕節(jié) -



看完這些海報和劇照之后,

你們有沒有被吸引到呢?

留言告訴小編吧~




PS高手都想知道的10個PS心得

博博

PS高手都想知道的10個PS心得

平面設(shè)計ps教程cdr和ai教程

如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

當(dāng)我們看的PS教程越來越多、掌握的PS技巧越來越多的時候,可能就反思最初看到的教程到底是不是正確的。而今天國外精品翻譯教程就跟大家一起來看看Photoshop高手分享的10個Photoshop心得,妥妥的干貨!


圖00

1.在背景圖層上直接編輯

由于PS初學(xué)者總會犯些小錯誤,所以大多數(shù)的Photoshop教程都會要求創(chuàng)建副本,然后在副本上進(jìn)行操作,即使出錯都可以迅速回到原點(diǎn),再次進(jìn)行操作。不過,如果你已經(jīng)意識到自己的每一步操作都能令作品更加完美,那就沒有需要再回到原點(diǎn)了。

選擇“圖層>新圖層>復(fù)制創(chuàng)建新圖層”,或者使用快捷鍵Ctrl+J,就可以很簡單地創(chuàng)建副本。但是過多的圖層會讓圖層管理變得困難,特別是要從眾多圖層中找出目標(biāo)對象的時候,很費(fèi)時間。因此,如果有人說創(chuàng)建副本或者弄多幾個圖層時,其實(shí)你需要想想再進(jìn)行操作。

如果只是對單一背景圖層進(jìn)行操作,就可以完全不管圖層面板,以及擔(dān)心創(chuàng)建副本影響PS運(yùn)行速度的事情。當(dāng)然,這聽起來很簡單,但要改變長期形成的操作習(xí)慣以及知道什么時候需要創(chuàng)建副本卻不是那么容易的。所以操作前,先想想接下來的動作,盡量避免無用功。


圖01

2.用好橡皮擦工具

橡皮擦與圖層蒙版的功能比較類似,通過“擦掉”和“遮蔽”,就能將不想要的像素不顯示出來。而圖層蒙版的優(yōu)點(diǎn)在于通過改變蒙版顏色的不透明度,達(dá)到不同程度的遮蔽效果。所以在大多數(shù)情況下都比較建議選用圖層蒙版,因?yàn)槊砂嫦碌膱D像仍在,只是被“遮蔽”,只要改變黑色的深淺就將圖像顯示出來。


圖02

圖層蒙版的廣泛應(yīng)用例子很多。比如,在使用新增調(diào)整圖層時,也會發(fā)現(xiàn)選擇“圖層>新增調(diào)整圖層>”,然后隨意選擇其中一種調(diào)整圖層,都會附加一個圖層蒙版。


圖03

但是,對于橡皮擦來說,它的功能更加直接。想象一下,當(dāng)你拿著一支筆和一張紙,如果想去掉某些圖案,最直接的想法就是擦掉,而擦掉的后果就是原來的圖案將永不存在。而在Photoshop中,橡皮擦事實(shí)上就延續(xù)著我們在實(shí)際畫畫過程中的習(xí)慣。

從上面的比較中可以看出,橡皮擦和圖層蒙版最大的不同點(diǎn)在于橡皮擦是真實(shí)地去掉圖像,而蒙版只是遮蔽圖像。而蒙版的靈活性同時也是缺點(diǎn)之一,一旦黑色的深淺沒有控制好,不能完全遮蔽圖像,就會影響整個作品,而橡皮擦是百分之一百去掉的。所以當(dāng)確定需要完全去掉圖像時,請勇敢地選擇橡皮擦。

3.不要忘記魔棒工具

關(guān)于創(chuàng)建選區(qū),很多人第一時間都會想到鋼筆工具、快速選擇、套索工具等等,而魔棒工具往往被人們忽略掉。魔棒就如它的名字一樣,充滿魔力,輕輕一點(diǎn)擊,就會自動將與點(diǎn)擊位置顏色基本相同的區(qū)域選擇起來,并且可以通過設(shè)置容差值,調(diào)整選擇范圍。在圖像存在明顯邊緣的情況下,魔棒工具可以說是最佳選項(xiàng)。

為了摳圖或者創(chuàng)建蒙版,往往需要創(chuàng)建選區(qū),不需要局限在某種摳圖手段,根據(jù)圖像實(shí)際情況,選擇自己拿手的是最優(yōu)選項(xiàng)。


圖04


圖05



圖06

4.鍵盤快捷鍵會讓人錯過一些發(fā)現(xiàn)

在Photoshop教程中,時常提及通過使用鍵盤快捷鍵進(jìn)行操作。比如,通過復(fù)制目標(biāo)圖層來創(chuàng)建新圖層,快捷鍵是Ctrl+J,菜單選擇是“圖層>新建>通過拷貝的圖層”。

使用快捷鍵的確能提高操作效率,但同時也會讓你錯過一些學(xué)習(xí)的機(jī)會。當(dāng)你使用快捷鍵進(jìn)行操作的時候,就不會想從主場單中選擇“圖層>新建”,然后就不會知道存在另外一種方式:“通過剪切的圖層”——原圖層選區(qū)內(nèi)的像素剪切到新圖層中,這里包含了剪切和創(chuàng)建新圖層兩步操作,而“通過剪切的圖層”一步就能完成。

并且Photoshop中還提供了自定義鍵盤快捷鍵的功能,選擇“編輯>鍵盤快捷鍵”,所以不讓只是遵循教程提供的一種方法,嘗試一下別的,可能會更加有趣。


圖07

5.圖層樣式按需設(shè)置

在應(yīng)用圖層樣式的時候,會注意到圖層樣式已經(jīng)具有默認(rèn)設(shè)置,而且這些默認(rèn)設(shè)置通常“也不差”。因?yàn)檫@些默認(rèn)設(shè)置是Adobe經(jīng)過長時間研發(fā)和改良,并且隨著時間的發(fā)展也在逐步完善。圖層樣式中,描邊的默認(rèn)顏色是紅色,而現(xiàn)在的顏色是黑色。其實(shí)默認(rèn)圖層樣式是相對的,它是Adobe長年累月的應(yīng)用積累得出的。而對于Photoshop使用者,可以在各種教程的指導(dǎo)下,嘗試各種設(shè)置選項(xiàng),調(diào)試各種效果。

就如下面的文字的投影效果都很漂亮。單從效果是不知道這些漂亮的背后是怎么操作,如果點(diǎn)擊打開圖層樣式就會發(fā)現(xiàn),這些投影都有各自的角度。所以,下次應(yīng)用圖層樣式的時候考慮一下實(shí)際應(yīng)用需求。


圖08


圖08


圖09

6.名字只是喚起記憶的符號

在處理數(shù)量不多圖層時,我們可以不用怎么注意命名。當(dāng)圖層數(shù)量越來越多的時候,可以通過刪減不必要的圖層數(shù)量,簡化圖層結(jié)構(gòu),然后結(jié)合適當(dāng)?shù)拿绞?,進(jìn)一步優(yōu)化對圖層管理。對于圖層命名可能會存在一個誤區(qū),就是命名描述得越詳細(xì)越好。要記住,命名只是一個符號,主要區(qū)別于其他圖層,具有大致的特征就可以,不然混含顏色、內(nèi)容描述的命名組合會讓人看到發(fā)暈。


圖11

在Photoshop中,當(dāng)對一個圖層進(jìn)行命名的時候,按著Tab鍵就可以對下個圖層進(jìn)行命名,可以說對每個圖層命名是很容易的,但并不是沒創(chuàng)建都要花一番心血弄個命名體系。就如圖層不多的時候,采用默認(rèn)命名方式“圖層1”、“圖層2”或者“圖層2副本”,就可以滿足需求。如果是頭條文字圖層,可以考慮命名為“背景文字”。當(dāng)選用素材時,就不用將素材的引用名稱都包含到圖層命名中,相反可能命名得奇葩一點(diǎn),可能效果會更加好。


圖12

7.PS離不開鼠標(biāo)

現(xiàn)在你們在用什么滾動翻閱著這篇文章呢,是手機(jī)的觸摸屏還是鼠標(biāo)滾輪,或者筆記本上的觸控板?在任何情況下,都需要清楚知道屏幕翻動的方式。如今隨著輸入設(shè)備的發(fā)展,越來越多教程在推崇試用數(shù)位板等壓力感應(yīng)式輸入設(shè)備。


圖13

壓力感應(yīng)式輸入設(shè)備與鼠標(biāo)各有各優(yōu)點(diǎn)。使用觸控板或者數(shù)位板時,就像畫畫一樣拿起畫筆,在Photoshop上畫出來。而鼠標(biāo)雖然已經(jīng)發(fā)明使用很長時間了,但對手掌來說,仍然是最完美的定點(diǎn)設(shè)備。如果拿起觸控筆,操作方式將會完全跟鼠標(biāo)不同。


圖14

圖像是由一個個細(xì)小像素組成,在精細(xì)度控制方面鼠標(biāo)具有無與倫比的操作特性,也是觸控類輸入設(shè)備所難以比擬的。因此,在選用輸入設(shè)備方面建議優(yōu)先選用鼠標(biāo)。


圖15

8.不要怕高分辨率

有時候我們會聽到說圖像的分辨率很重要,太小就會顯示不清楚,必須采用高分辨率,然后就開始聽到關(guān)于DPI、PPI的各種解釋,就會相信不能隨便使用從網(wǎng)上下載的圖像,因?yàn)樗鼈兊姆直媛识继突蛘叱叽缣 ?


圖16

圖像分辨率是指單位英寸中所包含的像素點(diǎn)數(shù)。隨著圖像技術(shù)的發(fā)展,理論上圖像分辨率會越來越大。但是為什么一定要采用高分辨率呢?顯示設(shè)備的日漸發(fā)展是一個原因,另一種結(jié)論是網(wǎng)絡(luò)資源輸出的控制。我們都知道圖像素材作為一種網(wǎng)絡(luò)資源,具有它的使用價值。當(dāng)市場的使用要求比較高的時候,先拋出低質(zhì)量的資源,再通過一些手段控制高質(zhì)量資源的輸出。

我們不用太多理會策略的東西,只要知道怎么解決就行!下面將會介紹怎么通過Photoshop來克服低分辨率的問題。

Step 1

打開Photoshop,選擇“圖像>圖像大小”,設(shè)置圖像各自增大200%,勾選重新取樣,設(shè)置保留細(xì)節(jié)(擴(kuò)大)。


圖17

Step 2

選擇“濾鏡>銳化>USM銳化”,設(shè)置數(shù)量、半徑、閥值,將放大產(chǎn)生的模糊或者失真盡量消除。這樣圖像尺寸就是原來的兩倍,并且不需要高分辨率。學(xué)會了趕緊試試吧。


圖18

9.控制Photoshop的內(nèi)存使用空間

我們都知道Photoshop對電腦性能要求比較高,對CPU、內(nèi)存的占用率也是比較大的。在之前的學(xué)習(xí)中,大家可能也知道一些關(guān)于優(yōu)化性能、提高Photoshop運(yùn)行效率的技巧。


圖19


圖20

但是,為什么Photoshop需要占用這么大的CPU和內(nèi)存呢?除了處理圖像之外,Photoshop還可能利用額外的內(nèi)存或者CPU性能進(jìn)行畫面捕捉、記錄行為等。但是這些與我們使用Photoshop基本無關(guān),選擇“編輯>首選項(xiàng)>性能”,在內(nèi)存使用情況的設(shè)置框中調(diào)節(jié)讓Photoshop使用的內(nèi)存空間。讓Photoshop使用的內(nèi)存空間越少,可讓PS進(jìn)行額外記錄捕捉的空間就越少。


圖21

PS:Photoshop是否進(jìn)行額外的畫面捕捉或者記錄就不得而知,但是有個秘密畫面可以看一下:關(guān)閉PS重新啟動,然后按著Ctrl,點(diǎn)擊“幫助>關(guān)于Photoshop”,這時會出現(xiàn)一個秘密畫面。


圖22

10.合并圖層節(jié)省空間

使用Photoshop過程往往會產(chǎn)生巨大的PSD文件。這些PSD文件包含非常多的圖層,常占用超大的硬盤空間,如果想將這樣的超級文件發(fā)送給其他人,基本上不用考慮E-mail,如果扔到U盤或者移動硬盤傳輸,就要慢慢等著進(jìn)度條爬滿。

合并圖層工具作為一個不完全的解決方案,可以將PSD超級文件縮減為小文件。要注意合并過程會將隱藏圖層扔掉哦。

下面是一個簡單的例子:原PSD文件399MB,經(jīng)過合并后,體積縮小至27.8MB,縮減比例達(dá)到93%,并且出圖質(zhì)量與原文件相差無幾,有需要的朋友要記住了哦!


圖23


圖24

小結(jié)

本期的國外精品PS教程就到這里結(jié)束啦。文章提及的小技巧雖然比較簡單,但是對我們拓展Photoshop使用思路是有一定的幫助,特別是對一些PS工具的使用方法上也會有新的了解。感興趣的朋友可以記錄下來,一一練習(xí)吸收。希望大家能通過這次的PS教程進(jìn)一步提高PS技能,打造出更加出色的作品。




日歷

鏈接

個人資料

存檔