سعید-رضایی-ساری-خونیرث-برنامه-نویسی-کد-نویسی-فروش-اسکریپت-دانلود-Saeid-rezaei-khunires-admin-manager
خونیرث مجموعه ای از داغ ترین ایده های ثروت ساز بین المللی و ایرانی در کنار کادری مجرب در زمینه های توسعه و طراحی سایت، اپلیکیشن، امور گرافیکی کاملاً اختصاصی می باشد. سهم خودتان را از وب بردارید...
برندها-ایرانسل-اسنپ-اپلیکیشن-اسکریپت-آپارات-همراه-اول-بانک-ملی-پاسارگاد-هواوی-دیجیاتو-زرین-پال-نت-برگ-دونیت-کافه-بازار-هدفون-آهنگ-عکس-فیلم-کد-نویسی-طراحی-وب-برنامه-نویسی-پونیشا-پاپکو-دیجی-کالا-ورزش-فوتبال-90-نتیجه-فوتبال-بازی-شیپور-دیوار-آگهی-رایگان-خونیرث

طراحی وبسایت
برگشت به لیست

آیا از اصطلاحات موجود در طراحی سایت گیج شده اید؟ اختلاف های واقعی بین این سه عنصر پروژه ای را در اینجا کشف کنید! اختلاف های بین فازهای مختلف فرآیند طراحی سایت می تواند گیج کننده باشد بخصوص وقتی که این اصطلاحات خیلی بی قاعده از آنها استفاده شوند. اما این هیچ بهانه ای نمی تواند باشد که طراح اختلاف های آنها را نداند. درحالیکه ممکن است بدون ایراد به نظر بیاید اشاره به ماکاپ به عنوان یک وایرفریم همانند آن است که یک نجار به چکش بگوید پیچ گوشتی! و نداستن در مورد اینکه چگونه یک پروتوتایپ سطح پایین را ایجاد نماییم همانند آن است که جراحی نداند کجا را برش دهد.

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

 

وایر فریم-> ماکاپ-> پروتوتایپ

اما آن اختلاف گول زننده چیست؟ درحالیکه قطعاَ تنها پروسه برای طراحی سایت یا نرم افزار است، فرآیند طراحی سنتی از این گام ها پیروی می کند.

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

دوباره می گوییم که این کار یک ساده سازی است و یک قانون مطلق نیست. برای مثال،گاهی اوقات گذر از ماکاپ و ایجاد یک پروتوتایپ سطح پایین در همان اوایل بهترین چیز برای پروژه شما است. به شیوه دیگر ممکن است از یک فرآیندی استفاده کنید که طراح سایت استیون بردلی نیز از آن استفاده می کند که در آن، از یک وایرفریم به ماکاپ می روید و نهایتاَ بصورت کد کارتان را به انتها می برید.

دانستن آنکه دقیقاَ یک بهترین روش (فقط فرایند درست) وجود ندارد اجازه دهید که آنچه را که هر نوع از طراحی به نظر می رسد مورد بررسی قرار دهیم.

 

وایر فریم ها

وایر فریم ها همانند برنامه کاری از شماتیک طراحی شما هستند. آنها را در همان اوایل بوجود می آورید و معمولا اولین گام هستند (یا دومین گام اگر که ترجیح می دهید که ابتدا طرح شماتیک را ایجاد نمایید) و زمان را منحصراَ به جواب دادن به طرح اساسی، ساختار و سوالات سازمانی اختصاص می دهند قبل از آنکه تیم به جزئیات بصری بپردازد. به این منظور، وایر فریم ها دارای وفاداری سطح پایینی هستند. یک زمان و یک مکان برای هر چیزی وجود دارد و در مورد جزئیات فنی وبصری بعداَ بایستی تصمیم گیری شود وقتی که فرمت و ساختار تثبیت شدند.

این امر به این معنی نیست که در وایر فریم ها اصلا نباید تصاویر بصری اصلا در نظر گرفته شوند – شما فقط به جزئیات کافی نیاز دارید که طرح کلی و فضای لازم برای دسته های المان ها ( همانند نوار لغزنده جانبی، منوی انتقال فوقانی، فوتر، محتوای اولیه و غیره ) را بصری سازی نمایید.

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

 

مزایا

