推荐给 iOS 设计师的工具和资源
openkk 13年前
<p> 苹果 App Store 的应用总下载量近日刚突破 250 亿，并继续上升中。毫无疑问，iOS 开发一直是热门话题，这是一个制造了数亿美元的产业。一个成功的应用，需要良好的规划。在理解应用开发流程中，绘制线框图是规划阶段重要一环，也用于确定 可用性可能存有的问题及技术潜在问题。素描和原型，能让你更好的理解要你的应用程序。如果不是自己的项目，是给客户做的，那也方便和客户解释沟通。</p> <p> 如果你是一位设计师或开发人员，准备步入 iOS 开发，那这里收集了你需要的工具。本文并不涵盖 iOS 教程，只偏重线框图工具和视图资源。</p> <p> <strong>1. Sketch Pad 素描垫</strong></p> <p> 就我个人而言，我更喜欢用纸笔来画图。可以很快添加、修改和擦除。如果你也偏爱手绘，那下面这个素描垫合集对你很有用了。</p> <p> ① <a href="/misc/goto?guid=4958332220623669266" rel="nofollow" target="_blank">iPhone Wireframe Templates for Sketching</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/df1b68565bef0d8e67a8e212116c0e8a.jpg" width="500" height="250" /></p> <p style="text-align:left;"> Interactive Logic 出的素描垫。有两种布局，各自又有两个格式：PDF 和 Viso (VSD) 。</p> <p> ② <a href="/misc/goto?guid=4958332221431404880" rel="nofollow" target="_blank">iPhone Idea Sheet</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/7c3be9b51c51fac93013b958ce9d6f9c.jpg" width="500" height="250" /></p> <p> ③ <a href="/misc/goto?guid=4958332222225220195" rel="nofollow" target="_blank">iPhone Application Sketch Template</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/bac28da6bb73129219042b0496e6eac3.jpg" width="500" height="250" /></p> <p style="text-align:center;"> 带网格的 iPhone 素描垫</p> <p> ④ <a href="/misc/goto?guid=4958332223024310676" rel="nofollow" target="_blank">iPad Idea Sheet</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/78d0eccd87ae72d1a3024d2d3e40ac2d.jpg" width="500" height="250" /></p> <p style="text-align:center;"> iPad 素描板</p> <p> ⑤ <a href="/misc/goto?guid=4958332223809420617" rel="nofollow" target="_blank">iPad Application Sketch Template</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/567ff6aa80ce8d77d4b555c497b50777.jpg" width="500" height="250" /></p> <p style="text-align:center;"> 带网格的 iPad 素描垫</p> <p> ⑥ <a href="/misc/goto?guid=4958332224611376142" rel="nofollow" target="_blank">High Level iPad App Wireframing</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/7e337e532d6feab14c9a062eb977a291.jpg" width="500" height="250" /></p> <p style="text-align:center;"> 一个高级 iPad 应用线框图，还有可以详解 iPad 的屏幕信息的表单。</p> <p> <strong>2. UI 模版</strong></p> <p> UI 模版是快速做原型和画线框图的最佳工具。</p> <p> ① <a href="/misc/goto?guid=4958332225407605329" rel="nofollow" target="_blank">iPhone GUI PSD (iPhone 4S)</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/1d048203f2707ba68102615b0a4035e7.jpg" width="500" height="250" /></p> <p style="text-align:center;"> iOS 5 Photoshop 模板。</p> <p> ② <a href="/misc/goto?guid=4958332226211158864" rel="nofollow" target="_blank">OmniGraffle iPhone Stencil</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/09b2669fe21cdc8a9f60591993e0c54c.jpg" width="500" height="250" /></p> <p> ③ <a href="/misc/goto?guid=4958332227001797015" rel="nofollow" target="_blank">iPad GUI PSD v2</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/aab644358c015b6de22ed984cfe28df1.jpg" width="500" height="250" /></p> <p> ④ <a href="/misc/goto?guid=4958332227796264353" rel="nofollow" target="_blank">iPad Vector GUI Elements</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/6ce5a7f78fac90e852aee917520468d4.jpg" width="500" height="250" /></p> <p> ⑤ <a href="/misc/goto?guid=4958332228599801803" rel="nofollow" target="_blank">OmniGraffle iPad Stencil</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/1dc066d77da5a0318cdbaa5deeb8e2ae.jpg" width="500" height="250" /></p> <p> ⑥ <a href="/misc/goto?guid=4958332229401173585" rel="nofollow" target="_blank">iPad Sketch Elements</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/c8d6e62970c1bda5bc299a83d34d227e.jpg" width="500" height="250" /></p> <p> <strong>3. 工具条图标</strong></p> <p> 在 iOS 中，图形、符号和简单的图标是很受欢迎的。如今事实上很多网页设计师开始把它们包含到设计中去。使用合适的图标，最准备描绘动作的意思，以免误导用户。下面有大量可选择的图标，确信你在其中可以找到适合你应用的图标。</p> <p> ① <a href="/misc/goto?guid=4958332230194811893" rel="nofollow" target="_blank">iPhone icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/3470b4a9111e321acd43e9d3122fc108.jpg" width="500" height="250" /></p> <p> ② <a href="/misc/goto?guid=4958332230996537095" rel="nofollow" target="_blank">200+ Exclusive Free Icons: “Reflection”</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/67a158951f7c056e1fa28070daf5eb1f.jpg" width="500" height="250" /></p> <p> ③ <a href="/misc/goto?guid=4958332231788927000" rel="nofollow" target="_blank">260 free vectors icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/db4f978e1a92031dbf9e11647b255d82.jpg" width="500" height="250" /></p> <p> ④ <a href="/misc/goto?guid=4958332232593273748" rel="nofollow" target="_blank">Tabs – Interface Icons for iOS & Designers</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/0c6261c3c7d02790fc1e93ab81f2cf90.jpg" width="500" height="250" /></p> <p> ⑤ <a href="/misc/goto?guid=4958332233393373262" rel="nofollow" target="_blank">20 Minimal ecommerce icons (vector PSD)</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/ff14b3f95dcd4104db605be5818d613d.jpg" width="500" height="250" /></p> <p> ⑥ <a href="/misc/goto?guid=4958332234179150102" rel="nofollow" target="_blank">Token Icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/b1711eb0f4e15a0c98766df58139e0fc.jpg" width="500" height="250" /></p> <p> ⑦ <a href="/misc/goto?guid=4958332234981049483" rel="nofollow" target="_blank">Meta Icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/c66032736856fd10bf7e8154366ff8d0.jpg" width="500" height="250" /></p> <p> ⑧ <a href="/misc/goto?guid=4958332235780832333" rel="nofollow" target="_blank">Free Wireframe Toolbar Icons for GUI designers</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/c1bed0eee40e08747d4ecaa5f5d6f762.jpg" width="500" height="250" /></p> <p> ⑨ <a href="/misc/goto?guid=4958332236571708607" rel="nofollow" target="_blank">Glyphish icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/1329fdd0d770ef143378174e351fffc8.jpg" width="500" height="250" /></p> <p> ⑩ <a href="/misc/goto?guid=4958332237377684068" rel="nofollow" target="_blank">Pixicus Icon Set: 106 Pixel Perfect Icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/9679f0efcb8c74e916d1411add8e0a95.jpg" width="500" height="250" /></p> <p> 11) <a href="/misc/goto?guid=4958332238182579221" rel="nofollow" target="_blank">Glyphicons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/99a4fc3f32e15bd9565976be0f0f1ef8.jpg" width="500" height="250" /></p> <p> 12) <a href="/misc/goto?guid=4958332238978938671" rel="nofollow" target="_blank">gcons – Open Source Vector Icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/e4fcc887d01e4309d00f469d2d950b65.jpg" width="500" height="250" /></p> <p> 13) <a href="/misc/goto?guid=4958332239780668349" rel="nofollow" target="_blank">Gentleface</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/b93238142170d5579b20675eb7e6de82.jpg" width="500" height="250" /></p> <p> 14) <a href="/misc/goto?guid=4958332240577960712" rel="nofollow" target="_blank">NounProject Icons</a></p> <p style="text-align:center;"><img alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/5bb949159bd07238874dc8d2f433285d.jpg" width="500" height="250" /></p> <p> <strong>4. 手势图标</strong></p> <p> 在线框图、演示稿和文档中，手势图标几位有用。在多点触摸系统中有个问题，我们总是试图去猜测何种触摸动作适用于应用程序，故而有个解决方案就是有一个合适的文档，文档上正确的符合或图标，用于指示何种多点触摸手势可用。下面这个列表中包括了不同风格的手势图标。</p> <p> ① <a href="/misc/goto?guid=4958332241391292303" rel="nofollow" target="_blank">Touchscreen Gesture Icons</a></p> <p style="text-align:center;"><img title="Touchscreen Gesture Icons" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/ad7013c5211dd7b091d3b8a49a7c6212.jpg" width="500" height="250" /></p> <p> ② <a href="/misc/goto?guid=4958319602946451229" rel="nofollow" target="_blank">Touchscreen Stencils</a></p> <p style="text-align:center;"><img title="Touchscreen Stencils" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/d22393f4fba72cc564c14640e21a839d.jpg" width="500" height="250" /></p> <p> ③ <a href="/misc/goto?guid=4958319599792837358" rel="nofollow" target="_blank">Gesturecons</a></p> <p style="text-align:center;"><img title="Gesturecons" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/6c8fbf2cf26b7bc8bb9b97c3cf0aa7b5.jpg" width="500" height="250" /></p> <p> ④ <a href="/misc/goto?guid=4958327878127698735" rel="nofollow" target="_blank">Touch Gesture Reference</a></p> <p style="text-align:center;"><img title="Touch Gesture Reference" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/7801f30ca82125bf29beb17f9c96ba42.jpg" width="500" height="250" /></p> <p> ⑤ <a href="/misc/goto?guid=4958332244394839013" rel="nofollow" target="_blank">Redesigned Gesture Icons</a></p> <p style="text-align:center;"><img title="Gesture Icons" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/bee02cfa4329375d0e980f41a5fe9252.jpg" width="500" height="250" /></p> <p> ⑥ <a href="/misc/goto?guid=4958319601380531305" rel="nofollow" target="_blank">Open Source Gestures</a></p> <p style="text-align:center;"><img title="Open Source Gestures" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/ebf76e738ebe345f85a48a4ad81e3b0c.jpg" width="500" height="250" /></p> <p> ⑦ <a href="/misc/goto?guid=4958319602166238732" rel="nofollow" target="_blank">Gesturcons</a></p> <p style="text-align:center;"><img title="Gesturcons" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/193a458bc562dea261f9ace6cba03125.jpg" width="500" height="250" /></p> <p> ⑧ <a href="/misc/goto?guid=4958319600590376990" rel="nofollow" target="_blank">Multitouch Gesture Icons</a></p> <p style="text-align:center;"><img title="Multitouch Gesture Icons" alt="推荐给 iOS 设计师的工具和资源" src="https://simg.open-open.com/show/c2014025572a9abd8152371a2cd525fd.jpg" width="500" height="250" /></p> <p> 英文原文：<a href="/misc/goto?guid=4958332247402052849" rel="nofollow" target="_blank">Kevin Liew</a> 编译：<a href="/misc/goto?guid=4958185140659301754" target="_blank">伯乐</a>在线 – <a href="/misc/goto?guid=4958332248943506149" target="_blank">黄利民</a></p>