如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
圖片三個(gè)網(wǎng)站的圖片搜索結(jié)果進(jìn)行爬取和下載。
首先通過(guò)爬蟲過(guò)程中遇到的問(wèn)題，總結(jié)如下：
1、一次頁(yè)面加載的圖片數(shù)量各個(gè)網(wǎng)站是不定的，每翻一頁(yè)就會(huì)刷新一次，對(duì)于數(shù)據(jù)量大的爬蟲幾乎都需要用到翻頁(yè)功能，有如下兩種方式：
1）通過(guò)網(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'
2）通過(guò)selenium來(lái)實(shí)現(xiàn)模擬鼠標(biāo)操作來(lái)進(jìn)行翻頁(yè)，這一點(diǎn)會(huì)在Google圖片爬取的時(shí)候進(jìn)行講解。
2、每個(gè)網(wǎng)站應(yīng)用的圖片加載技術(shù)都不一樣，對(duì)于靜態(tài)加載的網(wǎng)站爬取圖片非常容易，因?yàn)槊繌垐D片的url都直接顯示在網(wǎng)頁(yè)源碼中，找到每張圖片對(duì)應(yīng)的url即可使用urlretrieve()進(jìn)行下載。然而對(duì)于動(dòng)態(tài)加載的網(wǎng)站就比較復(fù)雜，需要具體問(wèn)題具體分析，例如google圖片每次就會(huì)加載35張圖片（只能得到35張圖片的url），當(dāng)滾動(dòng)一次后網(wǎng)頁(yè)并不刷新但是會(huì)再次加載一批圖片，與前面加載完成的都一起顯示在網(wǎng)頁(yè)源碼中。對(duì)于動(dòng)態(tài)加載的網(wǎng)站我推薦使用selenium庫(kù)來(lái)爬取。
對(duì)于爬取圖片的流程基本如下（對(duì)于可以通過(guò)網(wǎng)址實(shí)現(xiàn)翻頁(yè)或者無(wú)需翻頁(yè)的網(wǎng)站）：
1. 找到你需要爬取圖片的網(wǎng)站。（以必應(yīng)為例）
2. 使用google元素檢查（其他的沒(méi)用過(guò)不做介紹）來(lái)查看網(wǎng)頁(yè)源碼。
3. 使用左上角的元素檢查來(lái)找到對(duì)應(yīng)圖片的代碼。
4. 通過(guò)觀察找到翻頁(yè)的規(guī)律（有些網(wǎng)站的動(dòng)態(tài)加載是完全看不出來(lái)的，這種方法不推薦）
從圖中可以看到標(biāo)簽div，class=’dgControl hover’中的data-nexturl的內(nèi)容隨著我們滾動(dòng)頁(yè)面翻頁(yè)first會(huì)一直改變，q=二進(jìn)制碼即我們關(guān)鍵字的二進(jìn)制表示形式。加上前綴之后由此我們才得到了我們要用的url。
5. 我們將網(wǎng)頁(yè)的源碼放進(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')
我們得到的soup是一個(gè)class ‘bs4.BeautifulSoup’對(duì)象，可以直接對(duì)其進(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對(duì)應(yīng)的value。 count = len(os.listdir('./' + word)) + 1 SaveImage(link,word,count)#調(diào)用函數(shù)保存得到的圖片。
最后調(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)生未知錯(cuò)誤，放棄保存") else:
print("圖+1,已有" + str(count) + "張圖")
這里需要強(qiáng)調(diào)是像前面的打開網(wǎng)址和現(xiàn)在的下載圖片都需要使用try except進(jìn)行錯(cuò)誤測(cè)試，否則出錯(cuò)時(shí)程序很容易崩潰，大大浪費(fèi)了數(shù)據(jù)采集的時(shí)間。
以上就是對(duì)單個(gè)頁(yè)面進(jìn)行數(shù)據(jù)采集的流程，緊接著改變url中｛1｝進(jìn)行翻頁(yè)操作繼續(xù)采集下一頁(yè)。
數(shù)據(jù)采集結(jié)果如下：
有問(wèn)題請(qǐng)留言。
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
如何從眾多的設(shè)計(jì)點(diǎn)中找到一個(gè)清晰的設(shè)計(jì)主線呢？只需從3個(gè)方面切入。小明的設(shè)計(jì)故事：身為設(shè)計(jì)師的小明，剛剛遇到下發(fā)的設(shè)計(jì)需求，看了半天需求，無(wú)從下手。于是瘋狂尋找競(jìng)品去借鑒，去素材網(wǎng)站尋找素材拼湊。
如果在設(shè)計(jì)工作中遇到與小明相同的情況：沒(méi)有設(shè)計(jì)頭緒，大腦一片空白，畫著不一定能過(guò)審的草稿時(shí)，請(qǐng)繼續(xù)閱讀下面的文章，希望大家能從作者的設(shè)計(jì)總結(jié)中有所啟發(fā)。
目錄：
什么是設(shè)計(jì)點(diǎn)？
設(shè)計(jì)點(diǎn)是設(shè)計(jì)師通過(guò)設(shè)計(jì)手段介入設(shè)計(jì)任務(wù)的一個(gè)節(jié)點(diǎn)，比如：設(shè)計(jì)目標(biāo) 、設(shè)計(jì)風(fēng)格 、用戶行為 、用戶情緒 、信息表達(dá)等都是設(shè)計(jì)的切入點(diǎn)，設(shè)計(jì)點(diǎn)能夠影響設(shè)計(jì)的風(fēng)格走向和設(shè)計(jì)師的創(chuàng)作思路。
那如何從眾多的設(shè)計(jì)點(diǎn)中找到一個(gè)清晰的設(shè)計(jì)主線呢？只需從3個(gè)方面切入。
下圖是阿里巴巴UED 的設(shè)計(jì)理論，同程序員提倡的「不造重復(fù)的輪子」一樣，設(shè)計(jì)理論也沒(méi)有必要去反復(fù)總結(jié)類似的。目前阿里的這個(gè)設(shè)計(jì)理論，很好的支持了包含大型項(xiàng)目到中型項(xiàng)目的各個(gè)環(huán)節(jié)，易于理解，且和我們的工作認(rèn)知貼近，是一個(gè)很好的入門方法。
我們通過(guò)定義業(yè)務(wù)目標(biāo)和聚焦設(shè)計(jì)目標(biāo)，來(lái)最終實(shí)現(xiàn)設(shè)計(jì)的產(chǎn)出。
下圖是平臺(tái)營(yíng)銷活動(dòng)的設(shè)計(jì)5個(gè)要義，其核心也是業(yè)務(wù)目標(biāo)。
通過(guò)幾個(gè)的設(shè)計(jì)方法的展示，我們可以看出，處于上游業(yè)務(wù)目標(biāo)的重要性。
只有業(yè)務(wù)目標(biāo)和設(shè)計(jì)目標(biāo)一致的時(shí)候，我們的設(shè)計(jì)工作才有意義。當(dāng)我們?cè)u(píng)判我們的設(shè)計(jì)結(jié)果時(shí)，除了設(shè)計(jì)的數(shù)據(jù)指標(biāo)外，能快速判斷設(shè)計(jì)方案比迭代之前更優(yōu)的指標(biāo)就是是否符合業(yè)務(wù)目標(biāo)，是否更貼近用戶的訴求。
1. 切入模型
根據(jù)工具模型我們從業(yè)務(wù)目標(biāo)出發(fā)，去定義設(shè)計(jì)目標(biāo)從而得出設(shè)計(jì)方向。
2. 明確業(yè)務(wù)訴求
3. 得出業(yè)務(wù)目標(biāo)
用分享講義的策略給用戶帶來(lái)學(xué)習(xí)交流機(jī)會(huì)和學(xué)習(xí)成就感，達(dá)到拉新和活躍用戶目的。
4. 視覺(jué)推導(dǎo)
5. 案例
視覺(jué)設(shè)計(jì)師，尤其是運(yùn)營(yíng)設(shè)計(jì)師一定要具有交互思維，作為全鏈路設(shè)計(jì)目標(biāo)的我們，掌握交互思維，能更好的理解產(chǎn)品文檔和規(guī)避更多的設(shè)計(jì)錯(cuò)誤，從而準(zhǔn)確引導(dǎo)用戶操作路徑。
方法：了解頁(yè)面中的功能交互流程，梳理用戶操作行為路徑，可以對(duì)行為步驟中的信息內(nèi)容進(jìn)行歸類分組提供依據(jù)。
切入模型：
常見的方法有：情感化、原子化、組件化、游戲化等等。
方法：分解設(shè)計(jì)需求，歸納設(shè)計(jì)模塊，運(yùn)用已知的設(shè)計(jì)類型進(jìn)行視覺(jué)化設(shè)計(jì)。
1. 提取儀式感設(shè)計(jì)點(diǎn)-曬成績(jī)項(xiàng)目
儀式感的作用：通過(guò)用戶在體驗(yàn)過(guò)程中由產(chǎn)品功能實(shí)現(xiàn)—交互操作—體驗(yàn)心理變化建立，形成對(duì)價(jià)值觀的建立，是給用戶帶來(lái)更高層次的享受。
從四個(gè)層面理解儀式感：權(quán)威感、尊重存在感、期待感、榮譽(yù)感的意義。通過(guò)分解設(shè)計(jì)內(nèi)容來(lái)發(fā)現(xiàn)機(jī)會(huì)點(diǎn)，插入儀式感設(shè)計(jì)方法。
視覺(jué)推導(dǎo)：
案例：
2. 提取情感化設(shè)計(jì)點(diǎn)
情感化設(shè)計(jì)3要素：
案例：
3. 提取游戲化設(shè)計(jì)點(diǎn)
將游戲機(jī)制運(yùn)用于非游戲場(chǎng)景。比如：要想鼓勵(lì)用戶多參與交互，你可以在 APP 加入「挑戰(zhàn)」這類的游戲元素，用戶可以參與挑戰(zhàn)，通過(guò)連續(xù)抽獎(jiǎng)，并獲得相應(yīng)獎(jiǎng)賞，從而達(dá)到預(yù)期目的。
案例：
尋找設(shè)計(jì)點(diǎn)就是拆解與分析的過(guò)程。
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
專注于做好一件小事，哪怕是做不好也用心去做，小到搭建一個(gè)精美的網(wǎng)格系統(tǒng)，做好一個(gè)字體的拐角……先看一下我的往期設(shè)計(jì)案例。
對(duì)于很多剛接觸字體設(shè)計(jì)的同學(xué)經(jīng)常會(huì)遇到一種情況那就是想法高大上，結(jié)果很悲傷，為什么會(huì)造成這樣的結(jié)果？歸根結(jié)底是對(duì)字體設(shè)計(jì)本身了解還不夠細(xì)致就照葫蘆畫瓢直接上，為了避免這種尷尬的結(jié)果，我們應(yīng)該在開始著手做字體之前要做好各項(xiàng)準(zhǔn)備工作，不斷去瀏覽優(yōu)秀的字體設(shè)計(jì)從中尋找設(shè)計(jì)的感覺(jué)，確定感覺(jué)后建立網(wǎng)格系統(tǒng)，開始逐步設(shè)計(jì)字體。我在做字體設(shè)計(jì)的時(shí)候會(huì)把握幾個(gè)步驟「建網(wǎng)格」——「選字體」——「拆字體」——「繪筆畫」——「綁骨架」——「粗與細(xì)」——「取與舍」——「磨細(xì)節(jié)」——「去感受」。
下面我們就以大家最常見的矩陣字體為例來(lái)給大家分享如何制作字體。
1. 建網(wǎng)格
建立網(wǎng)格系統(tǒng)，萬(wàn)丈高樓平地起，要做一款扎實(shí)的字體離不開網(wǎng)格系統(tǒng)的規(guī)范。
2. 拆字體
以「燃」為例——選取一個(gè)默認(rèn)字體，按照字體結(jié)構(gòu)對(duì)筆畫進(jìn)行拆分。
3. 繪筆畫
將拆分出的筆畫用橫線和豎線在網(wǎng)格系統(tǒng)里進(jìn)行筆畫重繪，此時(shí)不要做細(xì)節(jié)，撇、捺和點(diǎn)根據(jù)自身走向和結(jié)構(gòu)特點(diǎn)也歸屬為橫豎線。
4. 綁骨架
拆分繪制的字體筆畫就是字體的骨骼，筆畫間的連接處可以理解成是人體的關(guān)節(jié)，關(guān)節(jié)的意義在于保證字體穩(wěn)固的同時(shí)又靈活多變，字體的筆畫可以根據(jù)視覺(jué)需要圍繞關(guān)節(jié)在一定范圍內(nèi)做活動(dòng)，也可調(diào)整長(zhǎng)短比例。
5. 粗與細(xì)
筆畫的粗細(xì)與硬度由你想要的字體氣質(zhì)來(lái)決定，細(xì)筆畫與曲筆畫柔美氣質(zhì)，粗筆畫與直筆畫沉穩(wěn)大氣，雖說(shuō)設(shè)計(jì)是一種感覺(jué)，但是這種感覺(jué)對(duì)于初學(xué)者來(lái)說(shuō)很難把控，所以跟大家共享一下常用的幾種筆畫的粗細(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è)計(jì)心字；「上中下結(jié)構(gòu)」中一般會(huì)在不影響識(shí)別性的前提下去掉中間部分橫行筆畫，進(jìn)而達(dá)到字體本身的平衡，例如「享」字著重設(shè)計(jì)口字；左中右結(jié)構(gòu)中在不影響識(shí)別性的前提下會(huì)簡(jiǎn)化左邊部分筆畫，進(jìn)而達(dá)到字體本身的平衡，例如「燃」字著重設(shè)計(jì)火字。
7. 取與舍
筆畫變粗后整個(gè)字體筆畫間的空間比例會(huì)受到一定影響，因此為了字體的美觀度和透氣性我們會(huì)對(duì)字體結(jié)構(gòu)進(jìn)行一些取舍和整合。
8. 磨細(xì)節(jié)
為了讓字體看起來(lái)更加舒適，我們將字體的拐角做圓，做圓角的同時(shí)也要根據(jù)網(wǎng)格系統(tǒng)來(lái)調(diào)整圓的度數(shù)。
9. 去感受
打磨整體字體，繼續(xù)刻畫細(xì)節(jié)。
注意：在一組字里，每個(gè)單字的結(jié)構(gòu)都存在差異，適當(dāng)調(diào)整字體內(nèi)部的比例，形成感官上舒適的筆勢(shì)，對(duì)保持視覺(jué)上大小一致很重要。漢字字體類型繁多，但是如果我們用幾何法則來(lái)劃分字體類型其實(shí)大致可以歸納為三種：方形，圓形和三角形，從面積上來(lái)看方形和圓形的面積最大，三角形次之，所以我們?yōu)榱吮３肿种卮笮〉囊恢滦孕枰{(diào)整他們之間的大小比例，做到大小均勻，筆畫一致，結(jié)構(gòu)嚴(yán)謹(jǐn)和間隙適中。
△ 圖源：ElethomHunter
為了拉出字體的氣質(zhì)，一般會(huì)把字體做的稍微偏瘦長(zhǎng)一些。
字體設(shè)計(jì)的手段是多種多樣的，每個(gè)設(shè)計(jì)師都有自己擅長(zhǎng)的切入點(diǎn)，最后的結(jié)果是自己想要的就好。上述的分享希望能給字體設(shè)計(jì)初學(xué)者一點(diǎn)幫助，也歡迎各位同行大神交流切磋。
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
JS頁(yè)面代碼段：
-
const app = getApp()
-
let goodsList = [
-
{ actEndTime: '2018-07-21 21:00:34' },
-
{ actEndTime: '2028-07-17 21:00:37' },
-
{ actEndTime: '2018-09-21 05:00:59' },
-
{ actEndTime: '2018-08-19 07:00:48' },
-
{ actEndTime: '2018-08-28 03:00:11' }
-
]
-
Page({
-
-
data: {
-
countDownList: [],
-
actEndTimeList: []
-
},
-
-
onLoad: function () {
-
let endTimeList = [];
-
// 將活動(dòng)的結(jié)束時(shí)間參數(shù)提成一個(gè)單獨(dú)的數(shù)組，方便操作
-
goodsList.forEach(o => { endTimeList.push(o.actEndTime) })
-
this.setData({ actEndTimeList: endTimeList });
-
// 執(zhí)行倒計(jì)時(shí)函數(shù)
-
this.countDown();
-
},
-
-
//當(dāng)時(shí)間小于兩位數(shù)時(shí)十位數(shù)補(bǔ)零。
-
timeFormat: function (param) {//小于10的格式化函數(shù)
-
return param < 10 ? '0' + param : param;
-
},
-
-
//倒計(jì)時(shí)函數(shù)
-
countDown: function () {
-
// 獲取當(dāng)前時(shí)間，同時(shí)得到活動(dòng)結(jié)束時(shí)間數(shù)組
-
let newTime = new Date().getTime();//當(dāng)前時(shí)間
-
let endTimeList = this.data.actEndTimeList;//結(jié)束時(shí)間的數(shù)組集合
-
let countDownArr = [];//初始化倒計(jì)時(shí)數(shù)組
-
-
// 對(duì)結(jié)束時(shí)間進(jìn)行處理渲染到頁(yè)面
-
endTimeList.forEach(o => {
-
let endTime = new Date(o).getTime();
-
let obj = null;
-
// 如果活動(dòng)未結(jié)束，對(duì)時(shí)間進(jìn)行處理
-
if (endTime - newTime > 0) {
-
let time = (endTime - newTime) / 1000;
-
// 獲取天、時(shí)、分、秒
-
let day = parseInt(time / (60 * 60 * 24));
-
let hou = parseInt(time % (60 * 60 * 24) / 3600);
-
let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
-
let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
-
obj = {
-
day: this.timeFormat(day),
-
hou: this.timeFormat(hou),
-
min: this.timeFormat(min),
-
sec: this.timeFormat(sec)
-
}
-
} else {//活動(dòng)已結(jié)束，全部設(shè)置為'00'
-
obj = {
-
day: '00',
-
hou: '00',
-
min: '00',
-
sec: '00'
-
}
-
}
-
countDownArr.push(obj);
-
})
-
//每隔一秒執(zhí)行一次倒計(jì)時(shí)函數(shù)， 渲染
-
this.setData({ countDownList: countDownArr })
-
setTimeout(this.countDown, 1000);
-
}
-
})
wxml頁(yè)面代碼段
-
<view class='tui-countdown-content' wx:for="{{countDownList}}" wx:key="countDownList">
-
距結(jié)束
-
<text class='tui-conutdown-box'>{{item.day}}</text>天
-
<text class='tui-conutdown-box'>{{item.hou}}</text>時(shí)
-
<text class='tui-conutdown-box'>{{item.min}}</text>分
-
<text class='tui-conutdown-box tui-countdown-bg'>{{item.sec}}</text>秒
-
</view>
-
wxss頁(yè)面代碼段
-
page{
-
background: #f5f5f5;
-
}
-
.tui-countdown-content{
-
height: 50px;
-
line-height: 50px;
-
text-align: center;
-
background-color: #fff;
-
margin-top: 15px;
-
padding: 0 15px;
-
font-size: 18px;
-
}
-
.tui-conutdown-box{
-
display: inline-block;
-
height: 26px;
-
width: 26px;
-
line-height: 26px;
-
text-align: center;
-
background:#ccc;
-
color: #000;
-
margin: 0 5px;
-
}
-
.tui-countdown-bg{
-
background: red;
-
color: #fff;
-
}
-
-
.container{
-
width: 100%;
-
display: flex;
-
justify-content: center;
-
}
-
.backView{
-
width:690rpx;
-
background: #fff;
-
display: flex;
-
flex-direction: column;
-
margin-bottom: 30rpx;
-
}
-
.createDate
-
{
-
background: #f5f5f5;
-
padding:15rpx 15rpx 10rpx 15rpx;
-
line-height: 50rpx;
-
font-size: 28rpx;
-
color: gainsboro;
-
text-align: center;
-
}
-
.backViewitem1{
-
-
display: flex;
-
flex-direction: row;
-
height: 55rpx;
-
align-items: center;
-
padding:8rpx 40rpx;
-
border-bottom: 2rpx solid #f5f5f5;
-
}
-
.ico
-
{
-
width:35rpx;
-
height:35rpx;
-
}
-
.name
-
{
-
color: #c13176;
-
margin-left: 20rpx;
-
font-size: 28rpx;
-
}
-
-
.details
-
{
-
font-size:24rpx;
-
letter-spacing: 2rpx;
-
-
}
-
.backViewitem2{
-
-
display: flex;
-
flex-direction: row;
-
line-height: 35rpx;
-
min-height: 70rpx;
-
padding: 15rpx 40rpx 10rpx 40rpx;
-
border-bottom: 2rpx solid #f5f5f5;
-
}
-
.details1
-
{
-
color:#888;
-
font-size:23rpx;
-
letter-spacing: 2rpx;
-
-
}
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一、什么是跨域訪問(wèn)
舉個(gè)栗子：在A網(wǎng)站中，我們希望使用Ajax來(lái)獲得B網(wǎng)站中的特定內(nèi)容。如果A網(wǎng)站與B網(wǎng)站不在同一個(gè)域中，那么就出現(xiàn)了跨域訪問(wèn)問(wèn)題。你可以理解為兩個(gè)域名之間不能跨過(guò)域名來(lái)發(fā)送請(qǐng)求或者請(qǐng)求數(shù)據(jù)，否則就是不安全的?？缬蛟L問(wèn)違反了同源策略，同源策略的詳細(xì)信息可以點(diǎn)擊如下鏈接：Same-origin_policy；
總而言之，同源策略規(guī)定，瀏覽器的ajax只能訪問(wèn)跟它的HTML頁(yè)面同源（相同域名或IP）的資源。
JSONP(JSON with Padding)是JSON的一種“使用模式”，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問(wèn)的問(wèn)題。
由于同源策略，一般來(lái)說(shuō)位于 server1.example.com 的網(wǎng)頁(yè)無(wú)法與不是 server1.example.com的服務(wù)器溝通，而 HTML 的<script> 元素是一個(gè)例外。利用<script>元素的這個(gè)開放策略，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的 JSON 資料，而這種使用模式就是所謂的 JSONP。用 JSONP 抓到的資料并不是 JSON，而是任意的JavaScript，用 JavaScript 直譯器執(zhí)行而不是用 JSON 解析器解析。更具體的原理需要更多篇幅的講解，小伙伴可以自行去百度。
JQuery Ajax對(duì)JSONP進(jìn)行了很好的封裝，我們使用起來(lái)很方便。前端示例：
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //訪問(wèn)的鏈接 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");
}
});
需要注意的地方是：
后端要配合使用jsonp，那么首先得了解Jquery Ajax jsonp的一個(gè)特點(diǎn)：
Jquery在發(fā)送一個(gè)Ajax jsonp請(qǐng)求時(shí)，會(huì)在訪問(wèn)鏈接的后面自動(dòng)加上一個(gè)驗(yàn)證參數(shù)，這個(gè)參數(shù)是Jquery隨機(jī)生成的，例如鏈接
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046
中，參數(shù)callback=jQuery31106628680598769732_1512186387045&_=1512186387046就是jquery自動(dòng)添加的。
添加這個(gè)參數(shù)的目的是唯一標(biāo)識(shí)這次請(qǐng)求。當(dāng)服務(wù)器端接收到該請(qǐng)求時(shí)，需要將該參數(shù)的值與實(shí)際要返回的json值進(jìn)行構(gòu)造（如何構(gòu)造下面講解），并且返回，而前端會(huì)驗(yàn)證這個(gè)參數(shù)，如果是它之前發(fā)出的參數(shù)，那么就會(huì)接收并解析數(shù)據(jù)，如果不是這個(gè)參數(shù)，那么就拒絕接受。
需要特別注意的是這個(gè)驗(yàn)證參數(shù)的名字（我在這個(gè)坑上浪費(fèi)了2小時(shí)），這個(gè)名字來(lái)源于前端的jsonp參數(shù)的值。如果把前端jsonp參數(shù)的值改為“aaa”，那么相應(yīng)的參數(shù)就應(yīng)該是
aaa=jQuery31106628680598769732_1512186387045&_=1512186387046
知道了Jquery Ajax Jsonp的原理，也知道了需要接受的參數(shù)，我們就可以來(lái)編寫服務(wù)器端程序了。
為了配合json，服務(wù)器端需要做的事情可以概括為兩步：
根據(jù)與前端Ajax約定的jsonp參數(shù)名來(lái)接收驗(yàn)證參數(shù)，示例如下（使用SpringMVC，其他語(yǔ)言及框架原理類似）
@ResponseBody @RequestMapping("/getJsonp") public String getMySeatSuccess(@RequestParam("callback") String callback){
將接收的的驗(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的一個(gè)json工具庫(kù) Map<String,String> map=new HashMap<>(); map.put("seat","1_2_06_12"); return callback+"("+gson.toJson(map)+")"; //構(gòu)造返回值 }
最終，前后端的相應(yīng)代碼應(yīng)該是這樣的：
前端
$.ajax({
type:"GET",
url:"http://www.deardull.com:9090/getMySeat", //訪問(wèn)的鏈接 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");
}
});
后端
@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)+")";
}
需要注意的是：
完整的示例就是上面兩段代碼，這里就不提供Github連接了。上面的示例親測(cè)有效，如果有遇到問(wèn)題的，歡迎留言提問(wèn)。
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)。
對(duì)于大部分的射擊濕以及設(shè)計(jì)團(tuán)隊(duì)來(lái)講，都會(huì)遇到如何提升設(shè)計(jì)效率的問(wèn)題；尤其是在創(chuàng)業(yè)公司，最浪費(fèi)時(shí)間的莫過(guò)于：永遠(yuǎn)擼不完的圖及與開發(fā)中的設(shè)計(jì)反復(fù)；接下來(lái)我將通過(guò)自身的一些設(shè)計(jì)管理經(jīng)驗(yàn)，從工具使用提升工作效率的角度，跟大家分享下我解決這兩個(gè)問(wèn)題的方法。
擼不完的圖-處理各方設(shè)計(jì)需求
1、設(shè)計(jì)的需求方在不斷增多：產(chǎn)品、運(yùn)營(yíng)、市場(chǎng)、地推、策劃等等；
對(duì)于大部分的射擊濕來(lái)說(shuō)，設(shè)計(jì)的需求都是越來(lái)越多的；尤其是中小型公司由于發(fā)展的的需要，公司的人員及部門會(huì)越來(lái)越多；也就導(dǎo)致后期的設(shè)計(jì)需求慢慢增加；我們公司就是醬紫的，原來(lái)只要考慮產(chǎn)品需求的，現(xiàn)在要考慮運(yùn)營(yíng)日常海報(bào)、活動(dòng)設(shè)計(jì)、市場(chǎng)推廣素材、線下門店品牌視覺(jué)系統(tǒng)、還有老板的PPT等等。
2、需求不清導(dǎo)致變動(dòng)頻繁：沒(méi)有目的下需求，缺少需求細(xì)節(jié)；
在日常的工作中，最麻煩的就是跟需求方確認(rèn)需求；尤其是口述的需求，沒(méi)有文案、時(shí)間節(jié)點(diǎn)及具體的需求描述；比如，我要“五彩斑斕的黑”或者“字要大”這種奇葩需求想一出就是一出的隨性需求。
3、對(duì)接、確認(rèn)流程不清晰：沒(méi)有一套完整有效的對(duì)接流程，導(dǎo)致雙方扯皮；
二、產(chǎn)生的問(wèn)題？
1、設(shè)計(jì)效率及產(chǎn)出質(zhì)量不高：需求方不滿意，然后設(shè)計(jì)反復(fù)浪費(fèi)時(shí)間；
2、項(xiàng)目推進(jìn)速度變緩：有限的時(shí)間達(dá)不到設(shè)計(jì)要求拖慢項(xiàng)目進(jìn)度，影響業(yè)務(wù)目標(biāo)；
1、建立和規(guī)范有效的需求對(duì)接確認(rèn)流程：從制度層面解決跨部門協(xié)調(diào)問(wèn)題；
首先，對(duì)內(nèi)規(guī)范接收和分發(fā)需求的流程；將原來(lái)粗放的接收方式改為協(xié)作工具接收分發(fā)需求；其次，對(duì)外規(guī)范需求下方的格式規(guī)范。
2、使用“團(tuán)隊(duì)協(xié)作工具”統(tǒng)一輸入/輸出需求：運(yùn)用工具解決需求接收下放問(wèn)題；
3、規(guī)范需求方下需求的格式：需求包含的各項(xiàng)要點(diǎn)：
時(shí)間節(jié)點(diǎn)：最好提前幾天；
需求描述：需要什么樣的；
文案描述：傳達(dá)什么內(nèi)容。
1、工具不統(tǒng)一，協(xié)作較難：PS與Sketch混用；
我剛進(jìn)公司的時(shí)候，設(shè)計(jì)團(tuán)隊(duì)的三個(gè)人用的設(shè)計(jì)工具和設(shè)備都不一樣；有的用PS，有的用Sketch，這就造成設(shè)計(jì)協(xié)作難而且設(shè)計(jì)稿輸出格式不同意，開發(fā)抱怨的情況，工作推進(jìn)艱難。
2、標(biāo)注切圖耗時(shí)太長(zhǎng)：頁(yè)面中的各個(gè)元素都要進(jìn)行大小、顏色、間距及格式的標(biāo)注；
設(shè)計(jì)給開發(fā)的輸出物有三種：視覺(jué)稿、標(biāo)注及安卓、IOS不同尺寸的切圖；以上是保證上線效果的關(guān)鍵；但是傳統(tǒng)的手動(dòng)標(biāo)注和切圖是很浪費(fèi)時(shí)間的。
3、IOS、安卓設(shè)計(jì)規(guī)范差異：兩個(gè)平臺(tái)系統(tǒng)差異，有時(shí)候要輸出兩套設(shè)計(jì)素材；
1、統(tǒng)一設(shè)計(jì)工具：移動(dòng)端的設(shè)計(jì)統(tǒng)一Sketch輸出；
2、利用第三方工具Zeplin自動(dòng)標(biāo)注設(shè)計(jì)稿：工具代替原來(lái)的手動(dòng)標(biāo)注；
3、工具zeplin工具的優(yōu)勢(shì)：
自動(dòng)匹配IOS及安卓平臺(tái)設(shè)計(jì)單位、顏色及字體大小等；
設(shè)計(jì)一套搞定，減少設(shè)計(jì)師工作量；
設(shè)計(jì)溝通的效率和質(zhì)量大大提升；
以上就是我在做設(shè)計(jì)管理過(guò)程中摸索的一些的經(jīng)驗(yàn)，無(wú)論是跟需求方的設(shè)計(jì)溝通還是和開發(fā)的協(xié)同配合，都非常的和諧；希望通過(guò)此次分享能給遇到相同困惑的小伙伴們一些啟發(fā)~
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
夜月薰衣茶 PMIP
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
如何處理需求，是產(chǎn)品經(jīng)理的基本功，不管是來(lái)自老板還是客戶的，亦或來(lái)自企業(yè)內(nèi)部（運(yùn)營(yíng)、業(yè)務(wù)）及產(chǎn)品本身的發(fā)展，產(chǎn)品經(jīng)理都需要把需求的收集、分析、管理做到有效進(jìn)行。
一、需求收集
用戶調(diào)研
運(yùn)用場(chǎng)景：
產(chǎn)品規(guī)劃初期或者遇到重大版本迭代，需要重新架構(gòu)設(shè)計(jì)時(shí)，將會(huì)進(jìn)行用戶問(wèn)卷、用戶訪談的方式去挖掘用戶的真實(shí)需求。
基本方法:
用戶問(wèn)卷-定量研究的方法，問(wèn)卷問(wèn)題一般為15個(gè)左右，包含用戶基礎(chǔ)資料信息（包括年齡、收入、教育水平等人口統(tǒng)計(jì)學(xué)范疇信息）和主觀性的信息（包括用戶做這項(xiàng)活動(dòng)的態(tài)度、行為、目的等方面的信息）兩大部分，收集到這些數(shù)據(jù)后進(jìn)行分析并得出一定結(jié)論。
用戶訪談-定性研究方法，訪談問(wèn)題分類包括開放性的問(wèn)題和專業(yè)性的問(wèn)題。問(wèn)題盡量從簡(jiǎn)單到復(fù)雜，由較寬泛趨于精細(xì)；訪談的過(guò)程中的問(wèn)題盡量說(shuō)的簡(jiǎn)單易懂，避免專業(yè)詞匯，讓回答問(wèn)題的用戶清楚明白你說(shuō)什么；避免問(wèn)一些引導(dǎo)性的問(wèn)題；不要因?yàn)槔鋱?chǎng)而尷尬過(guò)多，多次重復(fù)進(jìn)行講解，留有一定的時(shí)間讓用戶思考如何回答；盡量問(wèn)用戶一些開放性的問(wèn)題讓用戶進(jìn)行思考回答；用戶描述的過(guò)程中盡量描述真實(shí)使用場(chǎng)景與案例。
兩種方法基本為相互補(bǔ)充進(jìn)行的一個(gè)方法，對(duì)于不熟悉的業(yè)務(wù)，問(wèn)卷編寫初期不知該如何進(jìn)行挖掘用戶的問(wèn)題，尋找五個(gè)左右的用戶進(jìn)行相關(guān)業(yè)務(wù)及主要業(yè)務(wù)用戶使用場(chǎng)景訪談，將會(huì)總結(jié)出一些問(wèn)題然后加入你要調(diào)研清楚的問(wèn)題包括客觀問(wèn)題和主觀問(wèn)題進(jìn)行用戶問(wèn)卷編寫、發(fā)放與收集。
用戶反饋
運(yùn)用場(chǎng)景：
產(chǎn)品專家用戶的反饋，包括運(yùn)營(yíng)、客服直接獲取用戶的反饋，通過(guò)從微博、論壇、貼吧、軟件用戶評(píng)論等方面尋找用戶的反饋。
基本方法：
市場(chǎng)反饋 做運(yùn)營(yíng)、客服、市場(chǎng)等人員和用戶進(jìn)行產(chǎn)品銷售推廣、運(yùn)營(yíng)活動(dòng)的過(guò)程中和用戶直接交流，一些專家用戶直接反饋出來(lái)的需求。具體也要根據(jù)產(chǎn)品是直接面向c端客戶還是企業(yè)級(jí)別的客戶，兩者有很大差異。
訪談 在和用戶進(jìn)行訪談的過(guò)程中，一些專家級(jí)別的用戶直接反饋對(duì)現(xiàn)有產(chǎn)品在使用過(guò)程中的一些不滿和改進(jìn)的建議等。
查詢相關(guān)網(wǎng)站 比如產(chǎn)品下載市場(chǎng)、百度貼吧、微博、論壇、微信群、QQ群等各種用戶有自由發(fā)表言論及感受的地方，用戶的直接反饋。
用戶直接反饋的信息，需要進(jìn)行分析其需求的真?zhèn)涡浴?/span>
產(chǎn)品定位發(fā)展
運(yùn)用場(chǎng)景：
產(chǎn)品最終要幫用戶解決一個(gè)什么樣的問(wèn)題，市場(chǎng)發(fā)展環(huán)境和公司可支配資源等方面進(jìn)行綜合評(píng)估產(chǎn)品的前期、中期、后期的目標(biāo)定位。
基本方法：
相關(guān)行業(yè)專家詢問(wèn) 在發(fā)覺(jué)一個(gè)新產(chǎn)品及市場(chǎng)時(shí)，不明確當(dāng)前市場(chǎng)狀況可直接找行業(yè)內(nèi)的一些專家進(jìn)行聊天交談，他們對(duì)于市場(chǎng)的現(xiàn)狀很熟悉，可向該類專家詢問(wèn)產(chǎn)品的定位與發(fā)展方向問(wèn)題。
投資行業(yè)的專家交流 最了解市場(chǎng)、發(fā)覺(jué)市場(chǎng)前景行業(yè)及創(chuàng)業(yè)想法的投資者，他們對(duì)于市場(chǎng)發(fā)展的方向及敏感度有一定的專業(yè)看法，可與其交流產(chǎn)品的發(fā)展方向性的問(wèn)題。
相關(guān)行業(yè)專家、投資專家給予的建議和方向最終還需要結(jié)合本身公司的定位發(fā)展與界定產(chǎn)品的發(fā)展定位。
商業(yè)畫布 一種能夠幫助處于高層決定者激發(fā)創(chuàng)意、降低猜測(cè)、明確目標(biāo)用戶、合理解決其問(wèn)題的工具，可直接判斷出公司產(chǎn)品發(fā)展的的優(yōu)勢(shì)、資源等最直接有效的方法。
以下為商業(yè)畫布九宮格主要內(nèi)容：
數(shù)據(jù)分析
運(yùn)用場(chǎng)景：
產(chǎn)品或運(yùn)營(yíng)人員對(duì)用戶操作規(guī)律，用戶流失查詢等方面進(jìn)行查看分析，決定產(chǎn)品功能優(yōu)化迭代最有效直接的證明。
基本方法：
數(shù)據(jù)埋點(diǎn) 第三方數(shù)據(jù)服務(wù)平臺(tái)或者用自己平臺(tái)后臺(tái)注入相關(guān)代碼進(jìn)行統(tǒng)計(jì)。程序員在程序編寫時(shí)將主要操作、按鈕進(jìn)行數(shù)據(jù)埋點(diǎn)，通過(guò)網(wǎng)站即可查詢相關(guān)數(shù)據(jù)。
第三方數(shù)據(jù)平臺(tái) 專業(yè)做數(shù)據(jù)的網(wǎng)站會(huì)定期進(jìn)行相關(guān)行業(yè)數(shù)據(jù)的發(fā)布，查看專業(yè)的報(bào)告即可獲取一些相關(guān)數(shù)據(jù)。
結(jié)論
針對(duì)收集的需求，大致可分為以下幾類:
產(chǎn)品運(yùn)營(yíng)類—某項(xiàng)調(diào)研結(jié)果直接反應(yīng)出一種現(xiàn)象，將會(huì)指導(dǎo)產(chǎn)品運(yùn)營(yíng)人員的運(yùn)營(yíng)方向朝著這方面努力。比如一款產(chǎn)品預(yù)約功能，從團(tuán)隊(duì)做用戶問(wèn)卷的結(jié)果反饋中，用戶更偏向于用微信公眾號(hào)進(jìn)行預(yù)約，運(yùn)營(yíng)團(tuán)隊(duì)需要相對(duì)在微信公眾號(hào)預(yù)約增加相對(duì)的運(yùn)營(yíng)的投入。
功能優(yōu)化類—用戶使用某款產(chǎn)品的某個(gè)功能目的就是為了達(dá)到其某個(gè)目的，對(duì)于功能效率或用戶體驗(yàn)上滿足，將會(huì)直接影響用戶的去留，優(yōu)化該功能的用戶體驗(yàn)滿意度及效率將會(huì)提升用戶的留存量。
新功能—產(chǎn)品功能的延伸或新增，通過(guò)用戶研究，發(fā)現(xiàn)用戶針對(duì)某個(gè)需求的實(shí)現(xiàn)很迫切，該需求就算新功能，可評(píng)估該功能緊急程度及效果進(jìn)行功能設(shè)計(jì)滿足。
二、需求分析
重要度、頻率二維度
運(yùn)用場(chǎng)景：
當(dāng)接到多個(gè)需求，因?yàn)闀r(shí)間原因，只能進(jìn)行個(gè)別需求滿足，評(píng)估優(yōu)先級(jí)時(shí)，可用該方法進(jìn)行簡(jiǎn)單需求評(píng)估分析。
基本方法：
將功能需求按照重要度和頻率進(jìn)行四象限劃分，重要高頻象限中的需求要首先進(jìn)行解決。重要度和頻率如何進(jìn)行衡量，頻率衡量即使用的頻次，重要度衡量判別是否會(huì)因?yàn)樵撔枨蟮娜鄙俣绊懹脩羰褂谩?
KANO模型分析
運(yùn)用場(chǎng)景：
產(chǎn)品重大版本迭代，因?yàn)闀r(shí)間等問(wèn)題，只能選擇個(gè)別兩三個(gè)功能進(jìn)行優(yōu)化，但是優(yōu)化的需求點(diǎn)比較多，可以直接向用戶進(jìn)行問(wèn)題編輯，查看用戶滿意度選擇進(jìn)行優(yōu)化。
基本方法：
(1)從顧客角度認(rèn)識(shí)產(chǎn)品或服務(wù)需要；
(2)設(shè)計(jì)問(wèn)卷調(diào)查表；
(3)實(shí)施有效的問(wèn)卷調(diào)查；
(4)將調(diào)查結(jié)果分類匯總，建立質(zhì)量原型；
(5)分析質(zhì)量原型，識(shí)別具體測(cè)量指標(biāo)的敏感性
二維屬性歸屬分類
場(chǎng)景化思維
運(yùn)用場(chǎng)景：
通過(guò)模擬或發(fā)現(xiàn)真實(shí)場(chǎng)景，預(yù)測(cè)用戶行為從而進(jìn)行設(shè)計(jì)。
基本方法：
從交互五要素考慮，人、目的、行為、環(huán)境、媒介幾個(gè)關(guān)鍵點(diǎn)去創(chuàng)造用戶真實(shí)的使用場(chǎng)景。在什么地方，哪個(gè)人做了什么事，運(yùn)用了哪些東西，達(dá)到了什么樣的目的，遇到了什么樣的問(wèn)題，怎么進(jìn)行處理解決。例:在淘票票購(gòu)買電影票后，付款時(shí)推薦購(gòu)買零食信息。
用戶體驗(yàn)地圖
運(yùn)用場(chǎng)景：
適用于任何場(chǎng)景，更適合在可能存在問(wèn)題或者改進(jìn)機(jī)會(huì)的事件上。
基本方法：
歸納用戶該使用場(chǎng)景下的觸點(diǎn)
畫出情感坐標(biāo)
尋找用戶進(jìn)行觸點(diǎn)體驗(yàn)情感、意見描述
歸納用戶體驗(yàn)意見
繪制情感曲線
標(biāo)注用戶重要性意見
需求分析的方法很多種，以上僅列出部分，方法只是分析的一種工具，最主要還是通過(guò)方法分析需求得出的解決方案。
三、需求管理
需求提交
簡(jiǎn)單來(lái)說(shuō)，就是將收集到的需求，在評(píng)估完優(yōu)先級(jí)，確認(rèn)做具體需求功能時(shí)將該需求開發(fā)計(jì)劃告知相關(guān)開發(fā)、測(cè)試等人員，讓其明確即將完成的功能需求。如功能需求相對(duì)應(yīng)的方案設(shè)計(jì)、業(yè)務(wù)流程等內(nèi)容提前與開發(fā)總監(jiān)溝通好上傳至公司統(tǒng)一管理文件處，具體根據(jù)不同公司的實(shí)際情況。
需求評(píng)估
需求功能的相關(guān)開發(fā)者、測(cè)試針對(duì)該需求達(dá)成統(tǒng)一認(rèn)知和開發(fā)周期認(rèn)定，使得相關(guān)開發(fā)人員在開發(fā)周期內(nèi)有效配合開發(fā)，測(cè)試人員明確該如何進(jìn)行有效測(cè)試，針對(duì)同一需求能夠有效推進(jìn)實(shí)現(xiàn)。
需求跟蹤
在開發(fā)過(guò)程能夠及時(shí)跟進(jìn)開發(fā)，一確保其開發(fā)功能達(dá)到預(yù)期效果，二有任何異常情況的發(fā)生能及時(shí)進(jìn)行處理解決，三有效把控需求的開發(fā)周期，保證需求按期交付。
需求變更
當(dāng)需求提出方提出需求變更或者在內(nèi)部評(píng)審、開發(fā)過(guò)程導(dǎo)致需求變更，做好相關(guān)需求變更的把控，以防需求變更后導(dǎo)致項(xiàng)目無(wú)法執(zhí)行。
a.評(píng)估需求變更與原需求的差異
首先，明確需求變更的原因—是需求提出方進(jìn)行需求變更還是內(nèi)部原因?qū)е滦枨笞兏Ｆ浯?，需求變更后與原先需求定義是否有較大沖突，如有較大沖突，評(píng)估變更前后的利害關(guān)系，哪個(gè)更能有效達(dá)目的/效果，按評(píng)估結(jié)果執(zhí)行；如無(wú)較大沖突，評(píng)估與原需求的緊急程度及時(shí)間安排，進(jìn)行需求變更解決。最終，有效記錄需求變更計(jì)劃及原因，定期進(jìn)行總結(jié)，評(píng)估相關(guān)解決方案。
b.評(píng)估需求變更導(dǎo)致的結(jié)果
如需求變更后，利大于弊，允許變更，但需按照需求變更的規(guī)程執(zhí)行，以防出現(xiàn)意外情況產(chǎn)生不必要的責(zé)任，失去相關(guān)控制。如需求變更后，利小于弊，拒絕變更.
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
優(yōu)作|南非開普敦MUTI工作室設(shè)計(jì)賞析
BIGD
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
MUTI是一家位于南非開普敦的創(chuàng)意工作室，他們的業(yè)務(wù)范圍非常廣，為許多品牌企業(yè)都提供過(guò)服務(wù)，運(yùn)動(dòng)品牌如耐克，服裝品牌如優(yōu)衣庫(kù)，手機(jī)品牌如三星，雜志如Monocle 雜志、西捷航空雜志等等都有過(guò)他們的影子，同時(shí)他們的設(shè)計(jì)能力綜合，從插畫到字體設(shè)計(jì)再到Icon圖標(biāo)設(shè)計(jì)都十分強(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
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
一定會(huì)成為優(yōu)秀設(shè)計(jì)師的朋友們！
最近劇真的太多了，
小編還沒(méi)從衛(wèi)龍女孩的隊(duì)伍里脫離出來(lái)，
如懿傳就已經(jīng)安排上了。
而且小編最近又發(fā)現(xiàn)一部新?。?/span>
《天盛長(zhǎng)歌》
對(duì)比《如懿傳》大紅大綠的配色
（雖然浮夸的色彩更符合乾隆時(shí)期的蜜汁審美）
它的配色和畫風(fēng)簡(jiǎn)直良心的不要！
而且官宣也很佛系，
總之就是沒(méi)見著過(guò)啥大動(dòng)靜，
可是豆瓣評(píng)分居然比《延禧攻略》還要高
雖然憑借“IP+超級(jí)卡司+大制作”
獲得了較高的評(píng)分，
但《天盛長(zhǎng)歌》自播出后就反響平平，
收視一度撲街，
雖然小編還沒(méi)看劇不知道它撲街的原因，
但單單從劇照和海報(bào)就能看出
劇組是真的下功夫了！！
服裝精致，布景豪華，
還專門使用了電影的寬畫幅比
場(chǎng)面變得更加宏大更有代入感！
官方發(fā)布的色卡看起來(lái)也很高級(jí)
海報(bào)也值得一看~
主題海報(bào)
- 壁影成雙版海報(bào) -
這世間自有百態(tài)浮生，千種際遇，萬(wàn)般遼闊山河。
看似光影闌珊，皆在你我眸間。
微雨細(xì)語(yǔ)版海報(bào)
感謝這亭外風(fēng)雨漫天，你我才能在這亭中獨(dú)處片刻。
此愛(ài)隔山海，山可平，?？稍剑?/span>
此義重天地，天有道，地有情。
家國(guó)在心，蒼生在肩，不敢忘，莫能負(fù)。
眸繪天光版海報(bào)
天高地闊，可納日月山河于懷，可藏情深意篤于心。
此念，不滅。
丹心一片，不曾忘情忘恩忘前塵，惟愿守己守家守蒼生。
此意，可鑒。
風(fēng)霜不顧，只求守得云開；此身不吝，但求所愿得償。
此途，不忘。
趁年華歲月，追隨不棄；經(jīng)世事不易，伴君功成。
此生，不枉。
愿安一隅，享人世繁華；縱有風(fēng)雨，念郎君順?biāo)臁?/span>
此求，可得。
扎心劇照海報(bào)
在光影間蓬勃而生，于明暗外纖毫畢現(xiàn)。
君有箴言相贈(zèng)，吾自銘感于心。
開播倒計(jì)時(shí)海報(bào)
圓融不爭(zhēng)，鋒霜無(wú)畏。一方明鏡如水，此情，不負(fù)。
距離相遇，還有3天
善惡得報(bào)，世存公道。一盞心燈如舊，此志，不改。
距離相識(shí)，還有2天。
六合既定，共享安寧。一卷長(zhǎng)書如悟，此意，不移。
距離相知，還有1天。
熱點(diǎn)節(jié)點(diǎn)借勢(shì)海報(bào)
- 七夕 | 天盛七夕節(jié) -
看完這些海報(bào)和劇照之后，
你們有沒(méi)有被吸引到呢？
留言告訴小編吧~
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
當(dāng)我們看的PS教程越來(lái)越多、掌握的PS技巧越來(lái)越多的時(shí)候，可能就反思最初看到的教程到底是不是正確的。而今天國(guó)外精品翻譯教程就跟大家一起來(lái)看看Photoshop高手分享的10個(gè)Photoshop心得，妥妥的干貨！
1.在背景圖層上直接編輯
由于PS初學(xué)者總會(huì)犯些小錯(cuò)誤，所以大多數(shù)的Photoshop教程都會(huì)要求創(chuàng)建副本，然后在副本上進(jìn)行操作，即使出錯(cuò)都可以迅速回到原點(diǎn)，再次進(jìn)行操作。不過(guò)，如果你已經(jīng)意識(shí)到自己的每一步操作都能令作品更加完美，那就沒(méi)有需要再回到原點(diǎn)了。
選擇“圖層>新圖層>復(fù)制創(chuàng)建新圖層”，或者使用快捷鍵Ctrl+J，就可以很簡(jiǎn)單地創(chuàng)建副本。但是過(guò)多的圖層會(huì)讓圖層管理變得困難，特別是要從眾多圖層中找出目標(biāo)對(duì)象的時(shí)候，很費(fèi)時(shí)間。因此，如果有人說(shuō)創(chuàng)建副本或者弄多幾個(gè)圖層時(shí)，其實(shí)你需要想想再進(jìn)行操作。
如果只是對(duì)單一背景圖層進(jìn)行操作，就可以完全不管圖層面板，以及擔(dān)心創(chuàng)建副本影響PS運(yùn)行速度的事情。當(dāng)然，這聽起來(lái)很簡(jiǎn)單，但要改變長(zhǎng)期形成的操作習(xí)慣以及知道什么時(shí)候需要?jiǎng)?chuàng)建副本卻不是那么容易的。所以操作前，先想想接下來(lái)的動(dòng)作，盡量避免無(wú)用功。
2.用好橡皮擦工具
橡皮擦與圖層蒙版的功能比較類似，通過(guò)“擦掉”和“遮蔽”，就能將不想要的像素不顯示出來(lái)。而圖層蒙版的優(yōu)點(diǎn)在于通過(guò)改變蒙版顏色的不透明度，達(dá)到不同程度的遮蔽效果。所以在大多數(shù)情況下都比較建議選用圖層蒙版，因?yàn)槊砂嫦碌膱D像仍在，只是被“遮蔽”，只要改變黑色的深淺就將圖像顯示出來(lái)。
圖層蒙版的廣泛應(yīng)用例子很多。比如，在使用新增調(diào)整圖層時(shí)，也會(huì)發(fā)現(xiàn)選擇“圖層>新增調(diào)整圖層>”，然后隨意選擇其中一種調(diào)整圖層，都會(huì)附加一個(gè)圖層蒙版。
但是，對(duì)于橡皮擦來(lái)說(shuō)，它的功能更加直接。想象一下，當(dāng)你拿著一支筆和一張紙，如果想去掉某些圖案，最直接的想法就是擦掉，而擦掉的后果就是原來(lái)的圖案將永不存在。而在Photoshop中，橡皮擦事實(shí)上就延續(xù)著我們?cè)趯?shí)際畫畫過(guò)程中的習(xí)慣。
從上面的比較中可以看出，橡皮擦和圖層蒙版最大的不同點(diǎn)在于橡皮擦是真實(shí)地去掉圖像，而蒙版只是遮蔽圖像。而蒙版的靈活性同時(shí)也是缺點(diǎn)之一，一旦黑色的深淺沒(méi)有控制好，不能完全遮蔽圖像，就會(huì)影響整個(gè)作品，而橡皮擦是百分之一百去掉的。所以當(dāng)確定需要完全去掉圖像時(shí)，請(qǐng)勇敢地選擇橡皮擦。
3.不要忘記魔棒工具
關(guān)于創(chuàng)建選區(qū)，很多人第一時(shí)間都會(huì)想到鋼筆工具、快速選擇、套索工具等等，而魔棒工具往往被人們忽略掉。魔棒就如它的名字一樣，充滿魔力，輕輕一點(diǎn)擊，就會(huì)自動(dòng)將與點(diǎn)擊位置顏色基本相同的區(qū)域選擇起來(lái)，并且可以通過(guò)設(shè)置容差值，調(diào)整選擇范圍。在圖像存在明顯邊緣的情況下，魔棒工具可以說(shuō)是最佳選項(xiàng)。
為了摳圖或者創(chuàng)建蒙版，往往需要?jiǎng)?chuàng)建選區(qū)，不需要局限在某種摳圖手段，根據(jù)圖像實(shí)際情況，選擇自己拿手的是最優(yōu)選項(xiàng)。
4.鍵盤快捷鍵會(huì)讓人錯(cuò)過(guò)一些發(fā)現(xiàn)
在Photoshop教程中，時(shí)常提及通過(guò)使用鍵盤快捷鍵進(jìn)行操作。比如，通過(guò)復(fù)制目標(biāo)圖層來(lái)創(chuàng)建新圖層，快捷鍵是Ctrl+J，菜單選擇是“圖層>新建>通過(guò)拷貝的圖層”。
使用快捷鍵的確能提高操作效率，但同時(shí)也會(huì)讓你錯(cuò)過(guò)一些學(xué)習(xí)的機(jī)會(huì)。當(dāng)你使用快捷鍵進(jìn)行操作的時(shí)候，就不會(huì)想從主場(chǎng)單中選擇“圖層>新建”，然后就不會(huì)知道存在另外一種方式：“通過(guò)剪切的圖層”——原圖層選區(qū)內(nèi)的像素剪切到新圖層中，這里包含了剪切和創(chuàng)建新圖層兩步操作，而“通過(guò)剪切的圖層”一步就能完成。
并且Photoshop中還提供了自定義鍵盤快捷鍵的功能，選擇“編輯>鍵盤快捷鍵”，所以不讓只是遵循教程提供的一種方法，嘗試一下別的，可能會(huì)更加有趣。
5.圖層樣式按需設(shè)置
在應(yīng)用圖層樣式的時(shí)候，會(huì)注意到圖層樣式已經(jīng)具有默認(rèn)設(shè)置，而且這些默認(rèn)設(shè)置通?！耙膊徊睢?。因?yàn)檫@些默認(rèn)設(shè)置是Adobe經(jīng)過(guò)長(zhǎng)時(shí)間研發(fā)和改良，并且隨著時(shí)間的發(fā)展也在逐步完善。圖層樣式中，描邊的默認(rèn)顏色是紅色，而現(xiàn)在的顏色是黑色。其實(shí)默認(rèn)圖層樣式是相對(duì)的，它是Adobe長(zhǎng)年累月的應(yīng)用積累得出的。而對(duì)于Photoshop使用者，可以在各種教程的指導(dǎo)下，嘗試各種設(shè)置選項(xiàng)，調(diào)試各種效果。
就如下面的文字的投影效果都很漂亮。單從效果是不知道這些漂亮的背后是怎么操作，如果點(diǎn)擊打開圖層樣式就會(huì)發(fā)現(xiàn)，這些投影都有各自的角度。所以，下次應(yīng)用圖層樣式的時(shí)候考慮一下實(shí)際應(yīng)用需求。
6.名字只是喚起記憶的符號(hào)
在處理數(shù)量不多圖層時(shí)，我們可以不用怎么注意命名。當(dāng)圖層數(shù)量越來(lái)越多的時(shí)候，可以通過(guò)刪減不必要的圖層數(shù)量，簡(jiǎn)化圖層結(jié)構(gòu)，然后結(jié)合適當(dāng)?shù)拿绞剑M(jìn)一步優(yōu)化對(duì)圖層管理。對(duì)于圖層命名可能會(huì)存在一個(gè)誤區(qū)，就是命名描述得越詳細(xì)越好。要記住，命名只是一個(gè)符號(hào)，主要區(qū)別于其他圖層，具有大致的特征就可以，不然混含顏色、內(nèi)容描述的命名組合會(huì)讓人看到發(fā)暈。
在Photoshop中，當(dāng)對(duì)一個(gè)圖層進(jìn)行命名的時(shí)候，按著Tab鍵就可以對(duì)下個(gè)圖層進(jìn)行命名，可以說(shuō)對(duì)每個(gè)圖層命名是很容易的，但并不是沒(méi)創(chuàng)建都要花一番心血弄個(gè)命名體系。就如圖層不多的時(shí)候，采用默認(rèn)命名方式“圖層1”、“圖層2”或者“圖層2副本”，就可以滿足需求。如果是頭條文字圖層，可以考慮命名為“背景文字”。當(dāng)選用素材時(shí)，就不用將素材的引用名稱都包含到圖層命名中，相反可能命名得奇葩一點(diǎn)，可能效果會(huì)更加好。
7.PS離不開鼠標(biāo)
現(xiàn)在你們?cè)谟檬裁礉L動(dòng)翻閱著這篇文章呢，是手機(jī)的觸摸屏還是鼠標(biāo)滾輪，或者筆記本上的觸控板？在任何情況下，都需要清楚知道屏幕翻動(dòng)的方式。如今隨著輸入設(shè)備的發(fā)展，越來(lái)越多教程在推崇試用數(shù)位板等壓力感應(yīng)式輸入設(shè)備。
壓力感應(yīng)式輸入設(shè)備與鼠標(biāo)各有各優(yōu)點(diǎn)。使用觸控板或者數(shù)位板時(shí)，就像畫畫一樣拿起畫筆，在Photoshop上畫出來(lái)。而鼠標(biāo)雖然已經(jīng)發(fā)明使用很長(zhǎng)時(shí)間了，但對(duì)手掌來(lái)說(shuō)，仍然是最完美的定點(diǎn)設(shè)備。如果拿起觸控筆，操作方式將會(huì)完全跟鼠標(biāo)不同。
圖像是由一個(gè)個(gè)細(xì)小像素組成，在精細(xì)度控制方面鼠標(biāo)具有無(wú)與倫比的操作特性，也是觸控類輸入設(shè)備所難以比擬的。因此，在選用輸入設(shè)備方面建議優(yōu)先選用鼠標(biāo)。
8.不要怕高分辨率
有時(shí)候我們會(huì)聽到說(shuō)圖像的分辨率很重要，太小就會(huì)顯示不清楚，必須采用高分辨率，然后就開始聽到關(guān)于DPI、PPI的各種解釋，就會(huì)相信不能隨便使用從網(wǎng)上下載的圖像，因?yàn)樗鼈兊姆直媛识继突蛘叱叽缣 ?
圖像分辨率是指單位英寸中所包含的像素點(diǎn)數(shù)。隨著圖像技術(shù)的發(fā)展，理論上圖像分辨率會(huì)越來(lái)越大。但是為什么一定要采用高分辨率呢？顯示設(shè)備的日漸發(fā)展是一個(gè)原因，另一種結(jié)論是網(wǎng)絡(luò)資源輸出的控制。我們都知道圖像素材作為一種網(wǎng)絡(luò)資源，具有它的使用價(jià)值。當(dāng)市場(chǎng)的使用要求比較高的時(shí)候，先拋出低質(zhì)量的資源，再通過(guò)一些手段控制高質(zhì)量資源的輸出。
我們不用太多理會(huì)策略的東西，只要知道怎么解決就行！下面將會(huì)介紹怎么通過(guò)Photoshop來(lái)克服低分辨率的問(wèn)題。
Step 1
打開Photoshop，選擇“圖像>圖像大小”，設(shè)置圖像各自增大200%，勾選重新取樣，設(shè)置保留細(xì)節(jié)（擴(kuò)大）。
Step 2
選擇“濾鏡>銳化>USM銳化”，設(shè)置數(shù)量、半徑、閥值，將放大產(chǎn)生的模糊或者失真盡量消除。這樣圖像尺寸就是原來(lái)的兩倍，并且不需要高分辨率。學(xué)會(huì)了趕緊試試吧。
9.控制Photoshop的內(nèi)存使用空間
我們都知道Photoshop對(duì)電腦性能要求比較高，對(duì)CPU、內(nèi)存的占用率也是比較大的。在之前的學(xué)習(xí)中，大家可能也知道一些關(guān)于優(yōu)化性能、提高Photoshop運(yùn)行效率的技巧。
但是，為什么Photoshop需要占用這么大的CPU和內(nèi)存呢？除了處理圖像之外，Photoshop還可能利用額外的內(nèi)存或者CPU性能進(jìn)行畫面捕捉、記錄行為等。但是這些與我們使用Photoshop基本無(wú)關(guān)，選擇“編輯>首選項(xiàng)>性能”，在內(nèi)存使用情況的設(shè)置框中調(diào)節(jié)讓Photoshop使用的內(nèi)存空間。讓Photoshop使用的內(nèi)存空間越少，可讓PS進(jìn)行額外記錄捕捉的空間就越少。
PS：Photoshop是否進(jìn)行額外的畫面捕捉或者記錄就不得而知，但是有個(gè)秘密畫面可以看一下：關(guān)閉PS重新啟動(dòng)，然后按著Ctrl，點(diǎn)擊“幫助>關(guān)于Photoshop”，這時(shí)會(huì)出現(xiàn)一個(gè)秘密畫面。
10.合并圖層節(jié)省空間
使用Photoshop過(guò)程往往會(huì)產(chǎn)生巨大的PSD文件。這些PSD文件包含非常多的圖層，常占用超大的硬盤空間，如果想將這樣的超級(jí)文件發(fā)送給其他人，基本上不用考慮E-mail，如果扔到U盤或者移動(dòng)硬盤傳輸，就要慢慢等著進(jìn)度條爬滿。
合并圖層工具作為一個(gè)不完全的解決方案，可以將PSD超級(jí)文件縮減為小文件。要注意合并過(guò)程會(huì)將隱藏圖層扔掉哦。
下面是一個(gè)簡(jiǎn)單的例子：原PSD文件399MB，經(jīng)過(guò)合并后，體積縮小至27.8MB，縮減比例達(dá)到93%，并且出圖質(zhì)量與原文件相差無(wú)幾，有需要的朋友要記住了哦！
小結(jié)
本期的國(guó)外精品PS教程就到這里結(jié)束啦。文章提及的小技巧雖然比較簡(jiǎn)單，但是對(duì)我們拓展Photoshop使用思路是有一定的幫助，特別是對(duì)一些PS工具的使用方法上也會(huì)有新的了解。感興趣的朋友可以記錄下來(lái)，一一練習(xí)吸收。希望大家能通過(guò)這次的PS教程進(jìn)一步提高PS技能，打造出更加出色的作品。
圖00
圖01
圖02
圖03
圖04
圖05
圖06
圖07
圖08
圖08
圖09
圖11
圖12
圖13
圖14
圖15
圖16
圖17
圖18
圖19
圖20
圖21
圖22
圖23
圖24
藍(lán)藍(lán)設(shè)計(jì)( www.sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.sillybuy.com