iOS开源 - 复制 iOS 样式库到 Sketch 以改善、加速设计流程
<p><img src="https://simg.open-open.com/show/a1e0080e386c9253524c50ebf51b1354.png"></p> <p>I’ve decided to take styles from Xcode and do my best to replicate them for Sketch. Along the way, I documented the process of how I ended up with the result so you can look into things even further.</p> <h2><strong>UIBlurEffectStyle</strong></h2> <p>The API doesn't provide any specs for blurs, so it's a challange to replicate. For performance concerns, I understand why Apple isn't open about these specs. However, as designers I think we shuold be aware of these constraints and design with them.</p> <p>Usage</p> <ol> <li>Open UIBlurEffectStyle.sketch</li> <li>Copy style of a blur type</li> <li>Paste style to any shape</li> </ol> <p>Process</p> <ol> <li>Created a few colorful shapes to blur</li> <li>Rendered and exported all three types of blur over the shapes in Xcode: <ul> <li>extraLight</li> <li>light</li> <li>dark</li> </ul> </li> <li>Replicated each blur type in Sketch</li> </ol> <h2><strong>UIFontTextStyle</strong></h2> <p>Apple’s system fonts are designed for legibility and provide a variety of sizes which automatically react to accessibility features. You can read more about why it’s best to use system fonts on the iOS Human Interface Guidelines .</p> <p>Usage</p> <ol> <li>Open UIFontTextStyle.sketch</li> <li>Copy & Paste artboard into Sketch document</li> <li>Assign texts to a system style</li> </ol> <p>Process</p> <ol> <li>Made a list of all ten text styles: <ul> <li>Title1</li> <li>Title2</li> <li>Title3</li> <li>Headline</li> <li>Subhead</li> <li>Body</li> <li>Footnote</li> <li>Caption1</li> <li>Caption2</li> <li>Callout</li> </ul> </li> <li>Printed out the specs in Xcode (e.g. UIFontTextStyle(_rawValue: UICTFontTextStyleTitle1): .SFUIDisplay-Light, 28 )</li> <li>Used font tracking designcode.io recommends</li> </ol> <h2><strong>Get Involved</strong></h2> <p>Suggest a style</p> <ol> <li>Create anew issue</li> <li>Describe the iOS style that should be replicated</li> <li>:sparkles: Bonus: Follow the issue to provide feedback</li> </ol> <p>Leave feedback</p> <ol> <li>Create anew issue</li> <li>Mention which style you have feedback on</li> <li>:sparkles: Bonus: Follow the issue to provide feedback</li> </ol> <p>Ask a question</p> <ul> <li><a href="/misc/goto?guid=4959727504029115826" rel="nofollow,noindex">@_bgian</a></li> <li><a href="/misc/goto?guid=4959727504116486630" rel="nofollow,noindex">hi@bobby.so</a></li> <li><a href="/misc/goto?guid=4959727504193459191" rel="nofollow,noindex">Messenger</a></li> </ul> <p> </p> <p> </p> <p> </p>
本文由用户 qqpkat2 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
转载本站原创文章,请注明出处,并保留原始链接、图片水印。
本站是一个以用户分享为主的开源技术平台,欢迎各类分享!