Sketch入門(二)練習(xí)APP登錄界面設(shè)計(jì)

上一期了解了Sketch的基本功能丁溅,這期我們就設(shè)計(jì)一張簡(jiǎn)單的APP登錄界面贴见。具體了解一下功能的用法佑力。由于是入門所以過程會(huì)寫的非常詳細(xì)筋量。

這是一種常見的登錄頁(yè)面

在設(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]

符號(hào)

二亚侠、添加導(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混滔。

輸入框設(shè)置

五、添加常規(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镊逝。

添加常規(guī)操作

六壮啊、導(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的使用之后再說。)

導(dǎo)出圖片

小結(jié):

軟件的學(xué)習(xí)沒有太多的技巧微王,特別現(xiàn)在網(wǎng)上有很多現(xiàn)成的教程屡限,只要自己有心學(xué),沒什么難的炕倘,多練習(xí)就可以钧大。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市罩旋,隨后出現(xiàn)的幾起案子啊央,更是在濱河造成了極大的恐慌,老刑警劉巖涨醋,帶你破解...
    沈念sama閱讀 216,496評(píng)論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件瓜饥,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡浴骂,警方通過查閱死者的電腦和手機(jī)乓土,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,407評(píng)論 3 392
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來溯警,“玉大人帐我,你說我怎么就攤上這事±颍” “怎么了?”我有些...
    開封第一講書人閱讀 162,632評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵谣光,是天一觀的道長(zhǎng)檩淋。 經(jīng)常有香客問我,道長(zhǎng)萄金,這世上最難降的妖魔是什么蟀悦? 我笑而不...
    開封第一講書人閱讀 58,180評(píng)論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮氧敢,結(jié)果婚禮上日戈,老公的妹妹穿的比我還像新娘。我一直安慰自己孙乖,他們只是感情好浙炼,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,198評(píng)論 6 388
  • 文/花漫 我一把揭開白布份氧。 她就那樣靜靜地躺著,像睡著了一般弯屈。 火紅的嫁衣襯著肌膚如雪蜗帜。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,165評(píng)論 1 299
  • 那天资厉,我揣著相機(jī)與錄音厅缺,去河邊找鬼。 笑死宴偿,一個(gè)胖子當(dāng)著我的面吹牛湘捎,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播窄刘,決...
    沈念sama閱讀 40,052評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼窥妇,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了都哭?” 一聲冷哼從身側(cè)響起秩伞,我...
    開封第一講書人閱讀 38,910評(píng)論 0 274
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎欺矫,沒想到半個(gè)月后纱新,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,324評(píng)論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡穆趴,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,542評(píng)論 2 332
  • 正文 我和宋清朗相戀三年脸爱,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片未妹。...
    茶點(diǎn)故事閱讀 39,711評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡簿废,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出络它,到底是詐尸還是另有隱情族檬,我是刑警寧澤,帶...
    沈念sama閱讀 35,424評(píng)論 5 343
  • 正文 年R本政府宣布化戳,位于F島的核電站单料,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏点楼。R本人自食惡果不足惜扫尖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,017評(píng)論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望掠廓。 院中可真熱鬧换怖,春花似錦、人聲如沸蟀瞧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,668評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至兆览,卻和暖如春屈溉,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背抬探。 一陣腳步聲響...
    開封第一講書人閱讀 32,823評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工子巾, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人小压。 一個(gè)月前我還...
    沈念sama閱讀 47,722評(píng)論 2 368
  • 正文 我出身青樓线梗,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親怠益。 傳聞我的和親對(duì)象是個(gè)殘疾皇子仪搔,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,611評(píng)論 2 353

推薦閱讀更多精彩內(nèi)容