https://virgool.io/feed/@Golnaz.shahshahani صاحب برند زیستینو/ Linkedin: Golnazshahshahani fa 2026-06-29 03:45:32 https://files.virgool.io/upload/users/157994/avatar/xcFTQZ.jpeg?height=120&width=120 https://virgool.io/@Golnaz.shahshahani https://virgool.io/ux-unicorn/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%B1%D8%A7%DB%8C%DA%AF%D8%A7%D9%86-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%A8%D8%B5%D8%B1%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85-%D8%AA%D8%B9%D8%A7%D8%AF%D9%84-balance-livzjgciy5rs قسمت اول: مرورکلیقسمت دوم: یکپارچگیقسمت سوم: تعادل(همین پست!)قسمت چهارم: ترازقسمت پنجم: سلسه مراتبیقسمت ششم: تضادقسمت هفتم: نسبتقسمت هشتم: فضای منفینکته: اگر اولین باره با سری مقالات از دوره طراحی بصری مواجه شدین و میخواین با کلیت ماجرا بهتر آشنا بشین، پیشنهاد میکنم ابتدا دو مطلب قبلی رو یه دور بخونین و بعد به این صفحه بیاید تا روند دوره براتون جابیفته. ......مقدمه ای بر تعادل:کلمه "تعادل" در خیلی از نوشته‌ها استفاده میشه و کاربرد های زیادی هم داره؛ مثلا تعادل تو رژیم غذایی یا هم‌معنی با عدالت تو سیستم قضایی ویا حتی ایستادن روی دوپا! تعادل به‌طور معمول چیز خیلی خوبیه. برای همینه تو خیلی جاها هیچکس نمیخواد ذره‌ای از عدالت و تعادل غافل بشه.. همین مسئله تو طراحی هم صادقه. تعادل یکی از عوامل تعیین‌کننده میزان مطلوبیت طرح شماست.تو دنیای فیزیکی، اجسامی که وزن یکسانی دارن، در یک مقیاس خاصی بین خودشون تعادل برقرار میکنن؛ اما تو طراحی میزان تعادل تحت‌تاثیر توزیع یکنواخت وزن بصریه! یعنی هرچقدر وزن‌بصری هدفمندتر تو صفحه پخش بشه، تعادل هم بیشتره =)وزن بصری(Visual weight)یک توپ بسکتبال و یک توپ بولینگ رو در نظر بگیرین. بر اساس اندازه‌ی نسبی هردو، انتظار میره وزنشون هم یکی باشه! درحالیکه تجربه ثابت‌کرده اینطور نیست و وزن یک توپ بولینگ خیلی سنگین‌تر از یک توپ بسکتباله.با این حال، در طراحی ما محدود میشیم به درک خودمون. درسته که این دو جسم از نظر وزن فیزیکی متفاوتن اما تو تصویر بالا چون از نظر بصری متعادل به نظر میان، به یک‌اندازه برای جلب توجه ما رقابت میکنن.مترجم: در اینجا لازمه توضیحی اضافه‌ کنم مبنی بر اینکه هر عنصر در صفحه یک وزن بصری داره که باعث جلب توجه و حتی جهت‌دهی نگاه ما مخاطبان میشه. این پاراگراف به این اشاره داره که هر چقدر وزن بصری دو شی یکسان باشن، میزان جلب توجهشون از چشم و نگاه ماهم برابره. قانون دیگه اینه که هرچقدر وزن‌بصری یک عنصر بیشتر باشه، جلب توجه بیشتری رو به همراه داره!وزن‌بصری در حقیقت همون وزنی از عنصر هست که مخاطب درک‌میکنه یا به اصطلاح لاتین Perceived weight که مقیاسی هست برای اندازه‌گیری میزان تفاوت یک عنصر در مقایسه با بقیه عناصر؛ البته از دید مخاطب!عوامل موثر بر وزن بصریوزن‌بصری میتونه با تغییر در فاکتورهایی مثل اندازه، رنگ، تضاد(کنتراست) و یا تراکم یک عنصر تغییر کنه!بیاین همه‌ی این عوامل رو برابر فرض کنیم. حالا می‌تونیم تاثیر هرکدوم از این عوامل رو بسنجیم(به تنهایی)تغییرات وزن‌بصری بر اساس اندازه(مقدار): موثرترین عامل در میزان افزایش یا کاهش وزن‌بصری، اندازه‌س!همونطور که در تصویر پایین می‌بینید، مربع سمت چپ وزن بصری بیشتری نسبت به مربع سمت راست داره.تغییرات وزن‌بصری بر اساس رنگ: رنگ نقش کمتری در تغییرات وزن‌بصری داره(نسبت به اندازه!) درک ما از رنگ در حقیقت تناسب رنگ اصلی یک شی با رنگ‌های اطرافش هست. در مثال زیر، مربع قرمز توجه مارو جلب میکنه چون وزن بصری بیشتری نسبت به مربع زرد داره. البته تو مثال بعدی می‌بینید که این مسئله همیشه هم صدق نمیکنه!تغییرات وزن‌بصری بر اساس تضاد(کنتراست): با استفاده از همون مربع‌های رنگی مثل نمونه قبلی، می‌تونیم ببینیم که چطور کنتراست می‌تونه درک ما از رنگ رو به شدت تغییر بده. یه پس‌زمینه قرمز تیره باعث کاهش کنتراست برای مربع سمت چپ(مربع قرمز) و در مقابل، افزایش کنتراست برای مربع سمت راست(مربع زرد) میشه. که همین مسئله توجه مارو به سمت مربع سمت راست یا زرد جلب میکنه، نه؟تغییرات وزن بصری بر اساس تراکم: با وجود اینکه اندازه، رنگ و کنتراست هر دو مربع برابره اما مربع راست به دلیل داشتن تراکم بیشتر نسبت به مربع چپ، وزن بصری بیشتری هم داره(perceived density). در این مقاله می‌تونید در ارتباط با تاثیر فضای سفید بر تعادل بخونید( البته اگه فعلا نمیتونید با اصطلاحات انگلیسیش ارتباط بگیرید، هیچ اشکالی‌نداره! چرا که در چند هفته‌ی آینده ترجمه میشه و در صفحه‌مون قرار میدیم=) )خب تا اینجا تو هرکدوم از این مثالها دیدیم که تغییرات جزئی در اندازه، رنگ، کنتراست یا تراکم چطور می‌تونه رو وزن‌بصری یک عنصر در صفحه‌ی شما تأثیر بذاره. در ادامه خواهیم‌دید، این فاکتورها می‌تونن برای ایجاد حس تعادل در طرح شما باهم ترکیب بشن یا نه؟ نظر شما چیست؟! =)تعادل در مقابل تنشبدون حضور عامل تعادل، تنش‌بصری به‌وجود میاد که براحتی می‌تونه بر نحوه‌ی درک دیگران از طرح ما تاثیر بذاره(منظور از تنش همون بی‌تعادلی یا عدم‌تعادله)تصویر بالا جوری ویرایش‌شده که نامتعادل به‌نظر برسه. با وسط‌چین شدن متن حول محور عمودی تعادل از نوع تقارن به وجود اومده. با این حال، سمت چپ صفحه از نظر وزن‌بصری سنگین تره، که باعث ایجاد تنش‌بصری میشه. این تنش‌بصری ذهن مارو وادار میکنه که فکر کنه ای‌بابا.. یه جای کار میلنگه!در طرح اصلی وزن بصری بطور مساوی بین هر دو بخش صفحه تقسیم شده.(اینجا رو ببینید)نظر خیلی ها در مورد اینکه تصویر دوم بهتر از تصویر اوله، مثبته!؛ چون مغز ما تمایل و گرایش بیشتری به تعادل داره تا تنش. این به این معنی نیست که کلا نباید تنش ایجاد کرد، بلکه باید با احتیاط و هدفمند از ازش استفاده کرد. تعادل و تنش نه باهم سازگارن و نه ناسازگار. با استفاده از مثال بالا، ممکنه یک طراح بدون ایجاد اختلال در تعادل، توجه بیشتری به دکمه سمت راست نسبت به دکمه سمت چپ جلب کنه. این رابطه اصلی/فرعی بودن بین دکمه‌ها چیز جدیدی نیست. با ترکیب عوامل موثر بر وزن‌بصری میشه از ایجاد تنش بیش‌از حد جلوگیری کرد.در اینجا رنگ اصلی که نشون دهنده‌ی تنش یا عدم تعادله، نارنجیه. یه طراح ممکنه برای ایجاد تعادل یا تنش بصورت همزمان، مراحل زیرو طی کنه:اولین تغییر منجر به عدم تعادل در کنتراست میشه. خواندن دکمه اصلی نه تنها دشوارتر شده، به نظر می‌رسه که دکمه فرعی هم وزن‌بصری بیشتری پیدا کرده. این چیزی نیست که ما دنبالشیم.در دومین تغییر مسئله کنتراست رو برطرف کردیم، اما حالا دکمه اصلی در مقایسه با دکمه فرعی بسیار سنگین‌تر احساس میشه.در سومین تغییر، تراکم دکمه فرعی رو هم تنظیم کردیم تا با دکمه اصلی مطابقت‌باشه. این منجر به تعادل و تنشی مناسب میشه و ماهم همینو میخوایم.چهار نوع تعادلچهار روش برای رسیدن به تعادل در طراحی وجود داره. اغلب‌اوقات، تعادل در دو طرف یک محور نامرئی، برقراره. حالا این محور افقیه یا عمودی فرقی نمیکنه. این مسئله دلالت بر جهت‌گیری بصری طراحی شما داره. تعادل میتونه بصورت محور مورب یا چند محوره هم برقرار بشه اما نوع افقی و عمودی از همه رایج‌تره.تعادل به سبک متقارن یا رسمی(متداول): مثال‌های زیادی در طبیعت هستن که دلالت بر تقارن دارن مثل چهره ی انسان یا نقوش بال پروانه ها. تعادل متقارن (رسمی) با انعکاس‌دادن اشیاء در یک یا چند محور انجام میشه. در زیر مثالی از تقارن بازتابنده رو باهم میبینم که در اون دو جسم یکدیگر رو در یک محور عمودی بازتاب میدن.تعادل متقارن غالباً برای بیان حس لطف، ظرافت و تشریفات استفاده میشه. با این‌حال، تقارن بیش از حد در یک طرح میتونه خشک و کسل‌کننده باشه. در مثال بالا، آدام داناوی از تعادل به شیوه‌ی تقارن استفاده‌میکنه، ولی با این‌حال اینقدر هر طرف نسبت به اون یکی متفاوته که جذابیت طرح حفظ‌ شده.تعادل به سبک غیرمتقارن یا غیر رسمی(غیرمتداول): عدم تقارن رو هم میتونیم تو طبیعت ببینیم مثل درختان یا سازه‌های سنگی. بر اساس تعریف کلمه "عدم تقارن" نشون‌دهنده عدم برقراری تقارنه. با این حال، تعادل رو میشه با عناصر نامتقارن هم ایجاد کرد.در مقابل تقارن که ممکنه یه ذره یکنواخت باشه، میتونیم از عدم تقارن استفاده کنیم تا یک طراحی پویاتر و سرزنده تر داشته باشیم. در مثال بالا، ریکاردو مستر یک طراحی دلپذیر و منسجم با تعادل نامتقارن رو بهمون نشون میده.تعادل شعاعی: تعادل شعاعی(یا دایره وی) زمانی بوجود میاد که عناصر نسبت به نقطه‌کانونی ظاهر میشن. از این روش میشه برای جلب‌توجه به مرکز طراحی هم استفاده‌کرد.در سال 1996 ، اسپیس جم وبسایت خودش رو راه‌اندازی کرد، که شامل یک طراحی متوازن شعاعی بود. لوگو وبسایت در مرکز توجه قرار داره که نشون‌میده ناوبری ازش بیرون میاد. اینروزا تعادل شعاعی در طراحی کمتر متداوله، اما نباید از تسلط بهش غافل بشید!تعادل موزائیک: تعادل موزایک (یا اصطلاحا کریستالوگرافی) رو میتونیم "آشوب سازمان‌یافته" هم معنی‌کرد. این نوع تعادل از یک الگوی تکراری پیروی میکنه که سهم همه‌ی عناصر در اون برابره.یکی از نمونه‌های این نوع تعادل وبسایت پینترسته. عدم لحاظ تراز عمودی بین عناصر در نگاه اول ممکنه کمی مخاطب رو آشفته کنه اما تراز افقی و هماهنگی بین عناصر به سازماندهی هرچه بیشتر طرح کمک‌میکنه.نتیجه گیریوقتی همه‌چیز متعادل باشه، هارمونی ایجاد میشه. فاکتور تعادل در طراحی به دلیل رسیدن به هماهنگی و یکپارچگی لازمه(مقاله مربوط به یکپارچگی رو خوندین؟ اگه نه اینجا کلیک کنین) عدم تعادل میتونه منجر به تنش‌بصری بشه که در بیشتر موارد باید از اون جلوگیری کرد. اما اگر دقیق و هدفمند انجام بشه، میشه ازش برای رسیدن به نتیجه مطلوب استفاده کرد.هنگام طراحی یک طرح، یک قدم جلو برید و از خودتون بپرسید که آیا ترکیب کلی طرح حس تعادل داره یا نه؟!اگر یک عنصر توجهی بیش از حد از مخاطب جذب میکنه و این خواسته ما نیست؛ پس با تغییر تو عواملی مثل اندازه، رنگ، کنتراست و تراکم میشه وزن‌بصری رو بصورت یکسان بین عناصر پخش کرد.چهار نوع از تعادل در طراحی وجود داره که سه نوع از تقارن، نامتقارن و موزاییک در طراحی رابط کاربر متداول ترن؛ اما این نباید باعث بشه که شما تعادل شعاعی رو تو طراحیاتون امتحان نکنید. هر نوع از تعادل قابلیت ترکیب شدن با دیگری رو داره و این امر میتونه تولد یک طراحی سرزنده و خلاقانه رو سبب بشه! ***و بله! این دفترم به اتمام رسید اما حکایت همچنان باقیه! اما چند نکته درادامه..یک» من صرفا مترجم این مقاله هستم و مطلب اصلی رو میتونین در این لینک ببینید. و برای مطالعه بیشتر در این‌ زمینه میتونین به این لینک‌ها هم سر بزنید:https://www.smashingmagazine.com/2014/12/design-principles-visual-weight-direction/https://lisacharlotterost.de/2014/06/18/Tension-and-Balance-in-Graphic-Design/دو» ممنونم که تا انتهای این مقاله با من همراه بودین. یادتون نره که این سری مقالات و دوره طراحی‌بصری هنوز تموم نشده؛ پس حتما برای خوندن مقاله‌ی بعدی مارو دنبال‌کنید.سه» از آقای محمد شریفی، هم‌تیمی من، که در ویراست این مقاله کمکم کردن تشکر میکنم.اگر فکر میکنین دوستان و همکارانتون به خوندن این مطلب علاقه دارن، براشون بفرستین! لطفا حتما نظراتتون، چه انتقاد و چه پیشنهاد، رو هم برامون بنویسید:) با آرزوی بهترین ها گلناز شهشهانی گلناز شهشهانی Sun, 02 Aug 2020 10:53:13 +0430 https://virgool.io/ux-unicorn/%D8%A7%D9%88%D9%84-sitemap-%D8%A8%D8%B9%D8%AF-design-%D8%AE%D8%A8-%DA%86%D8%B1%D8%A7-xtbpsun61o7w طراحی وبسایت به‌خودی خود کار نسبتا مشکلی است که با اضافه شدن اطلاعات مختلف و سازمان‌دهی کردن آن‌ها، مشکل‌تر هم می‌شود. مطمئنا طراحان حرفه ای قبل از طراحی، وایرفریم و ماک آپ رسم می‌کنند؛ اما تکلیف آن‌هایی که طراح نیستند چیست؟ خود شما، قبل از محول‌کردن تمامی کارها به طراح، ساختار سایت خود را چطور درک می‌کنید؟نقشه‌ سایت(Sitemap)، ابزاری کاربردی هم برای طراحان و هم غیر طراحان است؛ که به شما کمک می‌کند تا مطالب اصلی و مورد نیاز خود را مرتب کنید و همچنین صفحات غیر ضروری را از وبسایت خود حذف نمایید. در ادامه، دقیق تر به بررسی این سوال می‌پردازیم: اول Sitemap، بعد Design! چرا؟!هدف وبسایت خود را واضح و روشن به مخاطب القا کنیدهر وبسایتی باید یک هدف مشخص داشته باشد؛ در غیر اینصورت غیرمتمرکز و به هم ریخته به نظر می‌رسد، جابه‌جایی(navigation) بین بخش‌های مختلف راحت نبوده و تجربه کاربری ضعیفی از سوی مخاطبان گزارش می‌شود. در اینگونه سایت‌ها، مخاطب متعجب و سردرگم شده و از خود می‌پرسد "من دقیقا اینجا چیکار می‌کنم؟" قطعا شما هم نمی‌خواهید که کاربر و بازدیدکننده‌ی وبسایتتان، در هنگام تعامل با محتوا یا جا‌به‌جایی بین بخش‌های مختلف، سردرگم شود.#نکته_مفید: بسیاری از شرکت‌ها به جای اینکه از ابتدا طراحی اصولی و مناسبی را برای تبلیغ و انتشار محتوای خود در پیش بگیرند، وبسایتی طراحی می‌کنند که بیشتر حکم کارت ویزیت دارد و تدریجا قسمت‌های مختلف آن را اصلاح می‌کنند؛ که این امر مستلزم صرف هزینه و زمان است و تجربه کاربری بد و ریزش مشتری‌ها را به همراه دارد. بهتر است قبل از اقدامی، یک قدم به عقب بروید و هدف وبسایت خود را تعیین کنید؛ که این امر به تنهایی باعث صرفه جویی در وقت، پول و منابع دیگر می‌شود. در ادامه چند راهکار عملی برای تعیین هدف مناسب وبسایت، معرفی می‌کنیم.از تولید محتوای تکراری، خودداری کنیدکپی کردن محتوای وبسایت‌های دیگر اتلاف وقت و منابع است. اگر مطالبی را از قبل روی وبسایتتان بارگذاری کرده‌اید، می‌توانید محتواهای جدید و مرتبط را به آن‌ها ارجاع دهید. اگر نقشه سایت ندارید، ممکن است متوجه تکراری بودن مطالب نشوید!؛ چرا که فقط صفحات جدید می سازید چون فکر می کنید باید ساخته شوند و ممکن است در این بین صفحاتی باشند که پیشتر ساخته شده‌اند و تشکیل دوباره ی آن‌ها کاری بیهوده است و شاید فقط نیازمند به روزرسانی مجدد باشند. با انتشار مطالب تکراری، محتوای متناقض منتشر می‌کنید؛ چرا که ممکن است مطلب ثانویه نسبت به اولین نسخه به روزتر باشد و این امر باعث ایجاد از هم گسیختگی مطالب می‌شود.#نکته_مفید: انتشار مطالب تکراری باعث می‌شود که موتور های جست‌‌وجو به صورت خودسرانه آن مطلبی که فکر می‌کنند مهم‌تر است را انتخاب کرده و به کاربر نشان می‌دهند. نباید اجازه دهید این اتفاق بیفتد!؛ چرا که ممکن است صفحه‌ی طراحی‌شده برای بالا بردن نرخ تبدیل را نادیده بگیرند و صفحه‌ای که اینکار را نمی‌کند، ایندکس کنند.در این مورد بیشتر بخوانید: اینجاقیف تبدیل(Conversion Funnel) را ساده کنیدشما باید مراحل رسیدن از مرحله ی A به B را به حداقل برسانید!؛ چرا که هرچقدر این مراحل طولانی و متعدد باشند، احتمال خروج مشتری بدون تکمیل خرید یا انجام ثبت نام هم بیشتر می‌شود. با استفاده از نقشه سایت، متوجه می‌شوید که مراحل اصلی مورد نیاز کدامند و چطور می‌توان تا حدامکان آن‌ها را باهم ترکیب کرد. استفاده از نمایش تصویری مانند Flow Chart هم می‌تواند باعث ساده‌تر شدن قیف تبدیل شود. در هر مرحله نقشه سایتتان را تست کنید، تا مطمئن شوید مراحل اضافی را حذف کرده‌اید.#نکته_مفید: نرخ تبدیل خود را رصد کنید. قبل از معرفی وبسایت به موتورهای جست‌وجو گر، نرم‌افزار تحلیل نرخ تبدیل را بر روی آن تنظیم کرده تا هر لحظه از میزان ثبت‌نام و خرید کاربر و مشتری‌ها مطلع شوید. بدیهی‌است که اگر بتوانید از روز اول منطبق با این تحلیل‌ها پیش بروید و تغییرات را به موقع اعمال‌کنید، درآمد شما روزبه‌روز افزایش خواهدیافت.تمام تمرکز تیم را به یک صفحه معطوف کنیددر پشت صحنه‌ی یک وبسایت، ممکن است یک طراح، یک مدیر پروژه، یک یا دو توسعه‌دهنده، یک تولید کننده‌ی محتوا یا کپی‌رایتر و یک نفر بازاریاب و فروشنده حضور داشته‌باشند. این تعداد در هر تیم بیشتر یا کمتر است. نقشه‌سایت به شما کمک می‌کند تا توجه و تمرکز همه‌ی اعضای تیم را روی یک صفحه نگه‌دارید. نقشه‌سایت باید در دسترس تمام اعضا باشد تا به کمک آن پروژه‌ی خود را جلو ببرند. یادتان باشد، نقشه سایت یک قرارداد ثابت نیست و باید در خلال جلو بردن پروژه، تغییرات لازم بر روی آن اعمال شوند. نقشه‌سایت به نوعی مرکز کنترل تیم شماست. در هرمرحله نسبت به آن موقعیت را بسنجید. کارهای انجام شده و مراحل پیش رو را کاملا مشخص کنید. در صورت لزوم، مراحل جدید اضافه یا مراحل قبلی را حذف کنید. #نکته_مفید: جمع‌آوری تمرکز کل تیم روی یک پروژه، جدا از بالابردن سرعت، باعث می‌شود که ارزشیابی، ارزش‌گذاری و تعیین اهداف دقیق‌تر و منطقی‌تر صورت پذیرند.نتیجه‌گیری: بدون داشتن نقشه‌سایت، ممکن‌است زمان زیادی را صرف ایجاد صفحات غیر ضروری یا پیچیده کنید. قبل از شروع طراحی، یک نشست یا جلسه با تیم خود ترتیب دهید و به موارد ضروری و غیرضروری و قابل حذف وبسایت بپردازید. به یاد داشته باشید، اضافه کردن یا از بین بردن چیزی در مراحل اولیه ارزان‌تر است(از نظر زمان و پول)!..در مقاله ی بعدی، نحوه ی ترسیم نقشه سایت رو باهم. بررسی خواهیم کرد :)از اینکه در این مقاله هم همراه من بودید، سپاسگزارم! نسخه ی اصلی رو می‌تونید در این لینک بخونید. خوشحال میشم موضوعات پیشنهادی، انتقادات و پیشنهاداتون راجع به مقاله رو تو قسمت کامنت ها بخونم. گلناز شهشهانی گلناز شهشهانی Tue, 09 Jun 2020 19:15:08 +0430 https://virgool.io/ux-unicorn/%DB%8C%D8%A7%D8%B2%D8%AF%D9%87-%D8%B3%D9%88%D8%A7%D9%84-%D9%85%D9%87%D9%85-%D8%AF%D8%B1-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D8%AF%DA%A9%D9%85%D9%87button-design-vxwfuh6lazqj دکمه ها نقشی کلیدی در طراحی رابط کاربری دارند؛ چرا که به کاربر اجازه می‌دهند تا از اپ و وبسایت استفاده کند. نوار ابزار، صفحات، دیالوگ ها و.. مولفه‌های مشابه، نیازمند دکمه هستند. در این مقاله یازده مورد از سوالات رایج در هنگام طراحی دکمه(Button) رابط کاربری را مرور می‌کنیم.سوال اول) آیا می‌توان دکمه ها را بدون حاشیه(Border) طراحی کرد؟اولین اصل طراحی دکمه، ساده است؛ دکمه را جوری طراحی کنید که مانند یک دکمه به نظر برسد! حاشیه(Border) حالتی سنتی به دکمه می‌دهد و برای کاربر آشناتر به نظر می‌رسد. بدون حاشیه، عنصر دکمه بیشتر شبیه به پیوند(Link) می‌شود. به همین خاطر، طراحی دکمه ی حاشیه دار در اولویت است.دکمه حاشیه دار در مقایسه با دکمه بدون حاشیهسوال دوم) چه رنگی را برای طراحی دکمه ها انتخاب کنیم؟رنگ ها بخش مهمی از زبان بصری ما در هنگام برقراری ارتباط با کاربر هستند. در ادامه، چند نکته ی مهم در مورد انتخاب رنگ دکمه ها ذکر شده که بهتر است به خاطر بسپارید:استفاده از رنگ های متضاد سبب می‌گردد تا دکمه ها راحت تر دیده‌شوند.دکمه ی Send در رابط کاربری Gmail، سریعا چشم کاربر را متوجه خود می سازد.رنگ مناسب، باعث تقویت ماهیت عمل می‌شود. در هنگام استفاده از رنگ های خاص، بهتر است به معنای آن رنگ توجه کنید؛ مثلا در مورد عمل حذف اطلاعات کاربر می توانید از رنگ قرمز استفاده کنید تا حس عملی خطرناک و ریسکی در کاربر تشدید شود(چرا که بعد از حذف اطلاعات قابل بازیابی نخواهند بود).حذف حساب شخصی، ماهیتا عملی خطرناک و ریسکی است؛ که رنگ قرمز برای دکمه ی انجام دهنده ی این عمل انتخاب مناسبی می‌باشد. بطور کلی، شما هر رنگی را می‌توانید برای دکمه های اپ یا وبسایت خود انتخاب کنید مادامی که این رنگ ها از نظر بصری برای کاربر قابل دیدن و درک کردن باشد. از طریق این سایت می‌توانید میزان کنتراست رنگ های انتخابی خود را چک کرده و رنگ مناسبی انتخاب کنید.https://webaim.org/resources/contrastchecker/سوال سوم) آیا باید دکمه ای با گوشه های نرم و گرد طراحی کنم یا گوشه های تیز؟دکمه ای با گوشه های تیز در مقایسه با دکمه ای با گوشه های نرم و گرد دکمه هایی با گوشه های نرم و گرد، دو نکته ی مثبت برای کاربر دارند:الف) گوشه های گرد برای چشم انسان مناسب تر هستند. انسان ها ذاتا از اشیاء تیز بیزارند و برخی از افراد ایکموفوبیا(aichmophobia) دارند؛ یعنی به شدت از اشیاء تیز مانند مداد، سوزن، چاقو می‌ترسند!ب) دکمه ای که گوشه های نرم و گرد دارد، تمرکز مخاطب را روی متن و Label قرار گرفته در مرکز دکمه حفظ می‌کند. به این ترتیب شانس دیده شدن کلمه و متن روی دکمه را بالا برده و احتمال کلیک کردن کاربر روی آن دکمه نیز افزایش می‌یابد.اما هنگام تصمیم گیری در مورد طراحی ظاهر دکمه، شکل آن باید مطابق با طراحی بصری محصول مورد نظر انتخاب شود. اگر در طراحی بصری رابط کاربری از اشیاء هندسی دقیق(Strict geometric objects) استفاده شده است، احتمالاً باید از دکمه هایی با لبه تیز طراحی کنید.دکمه هایی با لبه های تیز؛ عکس از وبسایت ترنسفروایز سوال چهارم) اندازه ی دکمه باید چه اندازه بزرگ/کوچک باشد؟هدف اصلی در طراحی رابط کاربری، ایجاد محیطی راحت برای تعامل کاربر است. این بدین معناست که شما باید تمامی عناصر مورد نیاز UI را طراحی کنید تا ریسک اعمال اشتباه توسط کاربر را کاهش دهید. در کل اندازه ی دکمه ها باید به این دو اصل پایبند باشد:الف) خواندن متن و Label قرار گرفته بر روی دکمه را برای کاربر راحت تر نماید؛ یعنی باعث شود تا متن و برچسب خوانا تر به نظر برسد. انتخاب فونتی مناسب که در اندازه ها و وزن های مختلف خوانا باشد، امری ضروری است(مطمئن شوید که فونت انتخابی شما در صفحاتی(Screen) با سایزهای کوچک تر نیز خوانا خواهد بود).ب)باعث راحت تر شدن تعامل کاربر با UI گردد؛ یعنی کلیک کردن یا ضربه زدن راحت تر انجام شود. این نکته برای رابط های لمسی از اهمیت بیشتری برخوردار است چرا که دکمه هایی با اندازه ی کوچک امکان اشتباه لمسی کاربر را بالاتر می برند و او را از هدف اصلی دور می کنند. بهتر است دکمه های هدف با اندازه ی 9 میلی متر طراحی شوند تا به راحتی توسط انگشت لمس شده و ضربه پذیر باشند.دکمه هایی با سایز مناسب مرتبط با این نکته می‌توانید به وبسایت زیر سر بزنید و نتایج برخی تست ها را نیز مشاهده کنید:https://www.drupal.org/project/drupal/issues/1137800https://www.lukew.com/ff/entry.asp?1085https://www.nngroup.com/articles/touch-target-size/سوال پنجم) چه زمانی از دکمه های توپُر و چه زمانی از دکمه های توخالی استفاده کنیم؟دکمه ی توخالی در مقایسه با دکمه ی توپُردکمه های توخالی(Ghost buttons) در سال های اخیر رواج یافته‌اند؛ بخصوص در مورد صفحات فرود(Landing pages)! اما در بحث Ux یا تجربه کاربری، دکمه های توخالی تاثیر کمی بر روی کاربران هدف می گذارد چرا که وزن بصری(Visual weight) کمی دارد.درنهایت، انتخاب از بین دکمه های توپُر و توخالی مبتنی بر میزان تاکید شما بر کارایی دکمه است. از دکمه‌های توپُر(دارای تضاد رنگ که قبل تر توضیح داده شد) برای تاکید بیشتر استفاده می‌شود؛ پس توصیه می‌کنیم از دکمه های توخالی برای عناصر اصلی و کلیدی(Call to action button) استفاده نکنید.با وارد کردن عبارت Call to action در بخش جست و جو ویرگول، مقالات مرتبط با Cta را بیابید.برخی اوقات باید دو دکمه ی CTA را درکنار یکدیگر قرار دهید؛ پس دکمه ی توپُر را به Cta با اهمیت بالاتر اختصاص داده و دکمه ی توخالی نمایانگر Cta ثانویه باشد. در این تقسیم بندی، بیشترین تاکید بر روی دکمه‌ی توپُر با Cta اصلی است؛ درحالیکه دکمه توخالی به عنوان جایگزین در کنار دکمه ی توپُر قرار می‌گیرد.استفاده از دکمه ی توپُر و توخالی در کنار یکدیگر. عکس از تسلاسوال ششم) چگونه برای دکمه ی مورد نظر، برچسب و Label مناسب بنویسیم؟برچسب‌ها نشان دهنده ی فرآیندی هستند که پس از ضربه زدن کاربر بر روی دکمه اتفاق می‌افتد. اکثر طراحان به این نکته واقفند که متن روی دکمه باید برای کاربر ساده و قابل فهم باشد.برچسب خوب باید عملی باشد؛ یعنی همانطور که به سادگی به کاربر می‌رساند که پس از ضربه زدن/کلیک کردن چه اتفاقی می‌افتد، آن فرآیند را انجام دهد. به همین خاطر پیشنهاد می‌شود از کلماتی نظیر ارسال، دریافت، اعمال و غیره استفاده نمایید تا کاربر متوجه عملکرد دکمه شود. برای مثال؛ هنگام ارسال ایمیل از کلمه‌ی Send به جای کلمه ی Submit استفاده کنید.در مورد تفاوت بین این دو کلمه بخوانید: https://hinative.com/en-US/questions/1102695submit عملکرد دکمه را بخوبی توصیف نمی‌کندسوال هفتم) چه میزان متن و برچسب می‌تواند در دکمه قرار بگیرد؟گاهی اوقات حساب کلمات بکار رفته در دکمه‌ها از دست طراحان در می‌رود. شاید این امر نشان دهنده‌ی شفافیت بیشتر در امتداد درک کاربر باشد؛ اما می‌تواند آشفتگی بصری(Visual clutter) را نیز سبب شود. در ادامه دو نکته ی مهم ذکر می‌شوند که بهتر است به خاطر بسپارید:الف) از text wrapping استفاده نکنید. اگر می‌خواهید برچسب شما همواره خوانا باشد، آن را در یک خط نگه دارید.از wrap text استفاده نکنیدب) عرض یک دکمه نباید از متن و برچسب آن کمتر باشد.اندازه ی مناسبی برای دکمه ی خود انتخاب کنید.سوال هشتم) آیا می‌توانیم تمامی حروف مورد استفاده در برچسب را از نوع Capital انتخاب کنیم؟ طراحان به دو دلیل ترجیح می‌دهند تمام حروف مورد استفاده در برچسب هایشان از نوع Cap نباشد:الف) خواندن و درک کردن حروف Capital دشوار است. اگر سرفصل(Header) و متن اصلی، هر دو بصورت حروف بزرگ نوشته شوند، خوانایی کمتری نسبت به متون عادی دارند؛ این میزان بین 13 تا 20 درصد متغیر است. مقاله ی این تحقیق: https://psycnet.apa.org/record/1944-02911-001ب) در هنگام خواندن متن آن هم با حروف بزرگ، کاربر احساس می‌کند شما تمام مدت بر سرش فریاد می‌کشید و قصد دارید نحوه ی درست انجام کارهارا به او بیاموزید.خب حالا چه زمان هایی "می‌توانیم" از کلماتی با حروف بزرگ استفاده کنیم؟ هنگامیکه می‌خواهید کاربر نسبت به بازتاب عمل خود کاملا آگاه بوده و از بروز هرگونه اشتباه جلوگیری شود، می‌توانید از حروف بزرگ در برچسب هایتان بهره ببرید.تماما حروف بزرگ در مقایسه با معمولیسوال نهم) آیا می‌شود برچسب متنی را با آیکن تعویض کرد؟بله، می‌توانید اینکار را انجام دهید فقط در نظر داشته باشید که آیکن مورد نظر معنای یکسان و جهانی داشته باشد مانند پرینت، سبد خرید، صفحه ی اصلی و.. برای باقی آیکن ها، مطمئن شوید که کاربرهای شما می‌توانند معنای آیکن هارا تشخیص دهند. اگر احساس کردید دریافت معنای آیکن برای کاربر کمی سخت به نظر می‌رسد، می‌توانید از متن در کنار آیکن بهره ببرید تا هدف دکمه راحت تر به کاربر منتقل شود. در این روش متن و آیکن مکمل یکدیگر هستند.آیکن سبد خرید برای کاربرها آشناست.اما از دو آیکن باهم در یک دکمه استفاده نکنید.استفاده از دو آیکن در یک دکمه می‌تواند کاربران را سردرگم کند.سوال دهم) آیا باید از سایه در طراحی دکمه ها استفاده کنیم؟بطور کلی عنصر سایه با افزایش برجستگی بصری دکمه، میزان تاکید عمل را افزایش می‌دهد. در نهایت، این امر؛ یعنی سایه دار بودن یا نبودن دکمه ها باید به توسط طرح کلی رابط کاربری صورت گیرد. اگر کلیه ی عناصر Ui صاف و Flat هستند، بهتر است که از دکمه های سایه دار استفاده نکنید.دکمه ی سه بعدی سایه دار در مقایسه با دکمه ی صاف و بدون سایهسوال یازدهم) چگونه حالت دکمه ی مورد نظر را تنظیم کنم؟علاوه بر وضوح عملکرد دکمه برای کاربر، باید حالت دکمه نیز مشخص باشد. در زیر انواع حالت های موجود برای یک دکمه را می‌بینید:عادی(فعال): هم قابل لمس و هم قابل کلیک کردن باشد.شناور(فقط دسکتاپ): عنصر خاص تعاملی است. فشرده: یعنی کاربر قبلا بر روی این دکمه ضربه زده است.غیرفعال: هنوز بخش های لازم توسط کاربر تکمیل نشده‌اند تا این دکمه فعال شود.دکمه ی عادی در مقایسه با دکمه ی غیرفعال...متشکرم که تا انتهای این مقاله همراه من بودید. متن اصلی این مقاله رو می تونید تو لینک زیر بخونید:https://uxplanet.org/11-questions-about-button-design-1bf68019b21dمقاله ی مرتبط دیگری هم در ویرگول منتشر شده بود که حتما میتونه مفید واقع بشه:https://virgool.io/@mohammadhadiahmadian/7-%D9%82%D8%A7%D9%86%D9%88%D9%86-%D8%A7%D8%B5%D9%84%DB%8C-%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-button-fkcuohzad116 گلناز شهشهانی گلناز شهشهانی Fri, 22 May 2020 17:51:44 +0430 https://virgool.io/ux-unicorn/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C-%D9%88%D8%A7%DB%8C%D8%B1%D9%81%D8%B1%DB%8C%D9%85-%D8%A8%D8%B1%D8%A7%DB%8C-%D8%A7%D9%BE-%D9%85%D9%88%D8%A8%D8%A7%DB%8C%D9%84-lgqpuvduc5uc وایرفریم ها در هر پروژه ای نقشی اساسی دارند و نرم افزارهای موبایل هم از این قاعده مستثنی نیستند! بطور کلی وایرفریم ها، اسکچ هایی با جزئیات کم(یا به اصطلاح low-fidelity) تا پروتوتایپ را شامل می‌شوند. طراحی وایرفریم مسیرهای مختلفی دارد که از طراحی به طراح دیگه متفاوت است. برخی از کمپانی ها ممکن است بعد از طراحی اسکچ مستقیما سراغ کدنویسی برنامه بروند، ولی مسیر معمول طراحی به شرح زیر می‌باشد:Sketch (Conceptual level) → Wireframe (Component level) → Mock/Prototype (Styles level/Interactions level) → Codeاسکچ کلی طرح/ طراحی وایرفریم ها/ پروتوتایپ برای انجام تست های تعاملی کاربر/ کدنویسیمهم است که بدانیم طراحی محصول فرآیندی چند مرحله ایست و طراحی وایرفریم نباید اولین قدم این فرآیند باشد. قبل از طراحی وایرفریم باید زمان کافی به تحقیقات پیرامون کاربر اختصاص داده شود؛ چرا که این تحقیقات چه از نظر کمی و چه کیفی، مورد نیاز مراحل بعدی خواهند بود. در این راهنما، طراحی وایرفریم نرم افزار تحویل غذا بر اساس سیستم عامل IOS به عنوان نمونه عملی قرار گرفته است.قبل از طراحی وایرفریم: User Flow ترسیم کنید.در ابتدا باید تصویر درستی از صفحات مختلف نرم افزار و نحوه ی تعامل کاربر با آن ها داشته باشید. اگر این اصل را رعایت کنید، طراحی وایرفریم بسیار آسان تر خواهد بود.بطور خلاصه، User Flow مجموعه مراحلی است که کاربر برای رسیدن به یک هدف خاص، طی می‌کند. در حقیقت، "هدف خاص کاربر" در اینجا نقش اساسی دارد؛ چرا که هر کاربر برای رسیدن به یک هدف ممکن است راه های مختلفی را امتحان کند و همین امر باعث می شود تا User Flow همواره یک مسیر خطی تلقی نشود. User Flow، به شما کمک می‌کند تا بدانید چه تعداد وایرفریم باید طراحی کنید و آن ها چگونه باید به یکدیگر متصل شوند؟برای ترسیم User Flow می توانید از شکل های ابتدایی مانند جعبه های مستطیل شکل و فلش استفاده کنید. قلم و کاغذ یا ابزار دیجیتالی فرقی نمی‌کند. در ادامه نوعی از User Flow طراحی شده در نرم افزار بالزامیک را می بینیم:User Flow فرآیند تحویل غذا مقالات مرتبط:https://virgool.io/@amirtaqiabadi/user-flow-%DA%86%DB%8C%D8%B3%D8%AA-ztgwtkpnunihاسکچ و ترسیم اولیه از هسته ی اصلی User Flowدر این مرحله باید User Flow را تجسم کنید! شاید فکر کنید که باید از ابزار دیجیتال برای این قسمت استفاده کنید ولی بهتر است نسبت به این حس بی تفاوت باشید. تنها چیزی که در این مرحله همیت دارد، استفاده کامل از خلاقیت خود و طراحی مسیرهای مختلف برای رساندن کاربر به هدف مورد نظر است. در این مرحله هم استفاده از کاغذ و قلم یا یک ابزار دیجیتال چندان تفاوت نمی‌کند.اسکچ اولیه به شما کمک می‌کند تا طرح کلی را رسم کنید، با کابرها به اشتراک بگذارید و Feedback بگیرید! سپس براساس همین نتایج، تغییرات نهایی را اعمال کنید.مهم است که در هنگام اسکچ اولیه، خودتان را جای کاربر قرار دهید و بدانید که هدف وی در هر مرحله از نرم افزار چیست؟ برای مثال در نرم افزار تحویل غذا، هدف کاربر دسترسی به غذایی لذیذ در کوتاهترین زمان ممکن است. در هر صفحه از خود بپرسید:هدف این صفحه چیست؟این صفحه چگونه می تواند به کاربر/کمپانی کمک کند تا به هدف خود برسد؟تصویر زیر، صفحه ی اصلی نرم افزار تحویل غذا را نشان می‌دهد که به کمک نرم افزار بالزامیک طراحی شده و بخش های اصلی به صورت مستطیل مشخص شده اند:اسکچ بهترین روش خلق ایده های نو! طراحی وایرفریم:اسکچ اولیه باعث شکل گیری فورم و چهارچوب در وایرفریم شده و پس از ترسیم، وایرفریم هایی با جزئیات قابل قبول(mid-fidelity) به دست می‌آیند؛ که در بحث و اشتراک گذاری با دیگر طراحان و توسعه دهندگان(Developers) موثر و کاربردی است.پیش از طراحی، سایز فریم موبایل انتخاب کنید.در حالت کلی، می توانید از یک مستطیل به عنوان فریم موبایل استفاده کنید اما بهتر است که فریم های انتخابی براساس موبایل های واقعی و مورد استفاده کاربرها باشند. اینکار باعث می‌شود تا:یک) دید واقعی تری از صفحه ی موبایل کاربر داشته باشید و در طراحی عناصر زیاده‌روی نکنید.دو) استفاده از فریم حس طراحی واقعی را به شما القا می‌کند.معمولا طیف مختلفی از دستگاه ها برای طراحی به شما پیشنهاد می‌شوند؛ اما توصیه می‌کنم در ابتدا یک فریم با سایز متوسط را انتخاب کنید. مثلا اگر در حال طراحی نرم افزار IOS هستید، بهتر است از فریم آیفون XS استفاده نمایید.فریم های موبایل iphone موجود در نرم افزار بالزامیک با رسم باکس و مستطیل چیدمان طرح را تعیین کنید.در قدم های اولیه طراحی وایرفریم هدف شما، ایجاد سلسله مراتب بصری(hierarchy) بصورت واضح است.طرح و ساختار را تنظیم کنید. در این مرحله، نسبت به محتوا حساسیت به خرج ندهید؛ چون نحوه ی ارائه است که اهمیت دارد. چهارچوب کلی را بر اساس پیش فرض خود از فعالیت کاربر تعیین نمایید. درادامه با کشیدن باکس، طراحی را آغاز کنید.در این قسمت، باید بر روی درخواست های نرم افزار از کاربر و نحوه ی ارائه آن ها تمرکز کنید. به یاد داشته باشید که کاربرها صفحات وب را از بالا به پایین و از چپ به راست اسکن می‌کنند(به شکل F؛ هم در موبایل و هم در صفحه ی دسکتاپ)در ادامه مثالی از وایرفریم صفحه ی اصلی نرم افزار آورده شده است. توجه کنید که چگونه سلسله مراتب عناصر را به کمک اندازه اشکال مورد استفاده در طرح، تعریف کرده ایم.ترسیم سلسله مراتب بصری به کمک اشکال ابتدایی از الگوهای طراحی استفاده کنیدشباهت یکی از مهمترین خصوصیات طراحی تجربه کاربری(Ux) خوب است. هنگامی که افراد عناصر UI مشابه با نرم افزارهای پیشین را در یک محصول جدید مشاده می کنند، از تجربیات قبلی خود بهره می برند. هم Android و هم iOS دارای الگوهای طراحی منحصر به فردی هستند، که باعث می شوند تا طراح راحت تر بتواند تجربه ی مشابه و آشنا را برای کاربر مورد نظر ایجاد کند و همچنین می‌توان از آن ها به دفعات بهره برد.الگوهای طراحی اندروید در بالزامیک Bottom tab bar, side drawer, Floating Action Buttonاین ها الگو هایی هستند که در ارتباط با Navigation bar فراوان مورد استفاده قرار می گیرند. اگر می خواهید طرحی واضح و ساده از مسیرهای Navigation داشته باشید، بهتر است از همین طرح های پیش فرض استفاده کنید.Bottom tab bar navigation محتوا اصلی را کپی و به صفحات اضافه کنید.بعد از اینکه سلسله مراتب بصری را تا حد مورد نظر اعمال کردید، نوبت اضافه کردن محتوا مرتبط به صفحات است. محتوای درست و مرتبط را جایگزین جملات بی ربط نمایید. در این قسمت می توانید از مطالب اصلی یا مطالب مشابه استفاده کنید. دلیل بسیار مهمی برای دوری از متن های غیر مرتبط و ساختگی در این مرحله وجود دارد و آن این است که Lorem Ipsum نمی تواند بصورت دقیق نحوه ی ارتباط کاربر با نرم افزار و مسیر یابی وی در جهت رسیدن به هدف را نشان دهد. همچنین با اضافه کردن محتوای واقعی و اصلی، متوجه می شوید که یکسری از عناصر و بخش های UI طراحی شده، الزامی نیستند و می توان از آن ها چشم پوشی کرد.گاهی اوقات، پس از تکمیل وایرفریم با جزئیات اصلی، متوجه می‌شوید که چیدمان شما درست کار نمی‌کند! در اینجا لازم است که طراحی مجدد صورت گرفته و روش جدیدی برای ارائه اطلاعات پیدا کنید.بعد از پر کردن صفحات با محتوای اصلی، حالا باید جریانات مورد نظر کاربر را تست کنید. ممکن برخی از اطلاعات اضافی به نظر برسند؛ پس بهترین زمان برای تحلیل محتوا و ایجاد ترکیب بندی جدید است.در ادامه، مثالی از وایرفریم صفحه ی اصلی نرم افزار را مشاهده می‌کنید که با اطلاعات اصلی پر شده است. دلیل استفاده از فونت با سایز های مختلف، تاکید بر اولویت بندی بخش هایی از UI مانند دسته بندی غذا می‌باشد. پر کردن وایرفریم از محتوای اصلی، متوجه می‌شوید که آیا چیمان اطلاعات شما درست است یا خیر؟ از مقیاس بندی درست محتوا اطمینان حاصل کنید.اگر طراحی شما در آیفون X5 با سایز متوسط فریم، از نطر بصری خوب به نظر می رسد دلیل نمی شود که کاربران آیفون XS max یا آیفون 5 هم همین تجربه را داشته باشند. پیشتر گفتیم که بهتر است در ابتدای کار از فریم هایی با سایز متوسط استفاده کنید، اما لازم است در ادامه راه نحوه ی نمایش اطلاعات در فریم های دیگر را نیز چک کنید. هم فریم های کوچکتر و هم بزرگتر و در صورت لزوم تنظیمات جدیدی اعمال کنید.صفحه ی اصلی در آیفون 5 و آیفون XS با متصل کردن صفحات به هم، یک جریان ایجاد کنید.درست است که می توانید صفحات طراحی شده را به صورت تک به تک هم ارائه کنید اما بهتر است آن ها را به صورت جریان(Flow) به هم پیوسته دربیاورید. تهیه ی Ux Flow به تیم طراحی کمک می کند تا جزئیات مختلف را بهتر ببینند و از نحوه ی ارتباط کاربرها با بخش های مختلف و سناریوی ارتباط آگاه شوند.همچنین Ux Flow به شماکمک می کند تا کاربرد پذیری نرم افزار را بصورت کلی ببینید. مثلا، بعد از طراحی ux flow متوجه شوید که لازم است بین صفحه ی اصلی و قسمت جست و جو یک مرحله ی دیگر اضافه شود؛ چرا که در قسمت Back-end مقداری زمان میبرد تا داده های سستم تحلیل شوند و این مرحله ی اضافه این زمان را در اختیار نرم افزار قرار می‌دهد.بهتر است صفحات را شماره گذاری کنید؛ چون در هنگام ارائه و بحث با تیم طراح، درک مسیر نرم افزار راحت تر می‌شود.صفحه ی اصلی در آیفون 5 و آیفون XS طراحی خود را تست کنید.تست گرفتن آخرین مرحله و یکی از مهم ترین قدم ها در طراحی وایرفریم است. در اینجا تست گرفتن به معنی سنجش میزان تعامل کاربر بوده و به همین دلیل است که این اصطلاح اغلب در زمینه نمونه های اولیه یا پروتوتایپ استفاده می‌شود. اما می‌توان به کمک جریان ساده ای متشکل از چند وایرفریم هم عمل تست را انجام داد. با استفاده از نرم افزار بالزامیک به کمک لینک کردن چند وایرفریم می توانید پروتوتایپ ساده و دارای قابلیت کلیک ایجاد کنید. هدف از چنین تستی، سنجش نحوه ی ارتباط صفحات مختلف با یکدیگر است.نتیجه گیریهدف اصلی از طراحی وایرفیم، شناسایی مطالب و ایجاد پایه ای محکم برای مراحل بعدی فرآیند طراحی است. وایرفریم خوب، طراحی بصری و طراحی تعامل را بسیار راحت تر می‌کند. همانند همه ی فعالیت ها طراحی و دیزاین، زمان کافی به آزمایش و امتحان کردن ابزار های مختلف اختصاص دهید تا در نهایت بتوانید سبک خود را در طراحی وایرفریم پیدا کنید. تمرین کردن، به این روند سرعت می بخشد.با تشکر از آقای تقی آبادی من باب معرفی مقاله و ایجاد انگیزه برای شروع ترجمه ی مقالات حوزه ی UIUXمنبعhttps://uxplanet.org/a-step-by-step-guide-to-creating-mobile-app-wireframes-ede2e5c53a75 گلناز شهشهانی گلناز شهشهانی Thu, 14 May 2020 11:55:13 +0430 https://virgool.io/@Golnaz.shahshahani/%D8%A8%D9%87-%D9%86%D8%A7%D9%85-%D8%AE%D8%AF%D8%A7%D9%88%D9%86%D8%AF-%D8%A8%D8%AE%D8%B4%D9%86%D8%AF%D9%87-%DB%8C-%D9%85%D9%87%D8%B1%D8%A8%D8%A7%D9%86-ppehgnbudona آن‌قدر به خودم گوش می‌دهمکه رودخانه‌یِ گِل‌آلود زلال می‌شودکلمه‌ها برای بیرون‌آمدن بال‌بال می‌زنندپرنده‌ها تمامِ شاخه‌های دُور و برم را می‌گیرند.کلمه‌ها چیزی می‌خواهند پرنده‌ها چیزیو رودخانه آن‌قدر زلال شدهکه عزیزترین مُـرده‌ات را بی‌صدا کنارت حس می‌کنیچشم‌هایت را می‌بندی ، حرف نمی‌زنی ، ساعت‌هااین درکِ من از توست :در سکوتت مُـرده‌ها جابه‌جا می‌شوندــکسی که منم ، اما کلمه تو با آن آمد ــطول می‌کشد ، سکوتت طول می‌کشدآن‌قدر که پرنده‌ها به تمامِ بدنت نوک می‌زنندو چیزی می‌خواهند که تو را زجر می‌دهدــ‌از هیچ‌کس نتوانسته‌ام ، نمی‌توانم جدا شوم ــ‌این درکِ من از ، من و توست .به جاده‌ها نمی‌اندیشی ، به کشتی‌ها نمی‌اندیشیبه فکرِ استخوان‌هایت در خاکیاستخوان‌هایی که بی‌شک آرام نخواهند شدمن از سکوتِ تو بیرون می‌آیمو می‌دانم آدم‌های زیادی در تو زجر می‌کشندو می‌دانم که رفته‌رفتهدر این فرشِ کهنهدر این دودکشِ روبه‌رودر این درختِ باغ چه ریشه می‌کنیو می‌دانم که تو سال‌هاست در منحرف نمی‌زنیحرف نمی‌زنیحرف نمی‌زنی.شاعر: شهرام شیداییمنبع: http://echolalia.ir/i-listen-to-myself/#more-9246 گلناز شهشهانی گلناز شهشهانی Thu, 14 May 2020 11:47:36 +0430