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