طراحی یک نمونه برنامه کاربردی تلفن همراه برای iOS 7 :

Julia Khusainova در اینجا درباره چگونگی طراحی و ایجاد یک برنامه کاربردی iOS 7 از طریق یک سری از جدیدترین خصایص یا ویژگی های این سیستم عامل توضیحاتی را ارائه می دهد:

هدف ما به طور قطع ایجاد یک برنامه کاربردی iOS 7 با استفاده از هیجان انگیزترین خصایص سیستم عامل جدید گوشی های Apple است . سیستم عامل iOS 7  مربوط به Apple یک دید تازه را نسبت به سیستم عامل های iPhone و iPad مطرح می کند. راهنمای عمومی برای طراحی یک واسط کاربری iOS 7 را میتوان به صورت زیر خلاصه کرد:

• Flat : خطوط راهنمای Apple برای iOS 7 سادگی˓ قابل استفاده بودن و بهره گیری از یک شیوه آسان را ترویج می دهد. بسیاری از نرم افزارهای اخیرا ایجاد شده (و مطابق با سبک خاص Apple ) با یک سری از ویژگی های طراحی سطح flat design در تعامل هستند اما در عمل زیاد به کار گرفته نمی شوند. برای مثال صفحه کلید و دکمه های نشان داده شده صد در صد flat نیستند. هر حرف با زدن یک دکمه  که مطابق با تکنیک drop shadow  (تکنیک برجسته سازی تصاویر از طریق ایجاد سایه درپس زمینه دور تصویر و تغییر بعد دیداری) شکل می گیرد.این تاثیر دقیق چندین مزیت دارد به این صورت  که تفاوت  ایجاد شده در مقایسه با  شیوه flat محسوس خواهد بود.
• Colours : گرچه برنامه کاربردی بومی iOS 7 اجازه انجام چنین کاری را نمی دهند اما  بهتر است که از رنگ های روشن ˓ اشباع شده و جذب کننده برای برنامه کاربردی iOS 7 استفاده شود. نمونه ای از این ها را می توان در برنامه های کاربردی پیام رسان مشاهده کرد.
• Typography (فن چاپ): همراه با ویژگی کم حجم بودن محتوا ˓ فونت سبک  Helvetica Neue مناسب ترین است.
• )Layoutصفحه آرایی(: بر روی واسط های کاربری  کم حجم با قابلیت استفاده آسان همراه با مینیمم (یا عدم) استفاده از layer style  ها( که یک شیوه رایج برای اضافه کردن افکت هایی از قبیل drop shadow است) تکیه کنید.

کافی است یک بار ساختار اصلی سایت (wireframe ) را جای گذاری نمایید. سپس می توانید به سراغ طراحی مار بروید.

1. بوم اولیه:

در ابتدا می خواهیم که یک بوم را برای قراردادن عناصر UI بر روی آن ایجاد کنیم. یک بوم 640x1138px را در نرم افزار فتوشاپ با یک پس زمینه روشن و شفاف ترسیم کنید. انتظار می رود که این برنامه کاربردی  در دسترس ˓ قابل استفاده و محتواگرا باشد بنابراین نباید از رنگهای غیرمنطقی یا تند  برای پس زمینه استفاده کنیم.

در عوض به طور خاص از brand  colour خودمان مثل بنفش بادمجانی برای نوار بالا بهره خواهیم گرفت. نوار بالا معمولا یک ارتفاع صد پیکسلی دارد .( در هنگام راه اندازی iOS 7 نوار وضعیت یک قسمتی از واسط کاربری نوار بالاست ˓ بنابراین  این  مطلب را اگر قبلا لحاظ نکردید  ˓ حتما در زمان طراحی به خاطر داشته باشید.)

یک مستطیل ثابت با ابعاد 640x100px در بالاترین نقطه ایجاد کنید. من معمولا اززوم بالای 320% استفاده میکنم تا مطمئن شوم که طراحی pixel perfect است.

اگر میان بوردهای صفحه کلید را فرا بگیرید  عملیات تکراری را در عرض یک چشم به هم زدن میتوانید انجام دهید. کار را با یک بوم شفاف شروع کنید و بعد چندین صفحه که در قسمت های بعدی استفاده خواهند شد ایجاد نمایید.

1. مرتبط کردن عناصر:

لوگوی برنامه کاربردی منطبق بر یک سری دایره هایی است که من تصمیم گرفتم که از آنها برای آگاهی دادن به عناصر واسط کاربری استفاده کنم. به جای رعایت استاندارد سه خط عمودی برای برای منو بگذارید کمی خلاق باشیم. یک دایره 12x12px را ترسیم کنید و آن را با رنگ شماره #fff رنگ آمیزی نمایید. سه کپی از آن تهیه کنید و به صورتی که در تصویر نشان داده شده است کنار هم قرار دهید. فضای خالی بین این دایره ها 8px است.

در سمت راست قسمت setting را خواهیم داشت. می خواهیم یک چیزی شبیه آیکن setting در اینجا ایجاد نماییم به این صورت که:

یک دایره 10px را با یک جا به جایی به سمت بیرون کادر با پهنای 4px ترسیم کنید. شما میتوانید برای ایجاد این بیرون زدگی یک دایره با قطر 42px ترسیم نمایید به قطر دایره داخلی به 34px  کاهش پیدا کند. این آیکن ها را در گوشه های چپ و راست  با رعایت فاصله 20px در هر طرف به درستی قرار دهید. عنوان این صفحه ‘profile’  است. آن را درست در وسط کادر به شکل افقی درج کنید. فونت آن هم Helvetica Light با سایز 36px می باشد.

سعی کنید که از نوار بالا به عنوان پایه ای برای brand colour   ها در طراحی نرم افزار کاربردی خود استفاده نمایید. مثال های خوبی از این مورد را میتوان در نرم افزارهای کاربردی فیسبوک و اینستاگرام مربوط به iphone مشاهده کنید.

1. اطلاعات کاربر:

black gradient در اینجا یک ناحیه اطلاعات کاربر را ترسیم می کنیم که شامل نام کاربری  ˓ موقعیت مکانی و یک تصویر می باشد. پس زمینه هم یک مربع با ارتفاع 222px است. یک عکس نمونه را در کادر قرارداده و یک mask با استفاده از ابزار clipping mask ایجاد کنید سپس عکس یا تصویر مورد نظر را در به درستی در مرکز کادر set  کنید.

طرح بندی یا قالب بندی های مبتنی بر عکس بهتر است که با دقت طراحی شوند . این در حالی است  که در خصوص نحوه استفاده از یک نوع طرح بندی خاص بهتر است که تمام جوانب کار در نظر گرفته شود. از آن جایی که ما متن را روی کار قرار میدهیم ˓  نیاز داریم که در خصوص  مناسب بودن تضاد رنگها و در دسترس بودن متن ˓ اطمینان حاصل شود. اطمینان حاصل کنید که وضوح متن را با تصاویر مختلف در پس زمینه تست کرده اید.من متن را با رنگ #fff و 1px drop shadow  تنظیم کردم.

برای رسیدن به بیشترین تضاد و تقابل یک مقدار به پس زمینه اضافه می کنیم. یک مستطیل ایجاد و clipping mask را روی آن اعمال کنید.       

هرگز از ایزار transform tool برای کاهش سایز عکس های گرفته شده استفاده نکنید. کیفیتش به شدت افت پیدا میکند.. در عوض از ابزار Image Size tool استفاده کرده و به هر میزان که خواستید سایز تصویر را کاهش دهید. برای رسیدن به بهترین نتیجه از نرم افزارحرفه ای Adobe Lightroom  که  سایز فایل مورد نظر را به اندازه مشخص  تغییر میدهد˓ استفاده نمایید.

 این تکنیک برای رسیدن به بهترین تضاد به کار برید. زیرا استفاده کردن از عکس های گرفته شده بدون لحاظ کردن  user flexibility میسر نخواهد بود .

1. طرح صندوق

در حال حاضر ما تصمیم به طراحی طرح و شکل صندوق پستی گرفتیم. با ایجاد یک نوار در بالا صندوق شروع به کار کنید.یک نوار در اندازه ی یک مستطیل به ابعاد640x100px  پیکسل به عنوان پس زمینه برای آن انتخاب کردیم. قسمت سمت چپ آن را یک فلش گذاشتیم  که به معنیه بازگشت به منوی صندوق پستی بود. این فلش را در داخل یک مستطیل به ابعاد 100x100px پیکسل قرار دادیم.

قبل از طراحی و پیاده سازی یک وب سایت یا نرم افزار تحت وب، داشتن اطلاعاتی کامل از جزئیات طرح الزامی است. به طور کلی Wireframe یک راهنمای تصویری کامل از وب سایت قبل از شروع طراحی است که چهارچوب کلی وب سایت را مشخص می کند و معمولا طراحان حرفه ای وب سایت این مورد را از مشتریان خود می خواهند. بعنوان مثل اگر بخواهیم یک وب سایت خبری طراحی و پیاده سازی کنیم، ابتدا باید بدانیم اطلاعات کاملی از این وب سایت خبری داشته باشیم تا بتوانیم طرح را پیاده کنیم.
مواردی مثل: طول وب سایت، محل قرارگیری سربرگ، تعداد بلوک های سایت، مکان قرار گیری آخرین اخبار، تعداد ستوی های وب سایت و… مواردی از این موضوع هستند.پس با تعریف Wireframe  متوجه می شویم که استفاده از آن بسیار مفید و سودمند است. شما می توانید در طراحی خود ازاین روش استفاده کنید و تغییرات متعددی را داشته باشید.اما فعل و انفعالات و راهنمایی دقیق آن به شما خواهد گفت که این طراحی قابل استفاده هست یاخیر.

این  نکته بسیار مهم است که شما در طراحی خود از رنگ های مکمل استفاده کنید.با بازی با برخی از رنگ ها و استفاده از راهنمایی های تئوری رنگ میتوانید رنگ نام تجاری مناسب و خوبی را انتخاب کنید. برخی از منابع آنلاین وجود دارند که به شما کمک میکند  تا بتوانید تئوری رنگها را یاد بگیرید و در طراحی user interface از ترکیب رنگ ها استفاده کنید. علاقه شخصی من برای طراحی نرم افزار خلاق استفاده از سایت جامع (colorlovers.com) است.

در طراحی صندوق پستی برای طراحی آیکون arrow، ایجاد یک مستطیل 19x4 پیکسل نیاز است.این آیکون با solid #fff درست وکارش درخواست تغییر شکل/چرخش 45 درجه، داده می شود.یک محلی را به عنوان پست های دریافت شده میگذاریم که جای آن 70px از سمت چپ است. اطمینان حاصل کنید که جای آن را به صورت عمودی تراز،و در وسط قرار دارد.مرحله بعدی ایجاد یک دایره با یک پس زمینه # 141516،و در داخل آن عدد 8 را مینویسیم و از نظر عمودی و افقی آن را نیز تراز میکنیم.

حال توانستید با انجام این کارها یک صندوق پستی یا ایمیل طراحی کنید.

1. مراحل طراحی ایمیل

در ابتدا یک مستطیل ایجاد کرده و با رنگ #fff آن را پر میکنید.سپس برای پایین این مستطیل یک مرز #e3e3e3 را رسم میکنیم.یک دایره ی 120x120px ایجاد کرده و با رنگ خاکستری آن را پر می کنید.این دایره مخصوص عکس کاربر یا به عبارتی صاحب ایمیل است که می تواند عکس خود را در آنجا آپلود کند.

مرکز افقی و عمودی صفحه را مطمئن شوید که 25پیکسل فضای خالی رزرو شده از چپ و راست وجود دارد.در یکی از قسمت ها نام فرستنده پیام ها را اضافه کنید که با ارسال پیام متن آن در  #868b98 کپی شود.تاریخ ارسال پیام را نیز در یک موقعیت و جای مناسب قرار دهید و وزن فونت های سبک را به سمت راست مرتب و در یک صف تراز کنید.

برای بخش های مختلف صفحه با استفاده از کد  #fafafa به عنوان رنگ پس زمینه، آنها را انتخاب کنید.برای طرح محتوای (نرم افزار ایمیل، روزنامه) بهتر است که نور زمینه آن را روشن و متن ها را خاکستری انتخاب کنید تا در خواندن متن ها و دسترسی به آن در صفحه نمایشگر های کوچک به آسانی میسر باشد تا خواننده در خواندن متن ها احساس راحتی کند.

1. دکمه جدید

در این قسمت نیز یک دایره با قطر 102px ایجاد کرده و آن را با  #ec2e49 پر می کنید.سپس این دایره را در پایین صفحه سمت راست قرار داده و داخلش یک آیکون قلم با اندازه 40x40px درست می کنید.این آیکون را در دایره در یک محل به صورت افقی و عمودی تراز می کنید.منظور از تراز کردن قرار دادن شکل قلم در جای مناسب در دایره است.این آیکون همواره باید به صورت 90 درصد تار و کم رنگ در صفحه نمایش داده شود تا مانع دید کاربر در صفحه نشود.زمان استفاده از آن این آیکون پر رنگ میشود.شما میتوانید برای زیبا شدن طراحی یک عکس پس زمینه برای ایمیل خود درست کنید که ساده نباشد.این کار مخصوص علاقه مندان به UI است که میتوانند در برنامه خود اضافه کنند.

نتیجه گیری:شما توانستید با طراحی این نرم افزار مرسوم در آیفون،یک برنامه مد روز که شامل طرح صندوق پستی و مشخصات سبک و شیوه طراحی آن آشنا شوید.در این طراحی با بازی در اطراف صفحه و اضافه کردن یک پس زمینه موزاییک به قطعه عکس کاربر و ایجاد منو و مشخص کردن اقدامات و کارهایی که منو انجام می دهد همه نکاتی هستند که بهتر است که آنها را فراموش نکنید.

شما همچنین می توانید در این طراحی از نرم افزارهایی مانند: Adobe After Effects, or similar design tools. Ship it کمک بگیرید.