提交需求
賽事與廣告咨詢合作,請?zhí)顚懶枨蟊韱危覀儠诘谝粫r間與您聯(lián)系!
其實設計師也可以通過xcode做交互設計!
用xcode做設計,其實沒啥不可以的,在此我只是演示下很簡單的操作,不要運用什么程序就可以完成最基本的交互設計,簡單節(jié)約時間,升至程序猿可以直接通過這個加程序后制作界面!
第一步打開xcode
選擇 single view application
注意語言選擇 swift 別的可以隨便寫!
打開后選擇main.storyboard ,右邊會出來一個頁面,有人問為啥是方的,呵呵,自動布局就是如此,習慣就好我會在后面說明,就是要在方的畫板上做設計!
拖一個imgeview,撐滿畫面
從桌面拖一張背景圖!尺寸在1200x1200左右便可,放在2x(這是入門教程,你可以不需要知道為什么照做就好)
選擇imageview然后選擇放入圖片
選擇自動布局,設置居中畫面,設置等比例縮放,設置寬度600鎖定,設定上下鎖邊!如此畫面在各種機型下就不會變形啦
所見即所得,可以設置右邊看到你調整后不同機型的平面變化,非常的方便
對你們沒有看錯,毛玻璃效果只是個控件,非常方便嘿嘿,運行下看看吧(記得 alpha調整到0.4)
點擊運行,就會彈出模擬器窗口,記得多選幾個機型!你會發(fā)現(xiàn)會自動調整布局
接下來和前面一樣,可以運用sketch或者ps畫一個圈輸出圖片放在2x上
選中圈拖到畫面上
這邊有點小復雜,首先左邊是圖層關系,所以圈是需要在最下方圖層(最下方就是最上方顯示,和ps是相反的),其次自動布局
樣式可以參考右邊參數(shù),注意view和shape都需要布局
調整字體大小,再拖入一個lable
自動布局參數(shù)
這部分可以看下之前的自動布局我就不再演示一遍了參數(shù)右邊有
好了開始做登錄和注冊的按鈕拉一個button
再復制一個按鈕,參數(shù)可按照右邊隨意修改
設置鎖2邊,2個按鈕都是如此設置
設置自動布局參考右邊參數(shù)
注冊按鈕設置
設置2個按鈕圓角,點擊+號添加
呵呵好了app啟動頁基本完成!不難吧:)
好啦開始做第2個頁面新建一個頁面
按住control后拖拽到新頁面,按鈕就可以鏈接到新頁面啦
好了后面的部分我會再第2部分介紹,大家也可以來QQ群找我:421771474!
最后放下鏈接效果吧!
大牛,別默默的看了,快登錄幫我點評一下吧!:)
登錄 立即注冊