همانطور که در بالا ذکر شد، وایر فریم ها تیم را قادر می سازند تا قبل از پرداختن به جزئیات، تنها بر تصمیمات "تصویر بزرگ" تمرکز کنند. مزایای وایر فریم ها همانند خطوط لازم برای هر محیطی است: آنها فرصتی برای برنامه ریزی مناسب قبل از حرکت به جلو ایجاد می کنند وخطر Dubble-back را به علت آنکه چیزی از دست رفته است کاهش می دهند. علاوه بر این، به دلیل ایجاد خروجی، وایر فریم ها را می توان با کل تیم به اشتراک گذاشته به طوری که همه در یک صفحه قرار داشته باشند. اگر شما با استفاده از یک ابزار وایر فریم سازی تخصصی یا ابزار پروتوتایپ سازی خاص استفاده می کنید، اعضای مختلف تیم می توانند یک سند را اصلاح نموده و یا در مورد آن اظهار نظر کنند، که همکاری را از همان ابتدا تشویق می کند.

علاوه بر این، وایر فریم ها می توانند را به کارفرمایانی که می خواهند نتایج را در اوایل ببینند، نشان دهید و تغییرات بالقوه را قبل از اتلاف وقت برای توسعه بیشتر ارائه دهید.

 

روش ها

با توجه به وفاداری پایین وایر فریم ها، روش های بیشتری برای ساخت آنها نسبت به سایر فازها وجود دارد. بیایید به چند مورد نگاه کنیم.

 

ترسیم

راه قدیمی متداول! نگران نباشید وخیلی ساده ، آنچه در ذهن تان است بر روی کاغذ بکشید، فقط مراقب باشید خیلی در جزئیات غرق نشوید. این روش برای ترسیم  وایر فریم در یک حالتی همانند طوفان مغزی، مناسب است ، اما این طرح ها می تواند برای به اشتراک گذاشتن با کل تیم مشکل ایجاد نماید و به راحتی می تواند به اشتباه از آن تفسیر و یا برداشت شود. اگر ترجیح می دهید شیوه ای متداول و ساختار یافته ای برای طراحی داشته باشید، ما به شدت ترسیم لایه ای را پیشنهاد می کنیم.

 

نرم افزار طراحی گرافیکی

اگر استفاده از نرم افزارهایی مانند فتوشاپ یا Sketch برای تان همانند کار کردن بر روی کاغذ به نظر برسد، از آن استفاده کنید. با این حال، این گزینه نیاز به یک دانش ذاتی از برنامه دارد و فاقد توانایی برای اضافه کردن تعاملات ارائه شده توسط برخی از برنامه های وایر فریم سازی است.

 

نرم افزار ارائه

اگر به طور خاص برای ارائه ، وایر فریم می سازید، می توانید آن را در نرم افزارهایی مانند PowerPoint یا Keynote بسازید. ساختار اسلاید، فکر کردن درباره طراحی تان را از لحاظ صفحات تسهیل می کند، اما باز هم این گزینه فاقد اثرات متقابل است. با این حال، نرم افزار ارائه بسیار آشنا است، زیرا اکثر ما در هر لحظه از پاور پوینت یا Keynote استفاده می کنیم.

 

نرم افزار طراحی

امروزه، نرم افزارهایی به طور خاص برای وایر فریم سازی و فراتر از آن وجود دارد، مانند UXPin، Axure، Omnigraffle و Moqups. مزایا در اینجا ویژگی های ساده برای وایر فریم سازی، مانند قابلیت کشیدن و رها کردن و چگونگی اضافه کردن تعامل با چند کلیک هستند. اشکال این روش آن است که برخی از آنها هزینه بیشتری نسبت به بقیه دارند. در حالی که Balsamiq رایگان است، فاقد قابلیت های تعاملی Axure، Omnigraffle و UXPin است. روش استفاده شده خیلی مهم نیست، تا زمانی که مناسب نیازهای پروژه و محدودیت های آن باشد. مهم این است که قبل از اینکه به مراحل دقیق تر بروید، ایده قابل اطمینانی از کل پروژه بدست آورید.

 

ماکاپ چیست؟

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

 

مزایا

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

 

 روش ها

با توجه به تأکید آنها بر جلوه های بصری، ماکاپ ها را تنها می توان به چند روش ایجاد کرد.

 

نرم افزار ماکاپ سازی/ پروتوتایپ سازی

درست مثل وایر فریم سازی، بعضی از ابزارهای طراحی تخصصی مانند Axure و UXPin ویژگی هایی مانند کتابخانه عناصر  رابط کاربری را برای پشتیبانی از وفاداری سطح بالای از ماکاپ ها را ارائه می دهند.

 

