上一期了解了Sketch的基本功能丁溅，這期我們就設(shè)計(jì)一張簡(jiǎn)單的APP登錄界面贴见。具體了解一下功能的用法佑力。由于是入門所以過程會(huì)寫的非常詳細(xì)筋量。
在設(shè)計(jì)之前我們需要先分析這個(gè)界面的功能及交互湖苞。
1拯欧、該界面出現(xiàn)在APP啟動(dòng)頁(yè)之后
2、登錄方式有兩種财骨，第一種用戶名/手機(jī)號(hào)和密碼登錄镐作；第二種第三方登錄。
3隆箩、有［賬號(hào)］和［密碼］就會(huì)有［找回密碼］的功能该贾。
4、有［注冊(cè)］入口捌臊，如果APP不要求必須登錄就能使用就要有［隨便看看］的入口杨蛋。
了解這些后，我們就會(huì)對(duì)這個(gè)頁(yè)面有一個(gè)大致框架（工作中，這些需求會(huì)有產(chǎn)品經(jīng)理明確提出并和設(shè)計(jì)一起討論）
設(shè)計(jì)頁(yè)面
一逞力、新建Sketch文件曙寡，添加畫板
新建Sketch文件并添加畫板［Insert>Artboard快捷鍵A］，選擇A工具后右側(cè)會(huì)出現(xiàn)Sketch提供的多個(gè)IOS機(jī)型寇荧，選擇iphone 6（375*667px 這是@1x設(shè)計(jì)尺寸）举庶。選中畫板名稱雙擊（快捷鍵com+R）重命名。
二揩抡、添加狀態(tài)欄
選擇File > New From Template > ios UI Design户侥，可能會(huì)彈出一個(gè)彈框提示：Some Fonts in this Document are Missing（字體缺失提醒）選擇OPen打開即可。
然后你就會(huì)看到iOS的系統(tǒng)UI（sketch3.7.1版本中IOS系統(tǒng)UI尺寸是iphone6捅膘，所以我們剛才建立畫板時(shí)選擇了iphone6）添祸，選擇所需要的狀態(tài)欄。粘貼復(fù)制到登錄的畫板中寻仗，位置：頂部。
注：在圖層中可看到這個(gè)狀態(tài)欄前的有一個(gè)類似刷新的圖標(biāo)凡壤，這個(gè)就是［符號(hào)］的標(biāo)志署尤，雙擊可進(jìn)入符號(hào)的頁(yè)面，點(diǎn)擊［Return to Instance］或選擇頁(yè)面可以返回［Page 1］
二亚侠、添加導(dǎo)航欄
這里要普及一下IOS系統(tǒng)尺寸曹体。以iphone6為例，頁(yè)面375*667x硝烂，狀態(tài)欄20px箕别，導(dǎo)航欄45px，標(biāo)簽欄49px
接下來我們要在導(dǎo)航欄上加入［隨便看看］按鈕
1滞谢、添加矩形（快捷鍵R）尺寸：375*45px串稀，填充色：默認(rèn)，描邊：不勾選狮杨，位置：緊貼狀態(tài)欄
2母截、添加文字（快捷鍵T）輸入［隨便看看］。
3橄教、畫箭頭icon清寇。
第一步：畫一個(gè)圓形［快捷鍵O］Size（尺寸）：14*14px，Borders（描邊）＃333333护蝶、inside华烟、0.5px。
第二步：畫出兩個(gè)矩形［快捷鍵R］擺出“ ┛”這樣的位置關(guān)系持灰，然后選擇Union［布爾運(yùn)算］將兩個(gè)圖形合并后盔夜，進(jìn)行Transform［旋轉(zhuǎn)］-45°至“>”這個(gè)角度。
第三步：將畫好的“>”箭頭Flatten［合并］然后和第一步畫的圓進(jìn)行上下左右對(duì)齊，并編組［com＋G］比吭。
說明：1绽族、這里之所以把描邊設(shè)置成0.5px是因?yàn)槲易龅膱D是開發(fā)尺寸，也就是設(shè)計(jì)尺寸的二分之一衩藤。這樣可以提高研發(fā)人員查看原文件的效率吧慢，同時(shí)也能提高雙方溝通時(shí)信息傳遞的準(zhǔn)確性。2赏表、合并形狀的主要目的是重塑圖形空間區(qū)域检诗，但是之前的操作過程將無(wú)法返回。
4瓢剿、文字于箭頭組合擺放
將文字于箭頭水平中心對(duì)齊逢慌，間隔8px，編組后放置在導(dǎo)航欄位置间狂，上下居中攻泼，靠左16px。最后將導(dǎo)航欄的顏色透明度改成0%鉴象。
三忙菠、添加Logo
這是在網(wǎng)上找的一個(gè)logo，接下來臨摹一下纺弊。
1牛欢、新建背景圓［快捷鍵O］，72＊72px淆游；填充＃4A4A50傍睹。
2、繪制logo圖形犹菱。新建矩形16*27px拾稳，填充＃FFFFFF；雙擊圖形進(jìn)入編輯點(diǎn)狀態(tài)已亥，選擇底部?jī)蓚€(gè)點(diǎn)設(shè)置圓角8px熊赖；
畫一個(gè)圓尺寸：30*30px，位置：于矩形左對(duì)齊虑椎，且半個(gè)圓在矩形的上邊震鹉；再畫一個(gè)圓尺寸：24*24px，這里隨便填充一個(gè)紅色半透明設(shè)置為50%捆姜，位置：頂部于剛才畫的圓齊平传趾，左側(cè)緊挨矩形。選中這兩個(gè)圓選擇布爾運(yùn)算泥技，減去頂部的圓浆兰。同理，在畫一個(gè)矩形進(jìn)行布爾運(yùn)算減去右側(cè)多余的圖形。
最后畫出兩個(gè)圓形簸呈，分別為大虚哦：15*15px，位置：頂部離圓形6px蜕便，左側(cè)離矩形4px劫恒。另一個(gè)大小：18＊18px轿腺，位置：頂部距離剛才畫的圓3px两嘴，左側(cè)距離矩形3px。最后將畫好的logo編組族壳，于背景上下左右居中對(duì)齊憔辫。然后再將logo和背景圓一起編組，位置：畫布左右居中對(duì)齊仿荆，頂部距離導(dǎo)航欄40px贰您。
四、添加輸入框及登錄按鈕
1赖歌、畫一個(gè)矩形327*40px枉圃，填充：＃FFFFFF；內(nèi)描邊：-0.5px庐冯，顏色＃e0e0e0。
添加文字：用戶名/手機(jī)號(hào)坎穿；字號(hào)：14px展父；顏色＃999999。對(duì)齊：于輸入框左對(duì)齊玲昧，上下居中栖茉。
同理畫出密碼輸入框。［用戶名/手機(jī)號(hào)輸入框］上下距離［logo］和［密碼輸入框］均為12px孵延；
添加登錄按鈕：矩形327*44px吕漂，圓角2px；填充：＃4A4A50尘应。添加文字登錄惶凝，字號(hào)：16px；顏色＃FFFFFF犬钢。于矩形上下左右居中苍鲜。將文字和矩形編組，位置：于畫板左右居中玷犹，距離輸入框24px混滔。
五、添加常規(guī)操作
添加［注冊(cè)、忘記密碼坯屿、第三方登錄］常規(guī)操作油湖。
1、輸入文字［注冊(cè)］字號(hào)：14x领跛；顏色：＃526792（自定義的一個(gè)鏈接色）乏德；位置：于登陸按鈕左對(duì)齊，頂部距離16px隔节。同理鹅经，添加［忘記密碼］位置：于登陸按鈕右對(duì)齊。
2怎诫、第三方登錄
輸入文字［第三方登錄］字號(hào)：13px瘾晃；顏色＃999999。畫一個(gè)矩形60*0.5px幻妓；顏色＃e0e0e0蹦误，距離文字間距14px，上下居中肉津，左右各一個(gè)强胰。將三個(gè)元素編組。
添加圖標(biāo)妹沙，畫三個(gè)圓偶洋，大小：34*34px距糖；顏色：＃32C23E玄窝、＃1DB5ED、＃FA5A51悍引。從http://www.iconfont.cn/中輸入關(guān)鍵詞恩脂，微信、QQ趣斤、微博下載對(duì)應(yīng)SVG格式的圖標(biāo)俩块。用Sketch打開，復(fù)制粘貼畫板中浓领，調(diào)整大小放置在對(duì)應(yīng)的圓形中玉凯。每個(gè)圖標(biāo)之間間隔30px，距離畫板底部和第三方登錄文字均為24px镊逝。
六壮啊、導(dǎo)出
選擇畫板，點(diǎn)擊屬性區(qū)右下角Make Exportable撑蒜，勾選Background Color可以多倍圖同時(shí)導(dǎo)出歹啼，在電腦上預(yù)覽玄渗，只需導(dǎo)出@1x，如果要放置到手機(jī)上看可以選擇添加@2x狸眼。點(diǎn)擊［Export登錄］按鈕導(dǎo)出即可藤树。（說明：設(shè)計(jì)的是iphone6的尺寸，所以圖片放在這個(gè)機(jī)型上看效果最佳拓萌，或者直接連接Mirror直接查看岁钓，關(guān)于Mirror的使用之后再說。）
小結(jié)：
軟件的學(xué)習(xí)沒有太多的技巧微王，特別現(xiàn)在網(wǎng)上有很多現(xiàn)成的教程屡限，只要自己有心學(xué)，沒什么難的炕倘，多練習(xí)就可以钧大。