نرم افزار طراحی گرافیکی

این نوع نرم افزار اگر شما در حال ساخت یک ماکاپ پیکسلی کامل باشید به خوبی کار می کند ، اما چند نقطه ضعف وجود دارد – بطور مثال زمانی که وقت کافی برای برنامه نویسی وجود ندارد، برخی از کار سخت شما به درستی ترجمه نمی شود. در وجه مثبت نیز می توان ذکر نمود  بعضی از ابزارهایی نظیر InVision، Marvel و UXPin نیز با فتوشاپ و Sketch ادغام پذیر هستند و انتقال ماکاپ به پروتوتایپ را آسان تر می سازند.

 

ماکاپ های دارای کد

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

 

3- پروتوتایپ چیست؟

وایر فریم، ساختار را اداره می کند، ماکاپ ها به جلوه های بصری می پردازد و پروتوتایپ ها قابلیت استفاده را ایجاد می کنند.

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

 

مزایا

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

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

 

روش ها

به عنوان یک فاز محوری در فرایند طراحی، پروتوتایپ سازی به ایجاد تنوع و استراتژی های مختلف بر اساس تنظیمات شخصی طراحان منجر شده است.

 

پروتوتایپ سازی بر روی کاغذ

طراحی با دست برای ترسیم معادل پروتوتایپ، یک روش غیر دیجیتالی است که شامل صفحات کشیده شده بر روی کاغذ است و به طور معمول یک انسان که به عنوان «رایانه» عمل می کند و کاغذ را بر مبنای انتخاب کاربر تغییر می دهد. در حالی که ساخت آن سریع و آسان است، این پروتوتایپ خام نیاز به تخیل زیادی از کاربر دارد که نتایج آن را محدود می کند.

 

نرم افزار ارائه

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

 

پروتوتایپ کد شده

درست مثل ماکاپ های کدگذاری شده، این روش در مراحل نهایی موجب صرفه جویی در زمان می شود. اشکال اصلی آن، هر چند، این است که آیا مهارت برنامه نویسی شما آن قدر خوب است.

 

ابزارهای طراحی

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

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

 

مخلوط کردن و تطبیق دادن

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

یکی از رایج ترین اعمال در واقع ایجاد پروتوتایپ های با وفاداری پایین در همان اوایل است. این کار بسیار متناسب با روش پروتوتایپ سازی سریع است، که هدف آن، ایجاد و آزمایش چندین پروتوتایپ می باشد، و نیز متناسب با تکرار داده ها به نسخه های بعدی.

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

 

نتیجه گیری

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


تگ ها : تصاویر برای ماکاپ و پروتوتایپ ها تفاوت استفاده بین وایرفریم و پروتوتایپ و مکاپ چیست؟ مقاله تمام آنچه که شما لازم است درمورد ماکاپ وایر فریم و مقاله 3 روش برای ایجاد ماکاپ های وب سایت تفاوت وایرفریم، پروتوتایپ، موکاپ در چیست؟ wireframe و prototype و mockup چه تفاوتی باهم دارند؟ پروتوتایپ (prototype) چیست و چگونه تهیه می‌شود؟ انصار رضائی ساخت ماکت و پروتوتایپ بایگانی [PDF]اصول مدل سازی با تکنیک الیه گذاری در فرایند طراحی محصول راهکارهای تحت وب آنچه که یک چکش است Skyhawk بهترین ابزارهای طراحی سایت در سال 1395 طراحی صنعتی ایرانی جستجوی عبارت origami جستجوی عبارت تنهاییمو باهاش مقاله های گروه design Images about #جنگنده #جنگنده پهپاد مانتیس F313 Photos & Videos on Instagram تبلیغات گوگل SoheilEsy Images tagged with #f313 on instagram Images about #f313 tag on instagram Great 391+ #f313 recommendations on Insta724 کارتونو دیده Tag : #جنگنده Images about #قاهر واقعین چرا Posts on #جنگنده طریق جاسوسی Tag : #F313 Instagram Pictures طراحی سایت post by Skyhawk llskyhawkll قاهر D8%AC%D9%86%DA%AF%D9%86%D8%AF%D9%87 65+ Best #جنگنده دراپ با هم شد جستجو وویس هاتون رو بفرستید برام جستجو ابزار گفت وگوی تعاملی و موثر جستجو

نظرات




نماد